App Redesign

Making the app more accessible and easier to use

Problem

Scoop's mobile apps are the only way for people to request and carpool with one another. There where three problems that made the experience cumbersome, unintuitive, and inaccessible.

  1. The main view, Trips, was over crowded and filled with outdated information. The information carpoolers needed to see was not always the first thing that was shown.
  2. The carpool details hierarchy made it difficult to scan for certain details and was the same for both drivers and riders even though their experiences were very different.
  3. The color palette and how color was applied in the apps did not meet WCAG 2.1 accessibility guidelines and having carpoolers that are visually impaired meant they could barely, if at all, use the app.

By solving these problems we not only greatly improved the user experience, but created a solid foundation to easily add new features and continue making our apps more accessible.

Goals

  • Bring focus to the information that matters most to carpoolers.
  • Improve the ease of use of the core experience.
  • Make the app more accessible for those that are visually impaired.

User Research

I worked with our User Researcher to define the goals for the usability tests. Our focus was to test problems 1 and 2 from above. In order to let carpoolers explore the designs, I created multiple prototypes in InVision, which we shared with them via a link over video. I sat in on the tests to get a better understanding of how our carpoolers thought, felt, and understood about the new experiences. Below are some of the things they said that stood out.

Goals

  • To increase carpooler's comfort around the status of their carpool.
  • To increase carpooler’s readiness and preparedness for their carpool.
  • To decrease carpooler's anxiety around their upcoming carpool.

Sketches

These are some of the designs we explored early on.

From top left; Rider Carpool Details view, main view, carpool states, interaction and transitions of the Carpool Details view.

Designs

These are some of the designs we tested with our carpoolers.

Variations of the Trips tab view.
Variations of the bottom sheet component.

Feedback

After the user tests were completed, the User Researcher put together their findings in a doc. The doc included what carpoolers said and suggested edits to the designs.

A handful of the suggested edits were; remove the past trips section, be more clear about the status of each card, and reduce the amount of information show in the Trips tab view, carpoolers who drive and ride value different kinds of information, and carpoolers want to have ETAs.

Below are some quotes from our carpoolers that stood out.

Honestly I don’t know if it’s that necessary to have an extra button. These extra two buttons up at the top of the screen.
The only thing I’m cautious about it that I hate having to just scroll and scroll and scroll
I have no idea what that cross is.
I would click the ‘evening ride confirmed’ block that’s on the bottom, or the ‘view’ next to the evening ride, to see the details.
I want to be able to quickly view the route, and see where people’s pickup and drop-offs are.
All the information I want is on this screen.

Solution

Update the layout of the cards, the timing of when they show and expire, and which states are shown. Add a new component, the bottom sheet, to have the most important information up front and easy to access. Apply the new color palette to meet the AA contrast ratio requirement.

Main View

The Trips tab view is where carpoolers spend the majority of their time. They need to be able to easily and quickly access the information that is most relevant to them. When the card with the most important info is out of view and difficult to see, it makes the experience more painful. Many changes were made that greatly improved the UX. Those changes are:

  • The card layout and content, e.g. schedule card.
  • The improved connection between content, e.g. moved the date into the card.
  • The highlighted action the carpooler should take, e.g. dark colored icon and actionable text instead of an icon.
  • The new component that put the most important information upfront, e.g. bottom sheet.
From left; The original Trips tab view compared to the new one.

Carpool Details

Carpoolers had difficulty finding their carpool details because they were mixed in with other cards. In addition, the details could be incorrect because they were not updated based on the time or status of the carpool.

The new details were broken out into two views. The minimized view and the expanded view, both located in the bottom sheet. The minizmied view was always visible and could easily be expanded to get more details, like the map.

From left; The original Carpool Details view, the new Trips tab view in the confirmed state, the new Carpool Details view the confirmed state, the new Trips tab view in the approaching state, and the new Carpool Details view in the approaching state.

Role Specific Views

One significant change from the original Carpool Details view was the difference in order and hierarchy of information between drivers and riders. Drivers want to see where they're picking up their fellow carpoolers, while riders want to who's driving, their car details, and if they're are any other riders. Though there were pieces of information that were important for both, which include the confirmation of when they're picking up or being picked up, the ability to text or call each other, and the ability to cancel.

From left; Driver and rider views.

Color Application

With the new and accessible color palette the goal for applying it to the app was to reduce the noise, e.g. the amount of color and have the content be the focus. I setup guidelines as part of our design system for applying the colors.

Color Palette

Old color palette.
New color palette.

View Comparison

From left; Old and new Schedule view and old and new Community view.