Conceptual App Redesign for iOS

Original photo by Lukas Robertson (Unsplash)

Duration: 2-week design sprint

Tools: Lean UX Principles, Gantt Chart, Nielsen Norman Group (NNG) Usability Heuristics, Marker, Dry Erase Board

QUICK FACTS

↓ The Details ↓

Our UX team was tasked with conceptually redesigning the mobile app experience for users of the Puget Sound Trip Planner, owned and operated by King County Metro. Even though there are over 500,000 riders in the region who take some form of public transit daily, virtually none of them use the app. This student group project was done under the guidance of industry experts.

When it comes to public transit apps, the aim is to provide users information about how to get from point A to point. However, the ideal app would provide existing information so that bus riders could manage their expectations better.

This is especially the case when bus riders’ main issue is with inaccurate information about bus arrival times. Regular commuters need accurate updates on their bus route because they become frustrated when they don’t know where their bus is or when it is going to arrive.

By displaying accurate and reliable bus arrival times to commuters, we will ease their frustrations thereby creating a pleasant commuting experience. If this is successfully implemented we expect to see an increase in the average rating of the app (currently at 1.9 stars on the Apple Store).

Our Process:

(1) Project Plan — (2) Research — (3) Design & Test — (4) Deliver & Present

ROLES & RESPONSIBILITIES

I opted to take on the role of UX Project Manager. Having an individual dedicated to Project Management was key to looking back at big picture goals and moving the team forward with the short time frame to complete the project. Given my prior experience as a program manager and interest in applying Lean UX principles swiftly, I had taken ownership of this position.

Our group agreed that the separation of roles would yield more ownership from each individual and thus better outcome overall. However, I decided that I would provide support throughout the development process as identified during daily stand-ups.

As a group, we worked backwards to determine the breadth of work for each phase of discover, define, develop, and deliver. In leading the exercise with the team, I documented this preliminary timeline:

PROCESS DOCUMENTATION

As project manager, I documented our conversations as well as held daily stand-ups and occasional retrospective sessions to check in on our team’s work process. Below are artifacts of our process documentation as a team:

From here, I facilitated a group discussion to delineate research tasks as it was the most immediate phase to implement, including identifying any screening criteria, data collection methods, collection tools, etc. Once those activities were established, the group determined rounds of testing and resources it would take to create low fidelity wireframes, conduct testing and incorporate user feedback, and complete high fidelity wireframes.

SYNTHESIS

The team discussed screening criteria and determined that our users would be any adult (18 years or older) in the local metro area who has taken public transportation. The UX Researcher drafted a survey instrument online to gather mostly quantitative metrics.

Separate from the survey, the team conducted interviews with people to test the usability of the current app. With findings from the survey and the interviews, our UX researcher engaged our entire team to review survey insights with affinity mapping.

Challenges: Our group had difficulties defining the actual user problems involved with using the current app. In consulting with industry experts, it was noted that there likely was not enough data to infer a problem statement. The quotes documented did not seem to fully capture attitudes of current users, just commuters in general who may use other transit apps.

Decision Points: The team decided to conduct additional research by going to bus stops during the peak hour, asking commuters on the street if they used the app. In conclusion, the UX researcher confirmed that virtually no one uses the app.

MEET ROBIN, OUR TRIP PLANNER USER

Our UX Researcher embodied the user pain points in the persona “Robin” to illustrate a model user’s behaviors, motivations, and needs. In providing support to the research side, I drafted the following persona description:

In providing support to the team, we had not quite built out a persona or user scenario to tell our story for the pitch. In expounding on the user persona that our UX Researcher created, I began illustrating the user scenario and storyboard.

The clip below will provide an idea of how this storyboard was visually presented to the audience, before and after design changes. (The clip does not include any narration).

INFORMATION ARCHITECTURE

Our team’s information architect reviewed the current site and concluded that the layout needed an overhaul. Given the users’ main needs with bus arrival information, the current site showed that it took up only 0.3% of the screen’s results display, indicative of the little hierarchy and contrast that was actually needed for a better commuter experience.

With the information architect’s help, I conducted a cursory comparative analysis to how other transit apps provided existing bus information to its users. We both reviewed the following apps and documented the following heuristics in a table (ratings: off white = poor, grey = medium level, black = excellent).

Using this information from the comparative analysis and research findings, the interaction designer began digitally sketching wireframes.

LOW-FIDELITY WIREFRAMES

Much of the heavy lifting had occurred during the low-fi wireframing and testing. Below are examples of how our Interaction Designer created low-fi wireframes and incorporated user feedback at different rounds of usability testing:

DESIGN STUDIO

In the process of low-fidelity prototype testing, we identified a problem to work on for our design studio, which was the display page for when the user selects a route option. Our team sketched ideas for the display page:

Our team effectively fused together aspects of each person’s final sketch ideas into a display page that continued to prioritize the user’s main need for bus arrival information as well as providing any expected features (e.g., selecting a route among options, launching into navigation, etc). This screen was translated into the high-fidelity visual design of the wireframes.

COLOR PALETTE & TYPOGRAPHY

The team’s visual designer investigated the current style guide for King County Metro, the agency owning the app of interest. Their main brand colors were the rich green, gold, and blue colors as seen on the right.

Additionally, to ensure the visual design adhered to the current style guide, our visual designer selected the typeface Open Sans. Given that King County Metro is a government entity, accessibility standards were key — in referring to the WCAG 2.0, our redesign took into account Level AA conformity to have large font sizes and high contrast, with legibility and readability as the highest priority.

HIGH-FIDELITY WIREFRAMES

The findings from the usability tests and style guide were applied in the hi-fi wireframes and prototyped with users for additional feedback. Below is an example screenshot from our visual designer’s iterative work:

Watch the newly redesigned Puget Sound Trip Planner app in action:

WHAT OUR EVALUATORS HAD TO SAY

In presenting our final deliverables to the industry experts leading the class, we received high evaluation marks and performed beyond expectations in all areas of assessment (user research and sytnhesis, strategy, delivery, and execution).

“I was impressed with how you all worked together, and how clean the design was. Your user story was consistent throughout, and all design decisions were based on your persona. You did a good job keeping branding guidelines consistent in your final design.”

— UX Instructional Staff

WHAT USERS HAD TO SAY

“My 12-year-old sister could use this!”

— Participant 301

“This is a lot quicker… and much clearer.”

— Participant 303

In testing the latest product, our team created an enhanced transit app for regular commuters who want to know when their bus is arriving, with the intent to reach more users and increase the average app rating:

LESSONS

• Check in early and often. Continuing to pause in the middle of the design process to report back to our industry expert teachers is an important aspect to ensure we can incorporate feedback gradually and steadily as we design. Waiting until we are near the finishing stages of the design process to check in is not quite judicious as it is expensive (time-wise) to make changes when we are nearing a due date.

• Bear in mind the “minimal viable conversation” needed keep the design process going. When implementing Lean UX principles, what artifacts are needed to communicate in order to get to the next step? How do we ensure that teammates are communicating with one another so there is cohesion and continuity in the process? In implementing Lean UX, these were critical questions for me to consider to keep us moving in the right direction.

• Instill trust and confidence in each person’s respective role. As someone managing a UX project for the first time, I felt that all teammates found value in providing mutual support to each member so they can take ownership of their role while looking at the bigger picture of the process.

>>Next project: EDGE Learning Simulation Design