• Skip to main content

JZiegler.com

online portfolio/hub

  • Work
    • UX Design Case Studies
      • Landline Research and Redesign Case Study
      • Bike Florida Web Design and App Design Case Study
      • Local Flavor App Design Case Study
      • NewNest Website Design Case Study
    • Lead UX Designer, The Landline Co
    • Design and Marketing Manager, CartoonStock
    • Director of Social Design, VestorLogic
    • Creative Manager, VEGAS.com
  • Resume
  • About
  • Contact

Bike Florida Web Design and App Design Case Study

Bike Florida

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:

  1. Design an easy-to-use app for users planning to and participating in a bike tour while on the road.
  2. 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

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.

Persona: Sophie
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.

Persona: Emily

User journey map

This user journey map illustrated possible pain points for Emily, and improvement opportunities for the app.

User Journey: Emily

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.

App Map

Paper wireframes

Paper WF

Paper WF

 

Digital Wireframes

Mobile Tour App:

Lo-fi App Wireframes

Desktop Website:

Low-fidelity site wireframes

 

Low-fidelity App Prototype

This low-fidelity prototype allowed testers to move through the app to explore schedules, maps, active-rider screen, and more.

App Prototype

 

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.

Usability

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.

Study 1

Study 2

The revised prototype address these issues, including the addition of download and image-capture buttons on maps. Access the revised prototype here

App Prototype

 

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:

App Mocks 1
Design option 2:

App Mocks 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

App Mocks

 

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.

Website Mocks

Mockups: Website mobile (Android) view

Mobile Mocks

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

Site prototype

Accessibility considerations

Accessibility

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.

conclusion

 

© 2023 JZiegler.com