Spare
Design Challenge, 2020
Spare's engine is a routing and matching algorithm that helps autonomous vehicle fleets match passenger trip requests to available vehicles on the road.
Spare builds tools to improve how customers continue to reinvent the way people get around. This product design is made for Spare Labs' design challenge.
My challenge goal was to design a new web-based screen that allowed Spare's customers to visualize how changing one of three routing parameters will result in vastly different user experiences. For example, how bringing down the walking distance will increase the in-vehicle detour and wait time.
ROLE
UX/UI, Prototyping, Visual Design
TOOLS
Sketch, Illustrator, and Flinto
DURATION
5 Days
Problem
How might we effectively visualize the adverse effects of changing one of three tuning parameters so that users can compare routes and make an informed travel decision?
Hypothesis
In exchange for a faster, more direct route to a destination, riders are willing to wait for a short period and walk to an optimal pickup location. Likewise, riders are willing to trade a predictable pre-trip experience for a route with fewer detours.
Research
1. PRIMARY RESEARCH
Mapping out the typical car journey flow
2. PRIMARY RESEARCH
Casual and informal chats with frequent car-share riders
3. SECONDARY RESEARCH
Researching existing solutions and the current product market
01 The Car Journey Flow
While working on this case, I missed a package delivery and needed to pick it up at a local post office. My package was sent to the most remote post office possible, but this made for a perfect opportunity to map out the journey of a vehicle service. Needless to say, I got my phone out and ordered myself an Uber.
In documenting my own car service experience, I intended to use the mapped journey in my subsequent user interviews to understand the response riders have when routing parameters can vastly change the length and experience of a ride.
02 User Interviews
I was interested to know how individuals felt in these moments; I conducted user interviews and presented my personal flow as a template. For each step in the flow, I had the interviewees explain to me the thoughts and emotions they usually have and feel during the particular moment.
The interviewed individuals are frequent users of ride services and/or had travelled to a new destination in the last six months. I set these criteria as frequent riders would be sure to have opinions about their overall trip experience, and travellers would have put themselves in an unfamiliar situation trying to navigate routes that best fit their travel preferences. Some recurring discussion points included:
"It never made sense to me when a route is labelled '2 minutes' faster/slower."
"I just feel anxious and uncomfortable not knowing where I'm going. It's embarrassing looking lost"
From walking through the car journey flow with my interviewees, their feedback and opinions helped me identify where tuning parameters were specifically affecting the experience of the overall journey. It is during the moments when the riders are matched, the driver arrives, and the car is en route to the destination when riders felt the parameters vastly changing the length and experience of the journey.
Insight: Intent-rich moments
Breaking down the car journey flow and interviewing users highlighted that—with information at our fingertips—these are the intent-driven moments where visualizing the adverse effects of choosing between multiple routes will make the biggest impact in helping users make an informed choice about their trip.
The three outlined are intent-rich moments when decisions are made and preferences are shaped. In these moments, the riders’ expectations are higher than ever.
03 Researching Existing Solutions
To better understand the functionalities of a route matching system and the design patterns of maps, I turned to explore existing solutions. I chose to conduct in-depth research on Google Maps and Uber Rides Estimator as they were the two most commonly mentioned products in the user interviews.
GOOGLE MAPS
Google Maps ensure that travelers are well-informed of all aspects of their journey. Whether it's the type of commute, fastest routes, or traffic warnings, Google’s dashboard allows users to tune their journey to be as specific as they would like it to be.
UBER RIDE ESTIMATOR
Uber’s Estimator informs users of the type of vehicles available in the area and the rates they operate at. Based on their route, riders have the option to tune their trip that fulfills the physical riding experience; it’s the matter of being comfortable with a quick trip in a Toyota versus riding in the luxurious comfort of a premium SUV.
Insight: Familiar design patterns
Through researching existing solutions, it provided me insight to better understand the design patterns and UIs of similar solutions. Some notable takeaways include:
-
The features encourage users to continually engage with and tune the content; they are presented with further appropriate options for interacting and better understanding the journey.
-
Screens should be easily scannable and display information that affords travellers to quickly evaluate their riding options before leaving.
-
Patterns commonly seen in navigation and routing products include a dashboard for information input and tuning features, and an interactive map to visualize the route and the tuning features applied from the dashboard.
Designing
Bringing all my findings together, I outlined 2 opportunities where I could design to help users compare routes and make an informed travel decision.
Sketches
Wireframes
At the wireframe stage, I progressed the designed using the card component version instead of the anchored dashboard. This layout proved to create the least amount of congestion on the screen and follow Spare's existing visual product design patterns.
High-Fidelity Screens
COMPARE MODE
Upon clicking the button, radio buttons appear next to each route where users may select which routes they would like to compare. To keep the focus on what is being compared, any unselected routes will fade-out.
On the map, a timestamp will appear next to each route to indicate how the route differs based on the parameter. This allows users to make a more practical decision through a simplified visualization of the trade-off: "I can either walk five minutes to a stop or just wait for the vehicle to come to me."
DESCRIPTIVE ROUTE LABELS
A descriptive label is added under each label to characterize the small time difference between routes. At a glance, users will have a better sense of how each differ and what would fit for their travel preferences the best.
Conclusion
I was really excited to work on Spare’s design challenge; as the designated serial planner for vacations, this project provided an interesting perspective into how specific tools are designed to support travellers.
An intro to designing for scale
I was really glad I had decided to incorporate a user interview component into my process. I came to understand travel as a universal, yet very personal experience. From a high-level view, it’s universal because we’re just trying to get from point A to point B. Yet, travel is so personal as each traveller is accustomed to particular services and methods of travel that they personally deem to be satisfactory and efficient.
Nail the concept, design after
The beginning of each design project can feel like organized chaos and the opportunity always presents itself to lose yourself in the finer details. This design challenge was a reminder that although most things are more complicated than they appear, it’s important to stay focused on the problem at hand. At one point I found myself sidetracked and fixated on designing a unique map style. It was good to reminder to hit pause on my current progress, step away from the artboards, and re-evaluate my research and design decisions.