Project Overview
Overview:
Bike Florida is a website update and tour app design case study for a community bike organization based in Tampa, Florida.
The problem:
Currently, Bike Florida does not have an app to direct users who are participating in a bike tour, instead relying on pdfs and printed material. In addition, the current website is fairly lean and could use some updating and expansion to encourage volunteerism and promote their events.
The goals:
- Design an easy-to-use app for users planning to and participating in a bike tour while on the road.
- Update and expand upon the existing site using a cohesive design system to expand and solidify Bike Florida’s digital brand.
My role:
UX designer researching and designing the Bike Florida app from concept to design to high fidelity prototype, as well as researching and designing updates for the current website.
Responsibilities:
Conducting research, user interviews, paper and digital wireframes, low- and high-fidelity prototypes, usability studies, design iteration, and responsive design.
Understanding the User
User research \\ Personas \\ Problem statements \\ User journey maps
I conducted remote user interviews to understand the needs of Florida bike enthusiasts and tour riders. Experienced tour participants look to register for as many tours as possible throughout the year and need tools to make sign-up and planning easy. They are looking to access info and help easily from their phones while on the road.
New participants have lots of questions and want to feel that they know what to expect each step of the way. Most tour participants were dissatisfied with the use of print-outs and were eager to have tour info and maps easily accessible from their smartphones, before and during the tour.
In addition, the main website lacks much of the information interested riders and tour participants need to make informed decisions. The site requires some attention to structure information properly and completely.
User pain points
Personas & problem statements
Problem statement: Sophie is a new rider and first-time tour participant who needs to know all the details about the tour before the goes because she needs to know what to expect and feel confident that she can succeed.
Problem statement: Emily is an experienced tour participant who needs to see if she can increase the mileage on this tour because she wants to maximize her time on-bike as she prepares for a tour in Italy later this year.
User journey map
This user journey map illustrated possible pain points for Emily, and improvement opportunities for the app.
Initial Design
Site Map \\ Paper wireframes \\ Digital wireframes \\ Low-fidelity prototype \\ Usability studies
App Site Map
The app map strives to make the most important info easy to access.
Paper wireframes
Digital Wireframes
Mobile Tour App:
Desktop Website:
Low-fidelity App Prototype
This low-fidelity prototype allowed testers to move through the app to explore schedules, maps, active-rider screen, and more.
Usability Study Findings
I conducted two rounds of usability testing. Findings from the first helped clarify the journey from wireframes to low-fidelity prototype. These were the most pressing issues that the usability study revealed.
Revised Mockups
Below are 2 examples of pages that address the main findings of the usability study. The revised designs ensure that the home button is eye-catching and that maps featured not only a download button but a camera button to enable easy screen captures for users who might not be familiar with their smartphone’s capture tool.
The revised prototype address these issues, including the addition of download and image-capture buttons on maps. Access the revised prototype here
Revised Designs
App Designs \\ Mockups \\ Accessibility considerations \\ Refined designs \\ High-fidelity prototype
Mockups
Based on the usability findings, I created two design options for the client.
Design option 1:
Design option 2:
While both options address usability and structure equally, the client preferred the first design option featuring more photography. Access the high-fidelity prototype here.
Mockups: App view
Mockups: Website desktop view
Using the design system developed for the app, I redesigned and restructured the existing website, filling in missing information and retaining a consistent brand look and feel.
Mockups: Website mobile (Android) view
High-fidelity website prototypes
This high-fidelity prototype contains the same flow as the low-hi version, along with improvements made via user testing.
Access the desktop prototype here \\ Access the mobile prototype here
Accessibility considerations
Conclusions
Takeaways // Next Steps
Takeaways
Impact:
Users expressed that they would find the app extremely valuable while planning their tour and while on the tour. Stakeholders were also very excited about the amount of work that the app would save them in terms of creating printable documents and answering questions. Site revisions were also well received by both stakeholders and users.
What I learned:
For this audience, the use of bright colors and large buttons was of utmost importance due to the median age of the users as well as the common use case: biking on roadways and trails in bright daylight. It was interesting to learn how some users worked around being unfamiliar with all of the tech options available to them on their smartphones. Need finds a way!
Next Steps
The client has expressed interest in raising funds to have the app developed and in hiring me to complete the website revisions.
