Skip the small talk
Research
I started the design process by conducting some foundational research and establishing key personas that will help define the problem and project objectives.
Foundational research was conducted through competitive audit of 3 companies with both websites and apps and 1 with only a website.
Our Users
Based on our personas, we know that key user groups will include those cycling to save on their commute, and those purchasing for multiples, such as families and parents.
User Personas
Customer Journey Map
With this information, I began to define problems and objectives.
The Problem
Users need access to cost effective, convenient, and reliable transportation.
How might we connect users to affordable and reliable transportation with a simple-to-use app?
Objectives
01. Cost Effective
The app should prioritize effectively and continuously informing users of sales, promotions, and rewards while facilitating easy redemption.
02. Reliable
Users should be informed about what is going on through timely feedback and system visibility. The app should encouraged intentional actions and provide context about functionality.
03. Easy to Use
It should be accessible to all, use familiar navigation methods to complete, and prevent errors.
04. Efficient
Information required to use the app should be visible and easily retrievable, reducing users' cognitive load.
Keeping in mind the competitive analysis, customer journey maps, and objectives, I began to ideate key features of the value proposition.
After defining the value proposition, I started to ideate information architecture and create low fidelity wireframes and prototypes to test.
Information Architechture
The IA evolved over two phases to accommodate complex filtering needs. The mind map helped inform the final design.
Testing
Two iterations were tested through an unmoderated usability study, followed by a short system usability scale survey.
Success during the usability test were determined by documenting click paths, noting observations about how a function might be improved based on user feedback, documenting quotes, and assessing completion rates. Time on task and error rates were also observed.
The biggest pain points upon testing included finding a shop, refining results, and checking out.
Insights
Confusing Journey
All users struggled to find a shop from the home screen.
The low fidelity prototype lacked hierarchy, context and expected functionality, resulting in all users struggling to find a bike shop that sold adult bikes. Content irrelevant to the task was distracting and important actions like filters were overlooked. With this in mind, I emphasized the app’s main functions on the home screen of the high fidelity prototype, referencing scanning patterns and design principles.
Users were more successful in their tasks using the second prototype, but duplicative screens encountered when users didn’t follow the happy path ultimately caused confusion and unnecessary clicks.
On the results page, the ability to filter in two locations increased success, but also left users confused as each listed the same filters. The journey still felt cumbersome and some sought additional filters by category, such as “e-bikes” or “mountain bikes”. A solution could be adding the options to the filter menu, but might also increase time on task and lead to decision fatigue by showing too many options.
Industry Standards
Based on their previous experience, half of our users stated they wish they could have searched for adult bikes.
This pain point references both industry standards and user control heuristics. Users are familiar with conducting specified searches and the instant gratification searches and filters provide.
While filters appeared when the search was invoked, there is a long list of criteria users might search by and it will change based on their task. If users are shopping, they might want to search for a shop with mountain bikes; however, this information is not relevant to a search conducted by a user looking for a shop that offers maintenance. We know that our users are pressed for time and can tell that they are seeking more control during this process.
User Control
2 of 4 users thought the checkout happened too quickly.
While the original checkout flow included relevant order details, it lacked the ability to edit obviously.
Users expected a confirmation step even when using quick pay options, like Apple Pay or Google Pay, which our app lacked. This tells us that even when users are in a hurry, they are still intentional.
Low fidelity prototypes incorporated "add to cart" buttons on product cards, but all users still navigated to the PDP to add to cart. The icons were confusing and one user stated that especially with large purchases, they wanted to ensure they were adding the correct item to their cart by confirming details on the product page.
Map Interactions
2 out of 3 users tried to select map pins to orient themselves or find out more about stores.
This tells us again that users are referencing their past experiences and that pins are an important part of wayfinding when presented with maps.
Touch Targets
2 users accidentally selected an adjacent filter.
While this was an error in the prototype, it was a reminder to keep touch target size in mind so users are making intentional decisions and avoiding unnecessary errors.
The Solution
By re-visiting the information architecture, I considered a design that used a database model rather than the typical hierarchical shopping experience to arrive at the final designs.
Reliable
Building Trust with System State Visibility
Users stated during testing they liked to see confirmation of actions and alerts that inform them of changes. When using a new app, it can be hard for users to orient themselves causing frustration and increasing drop-off rates.
The final design incorporates progress bars, screen titles, confirmation dialogs, and interactive map pins to inform users along their journey. Overlay screens feature strategically blurred backgrounds to provide context that it is a second tier flow while suggested actions on blank state screens direct users to recover from errors.
Reliable
Intentionally Added Friction
We want to make sure our users always feel in control while using the app, especially when expensive purchases could be involved.
Adding an item to the cart can only be completed from a PDP for more informed purchasing.
Payment confirmation modals add friction to the checkout process to ensure users are taking action intentionally.
Search Stages
Reliable
Contextual Searching
Half of our users expressed interest in a search function, but initial designs lacked context and was intended for location only. Since users were relied on search for location and filtering, the search needed to be more contextual.
The blank state of the final search is pre-filled with functional data to helps inform users of the type of search criteria they can choose to refine.
Collapsable menus direct users to more accurate results and clearly indicate functionality. As users move forward in the search, selections are visible and editable in collapsed lists.
Contextual filters on results screens allow users to refine based on relevant criteria.
Cost Effective
Prioritizing Rewards
The main objective of the app is to connect users to affordable transportation, so rewards should be accessible from the main navigation. Users are immediately informed of their current and future status upon opening the app.
The rewards screen is segmented into logical groupings to help breakdown the information and convey where users are, what they can achieve, and what can be redeemed currently.
Discount and reward opportunities appear throughout all stages of the journey to ensure users receive the full benefits of the app. QR Codes and promotion codes allow rewards to be easily redeemed in-store or within the app.
Easy to Use
Catering to Different Users' Needs
By offering a flexible experience, we can cater to both new and experienced users, or users with specific accessibility needs.
A simplified view can be invoked from the home screen to focus on pertinent information only.
Favorite and Recent cards help regular users complete tasks more efficiently by easily accessing their trusted shops.
Easy to Use
Flexible Booking
Users can easily schedule annual or biannual recurring bookings and add them to their phone’s calendar from the confirmation screen.
Service and rental menus allow users to specify if they have rigid timelines, or are open to browsing shops that might otherwise be a close match.
Easy to Use
Segmented Search
All users struggled to accurately filter when actions were found in disjointed locations. Related actions needed to be unified in close proximity to communicate relationship. Accurate searches also require many keywords to satisfy all use cases. By switching the IA to a database model, all searches could be combined into one advanced search.
The search bar was moved to the home screen so users understand this is the starting point to many journeys.
Within one screen the search menu is unified and contextual with logical categories, allowing users to search based on their varying tasks. Shop is the default category as our users will likely be using this category most frequently.
Efficient
Suggested Searches
Users who are avid cyclists state that they already have tried and true bikes or shops at home, but they might use the app when traveling.
Within zero query location searches, users can select their current location or recently searched locations
Efficient
Informed Booking
Labels inform users of maintenance status on their logged bikes to remind them which bikes might need to be prioritized within the service booking flow.
Efficient
Reducing Cognitive Load for an Improved Checkout
Our users are busy and can’t always dedicate a lot of time to tasks, so helping them recall information alleviates stress.
Saved payment methods and quick-pay options can be utilized to help users checkout faster when needed.
Collapsable menus and confirmation screens allow for easy recall and navigation to correct any potential errors before processing payments.
Rewards can be easily applied during checkout or QR code in-store.
