top of page
Group 7.png
Group 4.png

UI/UX / UX Research

Role (Designer): Initiate user research, design wireframes, user journeys, and full-working prototypes using Sketch and InVision

 

Team: Natalie DeLong (Designer), Benji Miller (Developer), Kieran Jha (PM)

​

Timeline: Aug. - Dec. 2019

​

Tools: Figma, Sketch, InVision

​

Challenge

"People want to choose how to travel, but it's difficult to customize, compare, and combine ride options."

People who do not own cars in LA ultimately need to get to point A from point B quickly, efficiently and cost effectively. However with the vast range of transportation options emerging in large metropolitan cities such as ride-share apps (Lyft, Uber), scooters/bikes (Bird, Jump) and public transportation methods, the ease that apparently comes with these apps becomes a major stressor. 

Group 6.png

Goals

 

1. Allow users the options to optimize price or time, or private or public modes of transportation

​

2. Increase transparency of travel time and prices across all available ride options

 

3. Integrate dual-modality ride options as one of our unique features

1. 

Key Features

 

Within my design process, I created features to correspond back to each goal to ensure that I would meet all my intended targets.

Preferences
 

Upon registering for an account, the user has the option to customize their ride preferences by choosing whether they prioritize time or price and if they prefer taking public or private methods of transportation.

​

From there, RideSync will gather that information to generate the most optimized ride option based on those preferences. 

Ride Options
 

After entering in the destination, RideSync will display several ride options for the user to choose from. The first being the most optimized route that we recommend based on the user's preferences. However, the user has additional options displayed below if they prefer to choose a different method of transportation. 

​

The ride options are arranged on horizontal cards which prioritize displaying the price and time each ride.

Route Guidance

This specific prototype shows how the user will be guided when selecting a dual-modality option. In this instance, the user will be guided to navigate to the nearest bus station, receive confirmations along the way and then proceed to take a Lime scooter to get to the final destination. 

​

The dual-modality feature is unique to our app and offers complete flexibility for users seeking more cost-effective solutions.  

Process

​

Guerrilla User Testing: Our team completed multiple rounds of face-to-face Guerrilla User Testing on various candidates ranging from a 13-year-old teenager to a 83-year-old grandparent. In doing so, we wanted account for a wide range of potential users to maximize accessibility.

​

User Personas: Upon gathering all the responses from our different users, we created several user personas to ultimately understand their problems, motivations, and goals. At this stage, we actually came up with the idea of creating dual-modality ride options as several users stated that this would be a useful and unique feature. 

​

Value Proposition (V.P.): Our V.P. statement was pivotal to keeping our team on the right course throughout the product evolution/development. We went through several iterations of potential options and finally came to our final statement of:

​

Customize,

Decide,

Ride

​

This statement both commands the attention of users and clearly embodies the fundamental goals of RideSync. Including these three action verbs in our V.P. statement provides a sense of transparency and ease that will ultimately draw people to use our app. 

​

Visual Identity

 

The fusion of the letter 'S' and the number 8 within our logo was inspired directly by the concept of the Magic 8 ball. The overarching concept of the ball is a representation of fortune telling and a haven for anyone seeking advice. In this respect, this directly aligns with our values as an app which is to be an all encompassing wizard to guide users to narrow down all the options that are thrown at them into one optimized route.

Logo Grid.png

Circular Std Bold

Circular Std Medium

Circular Std Book

Icon on Black.png
Group 4.png
Icon on White.png
Group 7.png

RideSync wheel

​

ridesync_wheel.png
logo.gif

Design System

 

Throughout our design process, we maintained a shared design system that acted as a library of all our design components used to build our product. This system was extremely useful within a team setting to unify design choices across all our screens. Within our design system we had a style guide which outlined our graphic choices that was used throughout the entirety of our product. When creating our branding system, we also accounted for creating all components compatible for both light and dark mode. 

​

To view our final design system, you can click on the link here or the image below.

Icons.jpg

Prototype

 

Click the link here to interact with the final working prototype of RideSync on Figma.

bottom of page