Overview
Assignment: Perform a full case study, from user interviews to UI design, for a subject I’m passionate about: biking and better transportation. For a link to the working prototype or other questions, please contact me.
![Image of welcome screen for bici app mocked up on an iPhone](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/0edb8ebd-9148-4080-8f1a-b8f4e39c3b7f_rw_1920.png?h=fbdd465019254fe0137d61685508ef25)
Welcome screen mockup
Video of bici prototype in action
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/ffc51672-e202-401e-95ac-f60b85dd80cd_rw_1200.png?h=fb74162442757d5c687fd45c3a02051a)
So why bikes?
Well, first off, bikes are cool. But they’re also
Well, first off, bikes are cool. But they’re also
— good for the environment
— good for you
— and cheap! (compared to car ownership)
— good for you
— and cheap! (compared to car ownership)
![Decorative image of a bike leaning against a tree, text underneath the image that reads "bicicleta: Spanish for 'bicycle,'; bici: your new best bike app](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/0761b6b7-a4f4-457f-987c-d80b0ffa5c9b_rw_1920.png?h=847040dd95f5725706c476fc801e0c83)
My bike and app inspiration
So if they’re so great, why aren’t more people riding them?
My hypothesis:
— biking can feel unsafe, which doesn’t lead to the best incentive to go for a ride
— and if there is a way to make bikes safer, people who already are enthusiasts will feel bike even more
— and if there is a way to make bikes safer, people who already are enthusiasts will feel bike even more
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/21ab58fc-7740-483f-8075-119f406866b8_rw_1200.png?h=42cb3e74ada3feab5f8f75432a642d89)
The research
User interviews revealed some interesting findings. Bikers, by and large
— are big planners; biking takes preparation
— prefer to bike unless weather or time prevents them
— are super aware of their surroundings and take notice when something screws with their routes
— prefer to bike unless weather or time prevents them
— are super aware of their surroundings and take notice when something screws with their routes
*Thank you Alex, Evan, Cole, Anna, and Linda.
![Text of pull quotes from users](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/1ce53d80-d5e4-4075-8e49-473c76a21c54_rw_1920.png?h=dba01833ca3cb6999abd5974d13f2af5)
User interview snippets
This led to a change in my hypothesis. It became
— biking can be made safer with accurate routes that avoid biking-specific safety issues
— hopefully, feeling safer will lead to increased bicycle use
— hopefully, feeling safer will lead to increased bicycle use
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/b0811dc0-7bb1-47ac-a429-e53a39820742_rw_1200.png?h=6ef4792dfba960897228dd73b6afffd1)
Competitive analysis was performed and a persona created based on interviews and findings.
![](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/df88fa16-5733-4a3d-94cb-6b9698b0047e_rw_1920.png?h=789c1ac38e534106046bfc18cf974bc0)
Competitive analysis for bici
![](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/7ce55a1b-bb98-4099-abde-18662cdfdc3f_rw_1920.png?h=3d94e58f6a006d0cdb2306e9091bcc69)
User profile for bici
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/93356db6-2ed0-410d-a1f8-438d560ee16a_rw_1200.png?h=20ff1e1ea7dea05a51aaacb34cb3444a)
![](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/205585d3-9607-4e78-9976-0a5dc1e222ca_rw_1200.png?h=b458d52918308bc2810f891d25b4933a)
An initial user flow from early planning
The must-haves were few, but important:
— map — navigation to/from destination
— user can give route feedback (ease of use as well as safety)
— route stats/route diary
— simple health stats
— user can give route feedback (ease of use as well as safety)
— route stats/route diary
— simple health stats
Design updates
Initial wireframes were changed following usability testing because:
— overall flow made sense but
— my nav bar needed text to help make sense of the icons and
— some of those icons were misleading
— my nav bar needed text to help make sense of the icons and
— some of those icons were misleading
Solution: small tweaks to flow and improvements to icons and content strategy.
![](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/836f25d3-24e6-4817-b026-e05db5a62722_rw_1920.png?h=18913d941405a69c7d94ca290e110175)
An evolution from sketched lo-fi wireframes to the final prototype
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/a31e816c-bd46-4dd4-9103-f8b9af8d76a7_rw_1200.png?h=5d415f1f03bdee3d49b07f805d3e607a)
![Decorative image of an All-City bicycle that is similar in color to bici color palette](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/78742437-11b2-4fd8-8b21-d801e44b6e8b_rw_1920.png?h=0d58d15bfdb0274ec7ba046885a47bc2)
All-City bicycle
Branding
Inspired by the hometown heroes at All-City, the app color palette and typography is retro with a fun twist—just like biking.
Colors were chosen to maximize accessibility and legibility, while UI elements promote ease of use and few distractions so users can keep focus where it matters: on the road and enjoying the ride.
![Color palette blocks of bici app](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/a75e9dcd-356c-4639-853b-112f3f677152_rw_3840.png?h=8ad423c0429ccd940096ee11996ec000)
Color palette blocks
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/da67ade9-4ea6-45db-90f9-5512a1a577e7_rw_1200.png?h=0cccd160da22c2a63c6d9e629f4f6aeb)
![](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/6647b93b-ec72-476a-9057-af81d49e276f_rw_1920.png?h=d3a5d274c355f4f859d0aa7956de1f08)
Image of bici wireframes in Adobe XD
What's next?
The work is never done, and neither is the ride.
Planned improvements include
— more safety categories to choose from
— incentive for users to share feedback
— road previews with users who enable recording while they ride
— route filters for safety preferences, type of ride (commute, fun), time, and distance
— city officials feedback: email your reps directly if something is seriously unsafe or you have ideas for new bike paths
— incentive for users to share feedback
— road previews with users who enable recording while they ride
— route filters for safety preferences, type of ride (commute, fun), time, and distance
— city officials feedback: email your reps directly if something is seriously unsafe or you have ideas for new bike paths
![Final search screen example](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/af0526de-a659-44e2-aa87-76bfabbf00ef_rw_1920.png?h=69ccbbcf9bbc6733ef70e8e61b3c894b)
Final search screen example
![Final route screen example](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/09831fc1-eab5-42d2-9fde-bef6afbe1c36_rw_1920.png?h=5e64521fe2e35097140202c7707c3bb7)
Final route screen example
![Final arrival screen example](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/7c5e3fce-0f41-46b1-8735-ae6588e7e253_rw_1920.png?h=28d9dd5efe6b8c5e3edc2821881026c8)
Final arrival screen example
![Final feedback screen example](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/1bd8e86f-76d1-4e91-8cd3-93333c99b837_rw_1920.png?h=570e7d9363900912965145dc539de2de)