The product:
The service is launched and consists of a bike repair platform that facilitates bike pick-up and bike drop-off services between users and repair shops. It is also a bike ecosystem that provides rental bikes and a bike repair subscription model.

Project duration:

Oktober 2021

The problem: 

A customer who orders without creating an account will be unable to see their orders under the 'My Orders' tab. This has caused some confusion for users.

Users contact the app provider directly rather than seeking assistance from repair stores when seeking information about repair-related questions. This binds up the customer service

Some areas like the current 'My Orders' tab had no UX designer until now. Some users state the site looks untrustworthy in its current form.

The goal:
There should be a functional and good repair service for cyclists that can meet their needs. 'My Orders' tab needs to be redesigned and tested to solve the stated problems

My role:

Generalist UX designer helping to develop
a bike service platform

Responsibilities:

User Research, Wireframing, Prototyping, Testing, Interviews & stakeholder consultation

User research summery

The first research data was collected from user complaints directly with customer support, review sites and by watching users interact in the monitoring tool Fullstory. Observing the issues listed earlier in the overview. Data shows that 93% of users were on mobile, ensuring mobile first design.

Live user testing tools for the current ‘Order details’ design were lacking. I redesign the functions from paper wireframes and digitally reworked them several times after feedback from other UX designers and had now tools for live user testing. The first user testing yielded no pain points, which does not mean its the best design possible. 

What is order status

Users could not find their order details. This was caused from orders being placed without needing to create an account. Which meant order was not accessible on the site itself for users afterwards and left many users confused

Unseen notification

The repair shops can send repair offers and revisions on earlier placed orders. 

These offers were hard for users to access whilst being of critical importance since it leaves the shop waiting for a user’s response.

Trusting the site

Site is in a MVP state.

Some functions like ‘My Order Details’ had no UX-designer involved.
Some users stated they would not dare place an order on the site in this state

Problem statement:

Sara is a busy city dwelling knowledge worker, needs to bike for work and picking up her children. Needs a bike repaired because she is unable to transport a bike in a broken state to a repairer

Persona

All design decisions should focus on solving user needs, thus I created a Persona that expresses user needs for the company by data gathered through interviews.

Room for improvements

• Element size to suit mobile

• Unify the design system

• Clearer groupings

• Align elements

• Stronger hierarchy

• Unify colors

• Remove brand color in text

• Copy can be slimmer

• Change link to a button

• Large ‘call to action’ so users see new repair shop conversations

• The design system from the overall site is now consistent with the new design here

• Information architecture is retained from the previous design, to not confuse revisiting users too much

• Order cards take up more space here since users won’t have many orders in their history, research shows order frequency is every 3-6 mth.

    Improvements

• Mobile friendly

• 1 Design System

• Clearer grouping

• Aligned elements

• Better Hierarchy 

• Consistent color

• Better buttons

• Finer copy

Button copy text should be understood in a vacuum.

Green top buttons are the primary & secondary buttons used on the overall site.

This fill green means Call For Action, whilst in the new mockup, it means toggle state. Meanings must be unified

Buttons are now in 3 different heights, reduce and unify button types as much as possible.

Resolved problems

• No more accidental green call to action header buttons

• Consistent button size 

• Button copy now
  reads in a “vacuum”

• Better hierarchy with
  darker address cards

• Return button added

Prototypes were used for user testing to gather data for refining the design before developer hand off, saving time and resources for the developers. The blue fill color was a success in user testing, telegraphing the need for users to reach the shop conversation screen.

Further minor UI changes were made to aid the user take in the screen information. For example, research shows icons with text in buttons are superior to having only text. This final version helped users read information faster than previous versions.

All font, element and component state color contrasts pass WCAG 2.1 web accessibility standards.

What I learned:

I learned to follow a previous design system, by
matching radiuses, shadows and shapes of elements.

Also gained great new insight and respect for what happens if a UX designer does not include all possible pages, states and effects to developers. This project has been a work from such a scenario

Impact: 

Test users state they would call the repair shop rather than the app provider for order status after the redesign. As was planned.

All order details info were easier to obtain now for test users. 

The new design makes the user more aware that they have a notification and how to access it

This reworked ‘Order Details’ view has not yet affected users’ first impressions. Because these screens can only be interacted with if they already are a customer. The design does not affect trust in the site as a whole until the rest of the site gains improvement in its UX-design

The shop side and driver side need an improved UX as well when interacting with customers. New conversation windows between customers and repair stores are needed next.