September 2019, I transferred from DTI's Queue Me In team to join the Carriage team, which was just starting out this semester. As a senior product designer on the team, I research and designed the rider application. On Carriage, I worked with 1 product designer, 2 product managers, 1 technical product manager, and 2 engineers.
The other product designer designed the driver application and worked together with me on the dispatcher dashboard.
Duration: SEP 2019 - DEC 2019
Results: App Prototype, Wireframe Flows, and High Fidelity Designs.
Design Tools: Sketch, Adobe Illustrator, Framer X, Invision, and Zeplin.
My Role: User Research, Usability Testing, Visual Design, and Prototyping.
What is Para-transit? Why does it matter?
Paratransit consists of transportation services for people with disabilities who cannot access conventional mass transit options, providing essential access to transportation.
Carriage project was done in collaboration with CULift, a pre-arranged shuttle service designed to help provide access to classes and on-campus activities for students with temporary and permanent disabilities that affect mobility.
Designed High Fidelity, Interactive Prototype
Please scroll down to read the full case study on Carriage Rider App's design.
In this project, I took a goal-directed design approach that proved to be quite effective in design efforts. I found qualitative research methods to be the most useful, consisting of user and stakeholder interviews, competitive analysis, usability testing and most importantly the persona construction. Starting off, the design team asked a few questions to reframe the problem.
"Whom am I designing for? Who are the primary users?"
"What kind of goals do they want to accomplish by using this application?"
"How might we be able to improve the rider's para-transit experience?"
"Were there any obstacles within the user flow in requesting a ride through CULift' portal?"
We talked to the stakeholder on the business side, CULift, and the rider users to learn about CULift's business model and product experience. This conversation helped us learn about previous research, determine the scope for the project and to better understand the opportunity.
What are we trying to solve?
How do we create an experience that empowers riders with disabilities while also fitting in the benefit of traditional mass transit options?
We conducted a few interviews with CULift users ranging from a temporary time patient to users with permanent disabilities. We primarily focused on student riders themselves as opposed to faculty or staff members. From these interviews, we wanted to better understand how these users felt as they used CULift service to allow us to specifically target these pain points.
Exploring the Space
To get to know the student rider's experience, I conducted a few in-person interviews and also sent out a survey with the same questions. Research questions provided a framework for our online research, survey, and interviews. We asked interview participants questions such as:
In total, we interviewed 6 students who are using CULift or have experience using it for at least one semester.
"Sometimes I did not have much time until class started and there was no way for me to find out how much longer it might take until my turn to be dropped off."
- User #2
"Apparently the driver missed the page [from the schedule] with my ride and did not know about my ride at all. I had to call the dispatcher and then dispatcher called the driver to find out what was going on."
- User #4
"[To edit a ride] you have to cancel and request a new one. You have to be aware of the change a few days before. Even earlier if weekends come in as well. You can't edit if you forget."
- User #5
We used an affinity diagram to identify the general scope of the project and decide which design direction we should be heading. This exercise, based on user interviews, proved to be very helpful in setting up the foundation for the rest of the design process.
Competitive analysis: What Can We Learn From Others in the Similar
As a reference point and to study how users move around the campus, I looked into two platforms- Uber and Lyft. Competitors are targeting the general public, excluding those with wheelchairs or physical disabilities. I learned how crucial accessibility support and live update of information is and should be a part of my solution to be competitive.
What is a student rider's journey with CULift?
I synthesized my qualitative data and findings into actionable insights through journey mapping.
Persona: Meet the user
When users encounter difficulties, what matters most is that the they feel their voice is heard.
User's action should be reinforced by thoughtful interactions and feedback so users can make decisions quickly and easily.
Ensure users the drivers will arrive on time and take them to their destinations on time. Communication should be available whenever necessary.
To better understand how we should design the core user experience, we first built a user flow. This helped us focus more on the overall experience and user needs and less so on the details that we can solidify later on. It also allowed us to communicate the entry and exit points more clearly with engineers
Ideation and Brainstorming: Growing ideas with sketches
The designers and I took out our sketchbooks and drew out various ways for the home screen. We compiled and compared blueprints to figure out which data formats fit best and which elements were necessary for the MVP.
I tried variations of the home page, as seen above, to explore as many possibilities in this phase before narrowing down. I experimented mostly with how to group the functionalities of the app in a way that would provide helpful information to users.
In terms of constructing the home screen for students, I could think of either designing it in a vertical scroll or combination of a vertical and horizontal scroll. Both options had their own merits and downside. So I decided to run a quick A/B Testing on the home screen to see which option users will found useful.
Option A - A combination of horizontal and vertical scroll freed up more screen real estate, allowing users to see more components in one glance. Also, Option B made users scroll more than necessary, getting in the goal of providing ease of use.
Choosing an interaction pattern
Design C- A we were concerned about the reachability with the button being in an unreachable zone or too small for errors, We considered Design C. We pursued this option since [Request Ride] feature should be easily accessible by users. The bottom-centered button would allow for easier and more efficient navigation by an easy Fitt’s law calculation and looking at the reachability map for iPhone.
Initial wireframe flow
After deciding and pinning down functionality, I did my final paper wireframes before digital low fidelity designs.
Medium Fidelity Explorations
Current Ride Card
Option E- The mini-map of the user's ride did not provide helpful information to users as many were already aware of the campus' map. This option, which took less space, gave users essential information in a salient manner while freeing up more space in the home screen.
Upcoming Ride Card (Horizontal Scroll)
Option C- Following the design of current ride cards, we decided to pursue an option that did not have a map, for maps did not provide much value to users. C arranged information in the hierarchy that was most useful to users and was more suitable for horizontal scroll.
Request Ride Button Design
Option B- During the initial testing phase, we discovered that initial design (option A) was making users prone to errors. When they wanted to request a new ride, they sometimes ended up pressing a Past rides card. In order to alleviate users' anxiety, we pursued option B which prevented users from errors with its background.
Visual Design Explorations
ETA message information
Design B- We initially thought using colors to communicate distance would be helpful for users. However, some of the users could not perceive the colors in the way we intended. So we switched gears and pursued minimalistic design for the rest of the process. Design B would communicate and highlight the "announcement" to users while attract their attention.
Style Guide: Considering Accessibility
We have the large responsibility of making our designs accessible as we move to high-fidelity. With around 4.5% of the world color-blind and around 17% of the world having other visual impairments, color contrast and accessible visual interfaces are essential, especially on college campuses. This issue mattered more for this project as Carriage aimed to provide disability support.
All colors used in the high-fidelity app design were AA~AAA contrast rating for the size of the text.
High Fidelity Designs
Conclusions & Looking Forward
This project was different from the ones I tackled before because accessibility mattered more than anything else. I learned to value the trade-off between following traditional designs and pursuing unique designs to answer users' needs. Following common designs would make the development phase much easier but, in the end, users matter more. As a designer, I learned it is important to find the appropriate middle point so a product with accessibility in mind can be delivered.
I learned Framer X to facilitate communication between designers and developers easier. Exporting the prototype as an HTML file and inspecting it on Chrome seemed to have helped some of the developers.
Next semester, we will be iterating based on usability test feedback, tightening up our designs and code, and gathering even more data from interviews. We will be expanding to include the dispatcher website into the project as well. I’m excited to work harder with the team to solve accessibility problems on Cornell campus and I look forward to the progress to come.
Aiden Yeonsuk Kim's Portfolio