Creating a feature integration within an existing iOS app
Allowing riders in NYC to use the popular bikeshare app beyond point-to-point trips by discovering wellness and recreational activities to cycle to.
Citi Bike in New York City is the US’s largest bike share program, with over 27,000 bikes and over 1,700 stations. Members typically use Citi Bike to get from A to B, with access to classic and electric bikes.
Powered by Lyft, Citi Bike serves close to 2 million people throughout Manhattan, Brooklyn, Queens, The Bronx, Jersey City, and Hoboken.
- Role:
- Project Manager, UX/UI Designer
- Duration:
- 3 weeks (team-based) + 3 weeks (Pivot part 2 - solo-based)
- Tools:
- Figma, Slack, Shaker, Notion, Zoom, Voice Memos app. (*Chat GPT used in certain instances to assist in synthesizing research material.)
- Methods:
- Competitive + Comparative Analysis, User Research, Affinity Mapping, User Interviews, Problem Statement, Feature Prioritization/MoSCoW chart, User Persona, User Flow, Sketching, Low-fi, mid-fi and Hi-fi Prototyping, Usability Testing.
The Challenge
Rather than starting with a company, we started with a gap: we found the fitness and wellness app space is full of tracking tools, but few make movement feel social. Our hypothesis was that people want a social space built around shared fitness goals, not just solo tracking.
To test that, we ran a competitive analysis on apps like Strava and Apple Fitness to see how they handle goals, motivation, and gamification, and where users hit friction. From there, we looked for the right host — starting local rather than national with an existing user base, but with room to build on top of it, unlike already built out apps. Citi Bike fit as its a a widely-used local platform with space to add a social, goal-driven layer.
Improving Citi Bike’s Value Proposition
Expanding the stakeholder pool
(Event organizers, small businesses, non-profits, community partners)
Growing ridership & connections
(More users + more miles + more ways to meet people)
A happier, healthier NYC
Early on, our team discerned that Citi Bike already had the rider base and physical infrastructure to carry both sides of the equation: users looking for new reasons to ride, and organizations looking for a channel to reach them, via paid advertising opportunities.
The Research
Synthesizing Interviews
Incorporating Social Support for Individual Goals
User interviews and affinity mapping surfaced patterns in how people approach fitness and wellness, and where existing tools fall short:
“I definitely prefer a wellness routine where activities aren’t repeated too much. Having variety is nice.”
“I don’t want to lose my progress.”
“I would love to be able to find new workout partners because it’s currently difficult to do so in the city, especially as a new transplant.”
We saw an opportunity to build social features that reinforced existing individual motivation (like tracking progress and working toward a personal milestones) to make users personal goals easier to sustain with occasional social support within their app usage, like finding workout partners in a city this size.
Target Audience
Understanding the User
Jonah M.
31; Brooklyn, New York
Freelance Graphic Designer
Jonah loves switching up his fitness and wellness routines around the city, but struggles to stay motivated when sticking to any single one. He enjoys exercising with others but usually defaults to working out alone because finding partners in the city is harder than it should be.
What drives him: Variety, visible progress, and affordable options. He’s more engaged when activities feel casual and social rather than structured or competitive.
What frustrates him: Keeping a consistent routine week to week, the cost barrier to trying new things, and not knowing where to start when planning a wellness goal.
How might we help Jonah…
With this direction, we initially scoped a broad feature set to test our assumptions across four motivation types:
Discover
Discover nearby events to rsvp and ride to directly from within the app
Meet
Chat with other like-minded locals to meet up with at events, and even ride along with them
Track
Track progress and achievements through earning personal badges
Earn
Earn and claim rewards tied to local business through riding progress and achievements
The Design - Version 1
We moved forward with prototyping to test our assumptions; the user flow below was mapped out prior to building the first version of the feature set. It was ambitious, covering every possible interaction path across all four components.
The full experience was prototyped across all four features, building out over 20 hi-fi screens covering the complete user flow. Users could browse nearby events on a map, tap into event details to see attendees and earnable badges, and message other riders attending the same activity.
Below are three screens that capture the breadth of what we built:
We tested the hi-fi prototype with five users across five metrics. Results were mostly positive at the screen level where individual interactions worked where users could navigate the flow and complete tasks.
| Metric | User 1 | User 2 | User 3 | User 4 | User 5 | Mid-fi avg | Hi-fi avg |
|---|---|---|---|---|---|---|---|
| Time on taskRSVP, Message, Add Badge | 3:10 | 4:27 | 3:41 | 8:17 | 3:02 | 4:50 | 4:40▲ |
| Ease of use | 4/5 | 5/5 | 4/5 | 4/5 | 5/5 | 3.75 | 4.5▲ |
| Excitement | 3/5 | 5/5 | 2/5 | 3/5 | 5/5 | 4 | 3.6▼ |
| Unobtrusiveness | 5/5 | 5/5 | 5/5 | 5/5 | 5/5 | 3.25 | 5▲ |
| Retention | 4/5 | 5/5 | 5/5 | 4/5 | 4/5 | 4.25 | 4.4▲ |
The Pivot: A Narrower Focus + UI Update
The team’s work ended here. While the individual screens tested well, I realized after some time that the system as a whole was too complex to integrate into an existing product without adding friction for users—especially in the early phases of testing and concept validation studies. I then decided to refine the integration further.
I took the findings forward solo and defined the MVP. Instead of a multi-feature wellness + social integration, the real opportunity was giving users a single, clear reason to open Citi Bike beyond an A-to-B commute.
Broad feature ecosystem
- Discover
- Meet
- Track
- Earn
Focused activities hub
The stakeholder vision carried forward—still building toward expanding partnerships and growing ridership—but through a more focused execution. Users can also meet others at the events themselves if they wish. I restructured the user flow to reflect how users would naturally interact with the feature inside the app.
The Design - Version 2
The redesigned integration is a focused activities hub within the existing Citi Bike app, which includes an updated UI of the existing app. Users are able to discover nearby activities and events, RSVP, and ride there.
Color Palette & Typography
I pulled the color palette directly from Citi Bike's current standalone app and applied it across the integration, ensuring every element matches the visual language users already expect from the product. All color pairings tested against WCAG contrast standards for accessibility compliance.
The prototype uses the Inter Display typeface with different weights.
Palette
- #0B0B30PrimaryText, headings, CTA buttons
- #1142AEInteractiveLinks, tappable text
- #54536ESubtextCaptions, descriptions
- #343444Station (chosen)Selected status bars
- #3568FFStation (default)Unselected status bars
- #083186Bike iconMap pin icons
- #EAE9F3InactiveUnselected buttons
- #F4F3F8SurfaceCards, containers
- #FFFFFFBackgroundPage background
Contrast & accessibility
Primary on white
Headings, body text, CTA buttons
19.01:1 AAA
Primary on surface
Text on cards
17.22:1 AAA
Primary on inactive
Text on unselected buttons
15.79:1 AAA
Interactive on white
Links, tappable text
8.70:1 AAA
Interactive on surface
Links on cards
7.88:1 AAA
Subtext on white
Captions, descriptions
7.40:1 AAA
Subtext on surface
Captions on cards
6.70:1 AA
White on primary
CTA button labels
19.01:1 AAA
White on station chosen
Selected map pin text
12.20:1 AAA
White on station default
Map pin numbers
4.59:1 AA
White on bike icon
Icon contrast
11.71:1 AAA
Reflection & Next Steps
The biggest lesson was knowing when to cut. The first designs tested well at the screen level, but asking users to navigate four new features inside a simple app seemed to add complexity without matching how people actually use the current app. One focused behavior turned out to be the stronger design decision.
Next steps would include:
- Validating the concept through a demand study — A crucial part of this stage would be to survey prospective and existing Citi Bike riders to measure actual interest in activity discovery before investing in full development. The usability testing confirmed people can use the feature, but hasn't yet confirmed they would seek it out on their own.
- A second round of usability testing on the full flow of RSVPing and riding to an activity.
- If successful, working with Citi Bike to formalize listings via a two-source data model: 1) Partnering with organizations (like FitHouse Tribeca, Glow Studio, CoreSpace FiDi) to reach riders through paid placement, and 2) Aggregating public data for free events and activities that don't require formal partnerships.