Designing a Customized Trip Planner Widget

Introduction

We built a trip planner widget, to help transit organizations provide their users a friendly, intuitive and informative way to plan their next trip across a city. In this insight post, we share details of the design process involved with designing a trip planner, along with the features we implemented and how we added a white-label brand UX to the maps. we implement our trip planner widget for the Sacramento Regional Transit District website

‍

What does the trip planner do

The trip planner allows visitors to select a “from” starting location and a “to” destination location, with dropdown recommendations as they type their locations. Once selected, the stylized map below it, shows the user the exact details of the route to take to reach the destination. On the left side of the trip planner are step by step instructions guiding the user along the route, with icons that provide information like mode of transport ( walking, bus or train ) , distance for each mode, and the total duration of the journey. Here's a snapshot of what it looks like when you want plan a trip from midtown Sacramento to Curtis Park 

‍

Initial Inputs for design

We were given a very basic design of what the functionality of the trip planner would be and currently looked like.The design was the generic design used in Google Maps, with the standard styling and colors for the buttons, route lines and icons. This was the out of the box API solution from Google, which we wanted to re-style to match SACRT’s unique brand guidelines and website aesthetics.

‍

Replicating the brand style guide for buttons and fonts

We wanted to ensure that the trip planner resonated naturally with the look and feel of the style guide of the SACRT website - starting with the fonts and buttons. The fonts used were Commuter Sans ( semi bold ) and Interstate ( bold, regular ). For the buttons, we used Primary Marigold ( Hex #F6AE1B ) and Royal Blue ( Hex #002469 ).

‍

Brand Style for buttons and fonts

‍

Our Replication of the buttons and fonts for the trip planner

‍

Redesigning the transit map with the brand style guide

The current map was the generic version of the map used by Google. As a provider of tailored and customized web solutions, the Exemplifi team wanted to redesign the map to match SACRTs distinct look and feel, with route colors that matched those aesthetics.  An in-escapable part of the process to lock into the best design is to create multiple versions and see which fulfills the users needs the most. We experimented with multiple versions of the map to match the brand colors. Here are a few of the rejected options that helped us narrow it down to the final version.

Each one of these matched the brands style guide. But something didn’t quite add it up in the look and feel of it. We wanted the text to pop out and not get lost in its surroundings. Sometimes it's important to move away from over-using the style guide and rather to use it elegantly and conservatively, which is what we did with the final version of the transit planner map 

‍

We chose a lighter grade of the map, and enriched it by enhancing the blue colors of the style guide. Notice how the rivers are a more dense shade of blue and the transit route a light blue shade that contrasts with the white of the map. We used SnazzyMaps to help us create and experiment with different iterations of the map style.

‍

Redesigning the travel details section in the trip planner

We also re-designed the icons used for the travel details section of the trip planner. This gave it a fresh look that helped create a sense of uniqueness to the widget. We used icons from the Sigma Library and colored coded them as per the style guide. Additionally, in order to keep the trip planner as streamlined and functional, we chose to remove certain features like route sharing. This gave the interface a cleaner and less cluttered look and feel.

‍

Old Icons

‍

New Icons

‍

Conclusion

Designing a customized trip planner requires a thorough grasp of the brand's style guide and finding a way to enrich existing technologies to complement that style. We did a complete overhaul of the standard maps API and re-purposed it for a unique look and feel. The trip planner worked out functionally well and was appealing in design. If you’d like to know how we designed it. Stay tuned for Part II coming soon. 

‍

If you enjoyed this post, please follow us on Linkedin, X and Facebook

‍