back to top

Bicycle touring is a great way to discover a new place slowly and authentically. However, the high cost and lack of flexibility of guided bicycle tours often lead to disappointment.

An adventure traveler myself, I was elated to discover bicycle touring as a new way to see places. When I traveled to Hoi An, Vietnam, where guided bicycle tours are plenty, I found that the growing interest of DIY cycling tours is not met by a lack of resources.

As part of my research, I took many bicycle tours, experienced the pains and frustrations of guided tours first hand, as well as talked to many cyclists and tour company owners about their needs.

The result is a mobile-app-as-an-assistant to help travelers navigate new destinations on their own. The design goal was to offer a seamless and smooth experience from discovering points of interest to GPS navigation all the way throughout the trip.




User Research
User Experience Design
Interaction Design
User Interface Design
Usability Testing


4 Weeks

STEP 1 – Problem Discovery

Exploratory Design Research

User experience research holds the key to discovering the real problem. To deeply understand target users, I conducted 4 types of generative research: contextual inquiry, user interviews, user survey, and competitive research.I also asked around on cycling tour forums to find out how DIY cycling tour is being done with the tools they have.

Research Synthesis

By the end of exploratory research, I ended up with large volumes of raw quantitative and qualitative data. To synthesize data for insight, I used thematic analysis to find patterns in qualitative data. Using affinity diagraming, I was able to group disparate data by Goals, Tasks, Tools used, and Pain points.

The user journey map – featuring target Persona Danny’s typical cycling journey–is the culmination of user research. The journey map gives us a bird’s eye view of Jonny’s highs and lows, presenting us with many design opportunities as outlined in the map.

User Flow Shorthand

A goal-oriented design methodology centered around how users will use the design to complete a task from start to finish. In this User Flow inspired by Ryan Singer’s UI Flows Shorthand, I mapped out the screen to screen flow focused on a singular use case scenario.

Product Requirements Document

A product without a vision is a sinking ship. The product requirements document answers the big “WHY” of the product–why build it and what differences will it make. It also outlines the feature development roadmap in line with the core product vision.

Step 2 – Requirements Gathering

Feature Matrix

Coming up with a list of required features is one thing, prioritizing them is another. Using Feature Matrix, I highlighted what products features are important and easy to build, and which ones are less important and more complex to implement, so that the product roadmap will prioritize the right features first.

Step 3 – Design Solution

Rapid Prototyping with Wireframes

With the Feature Matrix and User Flow in mind, I moved on to prototyping the solution. Without investing too much time on design details such as color and typography, I was able to use this prototype on real users to test out the interaction and flow. After a few quick tests and design iterations, I’m ready to add real content and design details to this low-fidelity prototype.

Step 3 – Design Solution

High-Fidelity Interface Design

Building on top of previous stages, this stage of User Interface design is about using real content to turn the prototype into a usable and desirable product. This stage involves branding design, color, and typeface as well as interactive UI patterns.

Step 4 – Test & Iterate

Usability Testing With Interactive Prototype

Design is never done. It is especially true if you are constantly testing your designs for improvements. For Bike Tour Buddy, I created a high-fidelity interactive prototype and tested it out on several real users, including cyclists and travelers.

These tests allow me to observe even the most minute level of user frustration so that I can improve the design to remove frictions. After a few design iterations, I ended this phase with an improved prototype that is intuitive to learn and easy to use.

onboarding flow
FInd a tour flow
Go on tour flow
explore sights flow
sights animation

Next Case Study

Can technology make grocery shopping enjoyable? Next up you will read about how user-centric design process can leverage research data, and generate design solutions that satisfy complex shopper needs.