Destination
Start
Destination
Current Location
|
Union Square
14th St - 17th Street, New York
Penn Station
7th Ave, New York
Little Island
West Side Hwy, New York
Washington Square Park
2 5th Ave, New York
Ave A & E 14 St
Report a problem
Dock is offline
27
1
9
classic
ebikes
open docks
9 min ago
Mute
Share View
Citi Bike Help
01:01
End
1:18
arrival
10
min
1.2
mi
OVERVIEW
Helping Citi Bikers navigate safely and efficiently with AR glasses offering real time navigation, safety alerts, and optimized routes for a seamless urban cycling experience.
PROJECT TYPE
UX/UI Case Study
Independent Project
TIMELINE
Sep - Dec 2024
ROLE
UX Researcher
UI Designer
SKILLS
Product Design
Interaction Design
Brand Design
TOOLS
Figma
Miro
The Problem
As a Citi Biker myself (with over 300 Citi Bike rides in the last 2 years), I’ve experienced both the good and bad of cycling in urban areas. Here are the two main issues that exist in the current Citi Biking experience:
The Challenge
How might we help Citi Bike users navigate better, so they can ride more confidently and avoid accidents?
SOLUTION
Ta Daaaa!
Final Product
I designed Citi Bike Vision, an augmented reality feature that enhances urban cycling with real-time navigation, turn-by-turn directions, and dock information, including bike availability and e-bike options. Users interact via voice or gestures and can report issues or access instant support through live calls or AR diagnostics, making city biking safer and more seamless.
Real Time Support
Users can go from finding a destination to unlocking a bike to even being supported by real-time navigation using this AR feature. The real-time navigation provides users with audio and visual cues that shows your path with turn-by-turn directions, estimated arrival times, and any shortcuts you can take. Users interact with screen using voice commands or gestures.
Starting a ride
Unlocking bike
Navigation mode (in various instances)
Crowdsourced Dock Info
Users can see information about each dock, including the location of the dock, how many bikes or ebikes are avaliable. Users can also report if the dock has any issues and other users will be able to see.
Real Time Support
Users can receive immediate and in depth customer support through calling support or through an AR diagnostic that aids in finding issues with either a bike or dock.
RESEARCH
Analyzing the field
Competitive Analysis
Following my initial research into the challenges faced by citi bikers, I began to examine potential competitors of my product. Although Citi Bike Vision is a unique solution, blending augmented reality with real time support and navigation, I wanted to take a closer look at companies that are already addressing similar needs in navigation. This research helped uncover gaps in their offerings and shed light on the features that users find most valuable.
Competitive Analysis Learnings
Through my research, I’ve identified an opportunity for Citi Bike AR to enhance biking experiences by focusing on navigation, safety, and docking system integration. Unlike traditional navigation or biking apps, Citi Bike AR offers real-time audio and visual navigation, safety alerts , and provides information on available docks, ensuring a seamless and secure biking journey.
Identifying target users
User Persona
To ensure Citi Bike Vision effectively addresses user needs, I developed personas to deeply understand their motivations, challenges, and goals. These insights guided the design, ensuring the product delivers meaningful solutions and a seamless experience.
I chose to focus on Citi Bike’s core customer base which are long term subscribers aged 35–44. These individuals frequently rely on Citi Bike to commute to work, run errands or enjoy leisure rides. Citi Bike users value efficiency, convenience and reliability.
Understanding our users
User Journey
To ensure Citi Bike Vision delivers a seamless and meaningful experience, I began by mapping out a hypothesis of Jimmy and Ella’s emotional journey, actions and goals during a ride using Citi Bike Vision. This strategic process helped me anticipate their needs and design features that truly align with their expectations.
DESIGN
Feature Ideation
Hypothesis & Initial Solutions
After conducting desk research, performing a competitive analysis, and creating user personas and journey maps, I strategically developed Citi Bike Vision's value proposition and defined its key features. These steps were essential in shaping a clear direction for the AR feature and informed the design of the information architecture.
Establishing structure & hierarchy
Information Architecture
I then developed a clear and organized information architecture for Citi Bike Vision, mapping out all its content, including the three key features and additional elements.
Framework to functional layouts
Mid-Fidelity Wireframes
With the information architecture in place, I began creating mid-fidelity wireframes to bring Citi Bike Vision’s structure and features to life. I researched Apple’s Vision Pro, Meta’s Quest and Orion glasses to understand their interaction models, design principles and AR capabilities, which informed the initial spatial UI layouts for Citi Bike Vision.
EVALUATION
Validating designs through user feedback
User Testing
Using the mid-fidelity wireframes for user testing, I conducted 30 minute in-depth interviews with 5 Citi Bike users in New York City. During the interviews, the 5 interviewees carefully listened to my proposed solution, analyzed wireframes, and gave me helpful feedback on both my designs and their user needs.
Tested with 5 Citi Bikers in NYC
User Interview Insights
After conducting user interviews, I analyzed the qualitative feedback and transformed it into quantifiable data to identify trends and patterns across participants. By categorizing responses and measuring the frequency of recurring themes, I was able to gain a clearer understanding of user needs, frustrations, and goals.
Most liked & disliked feature:
Overall, the participants' liked features revolve around convenience, safety and flexibility. The disliked features mostly involved things that could be too redundant, overly sensitive or disruptive in their biking experience.
Overall Key Insights
Using data to revise current designs
Design Refinements
From the five user interviews, I identified common themes and synthesized them into key overarching insights. These insights provided a deeper understanding of user needs and behaviors, serving as a foundation for improving the design. Leveraging these key learnings, I developed three targeted solutions to address user challenges and refine my designs.
BRANDING
Visual strategy
Branding Competitive Analysis
To ensure Citi Bike Vision’s design was both distinctive and competitive, I conducted a comprehensive branding analysis. This involved examining the typography, logo, imagery, and color palettes of leading brands within the bike sharing, navigation, and AR technology spaces. By analyzing how these companies visually communicate their values and engage their audiences, I identified opportunities to differentiate Citi Bike Vision while maintaining a cohesive connection to Citi Bike’s established identity.
Color
Typography
Logo
Imagery
Visual exploration
Stylescapes
Using insights gathered from the brand competitive analysis, I developed 3 stylescapes to explore Citi Bike Vision’s visual identity. These stylescapes combined key UI elements and design principles into cohesive visual frameworks. I decided to go with stylescape #3 because I believed that maintaining Citi Bike’s existing identity while modernizing it for an AR experience would create a seamless connection to the brand users already trust.
Stylescape #1
Stylescape #2
Stylescape #3
Final Designs
CONCLUSION
Reflections
What are my key learnings from this case study?
