Arrow

Revel

Create a digital solution that makes commuting easier for Revel users.
Product
UX/UI
Case Study
Home Page-RevelDevice connectivity- revelMy Ride- Revel

My Role

User Research, Product Design, UI/UX Design, IxD Design, Design System

Timeline and Status

Spring 2024 (4 months)

Team

Kathryn Kopec, Beam Sosothikul

Tools Used

Figma, Miro, Adobe Illustrator, AfterEffects, Photoshop

OVERVIEW

Revel is an all-electric ride-share service that was founded in 2018 in Brooklyn, New York. It offers eco-friendly transportation options in New York City and parts of New Jersey. The objective was to enhance the existing Revel app by introducing new features that address user challenges and improve overall functionality.

Project Timeline
HIGHLIGHTS

With Revel, the journey is more than just reaching the destination - it’s a personalized, convenient, and stress-free experience from start to finish.

0.1   Case Study Video
Mobile Screens
0.2   Mobile Screens
UI Components
0.3   Core components

DISCOVER

The backbone of the project.

THE PROBLEM

Many commuters find their daily rides monotonous and lack motivation to engage with the transportation service they use. This results in decreased satisfaction, low loyalty, and missed opportunities for the brand to build a strong, interactive relationship with its users.

Competitor's Analysis

Before diving into the design phase, we began by breaking down the problem into key pain points. We then selected and evaluated the three most popular ride-share apps to understand how they addressed these issues.

UI of Uber- Competitive Analysis
User-friendliness
Functionality
Feature Set
Summary
Uber offers extensive ride choices and global reach, but the app can feel cluttered and often confusing for users.
UI of Lyft- Competitive Analysis
User-friendliness
Functionality
Feature Set
Summary
Lyft features an easy-to-use interface and affordable rides, though it lacks advanced options compared to its competitors.
UI of Curb- Competitive Analysis
User-friendliness
Functionality
Feature Set
Summary
Curb blends traditional taxis with a modern app, providing familiarity, but its limited features and design can feel outdated.
*Only key insights are shown for simplicity.

Empathy Interviews

We interviewed individuals matching our proto personas—professionals, students, travelers, and laborers—to identify key pain points.

12
in depth interviews were conducted
7
different socio-economic backgrounds were represented
20
years of age difference between the participants
Empathy Interview

Major Pain Points

Lack of Personalization

Users want a way to customize and personalize aspects of their ride experience, such as atmosphere and entertainment, especially during long-distance travel.

Accessibility Unfriendly

Ride-sharing apps often don’t cater to users with disabilities, making them hard to navigate. This leaves people with impairments unable to use the services fully.

Limited Engagement

The lack of gamified features and rewards reduces user motivation and loyalty. Apps that don’t provide incentives are at risk of losing users to more engaging competitors.

DEFINE

Each persona had distinct needs.

Meet our Users

Based on our research, we created four personas that represented our target user groups, which we could use as references while designing the functionality of the app.

Persona 1
Alex
Family-First Techie, 45

“I find joy in crafting innovative solutions at work, but nothing beats the warmth of family time”

Persona 3
Mira
Social Jetsetter, 28

"Exploring, remembering, and connecting are the core of a journey"

Persona 2
Jamie
Impeded Learner, 21

"Every choice we make today shapes tomorrow's world"

*Only lite persona is shown for simplicity

User Journey Maps

We crafted journey maps to empathize with the daily challenges users might face, allowing us to pinpoint opportunities for potential solutions. Each persona has its own goal and scenario.

IDEATE

Organized, strategic, and iterative design.

Brainstorming

We selected the most promising How Might We (HMW) questions and generated ideas for each to explore potential solutions.

Brainstorming

Problem and Solution

We identified key user issues trough research and developed targeted solutions, providing a clear overview of our approach.

Persona 1

He needs a peaceful commute to work without disruptions, as they affect his focus and readiness for the day ahead.

Integrate ride customization and in-ride entertainment to align with his preference

Persona 3

Needs access to ride-sharing services with seamless integration between her rides and traveling to the airport

Have a seamless integration of traveling to and back from the airport using Revel

Persona 2

Struggles to get around due to vision impairment, making it difficult to schedule rides on ride share apps

Enable hands-free connection to each device for booking and notifications

Creating a Blueprint

Based on the key features we mapped out where the main categories & subcategories should be located on the app & how they need to be connected.

Sitemap

Predicting a Flow

We created user task flows for all the features we added to the app to illustrate the various navigation paths a user may take to complete that task.

Paper Prototyping

We created rough sketches for all the flows to map out the placement of elements throughout the app.

Paper Prototyping

Wireframes

We iterated multiple times on the wireframes to ensure that the new features were as easy as possible for users to navigate, refining the structure based on feedback and usability testing.

Key Insights from
User Testing

Users found the ambiance profile feature complicated, leading us to add tooltips and brief descriptions for clarity.

The airport feature was overly complex; users preferred booking two separate rides over providing excessive information.

The “current ride” icon in the nav bar was confusing, with users mistaking it for the ride booking page.

The accessibility wireframes initially covered too many disabilities; we decided to focus on one to enhance universality.

DESIGN

Futuristic and innovative, just like Revel.

Ambiance Profiles

Select from various profiles based on mood and comfort preferences, integrating functionalities from the Tesla app for enhanced customization. Adjust temperature, noise levels, and ambiance to create your desired ride environment.

Ambiance Profile
Ambiance Profile

In-Ride
Experience

Control your entertainment via Revel app. Select from curated playlists, podcasts, and audiobooks. Users can also adjust the temperature and volume to their liking.

In-Ride Entertainment

Airport Ease

Simply input flight details and have the app sync your airport arrival and departure times with your ride. Receive updates and automatic rescheduling.

Airport Ease
Airport Ease

Revel Assist

Communicate with in app assistant Revel Assist via phone or apple watch to complete tasks with voice-only.

Revel Assist
Revel Assist

Revel Rings

Revel Rings are achievement badges earned by completing milestones and activities, gamifying the ride experience with fun challenges and rewards.

Revel Rings

DELIVER

Simple and perceivable.

Design System

The design system for Revel is a comprehensive toolkit that ensures consistency and efficiency across all user interfaces. It includes a set of reusable components, style guidelines, and design patterns that maintain a cohesive look and feel throughout the app.

Design System

TAKEAWAYS

I learned a lot.

Project Takeaways

Working with research is a cheat code

It helped uncover opportunities to explore and led to quick and informed design decisions.

Championing the user

Gaining a clear understanding of the user simplified the development process, making it easier to create targeted and effective solutions.

Prioritizing essentials over extras

We aimed to incorporate more features, but due to time constraints, we had to focus on the MVP. This decision helped us concentrate on essential features.

CONTENTS
OverviewHighlightsDiscoverDefineIdeateDesignDeliverTakeaways

Next Project:

Product
UX/UI
Case Study
Fintech

Influx

AI-driven social investing app.

influx UI