Design process.
Eugenia Basti
UX designer
Roar bikes
A solution for an e-commerce website | mobile version.
Client: Self-developed project.
Role: Entire product design from research to definition, visualization, and testing
Project time: 3 months
Tools: Adobe XD, Photoshop, Illustrator, Let'sView, sceenrec.
Try out my interactive prototype!
This interactive prototype is created for a specific flow. Would you like to try it out? Use the following steps:
Select the bike model Sphynx
Check the bike characteristics
Add it to the basket
Customize the bike
Frame color: mustard
Rims: white
Handlebar: Speed
Grips and saddle: both honey leather
Go to order
Check the basket details
Change shipping destination to The Netherlands
Check out
Sign in
Chose priority shipping
Pay with the saved VISA card
Complete payment
Leave feedback
#1 The case
For this case study, the client is Roar Bikes, a manufacturer of small run located in Spain, with contemporary bicycles sold exclusively from his own website. Roar Bikes currently have 3 models of bikes to purchase Siamese, Sphynx, Bengal. I chose to focus on the mobile version of the website.
#2.0 Research
In order to understand in-depth the product I was to design as well as the behaviors, pain points, and goals of the users, I had to conduct research. The research methods I used were the following:
competitive benchmarking in similar bike equipment websites [mobile version]
usability testing on two similar bike equipment websites [mobile version]
Competitive benchmarking.
#2.1 Research | Competitive benchmarking
For the competitive benchmarking I chose to analyze 3 relevant websites in mobile version:
The main points of focus for the competitive benchmarking were the primary navigation menu, the home page, and all the screen states from the category page until the payment.
This was a process that affected widely the overall strategy as I navigated thoroughly through all the steps of the purchasing process. I analyzed the conventions regarding the customizing process and I pointed out which areas were poorly designed and could be improved.
While navigating the apps I kept in mind the target audience and how they could be affected negatively or positively by the different features. I kept screenshots from all the high-level steps and I composed a document with the screenshots and numbered comments divided into negative and positive comments.
#2.2 Research | Moderated usability testing
Emphasizing the user, I decided that observing the user interact with the mobile version of two of the above websites, would give me more qualitative data and useful insights about the mental model of the user.
Task: The user had to search and select a bike model and navigate his way through customization to the basket and the paying process.
The websites that were tested were:
The scenario of the last time the user purchased online sports equipment.
The user searched in google the product.
He checked the reviews and comments about the product
He checked a few websites with similar product/price to see which one has no shipping costs
The user avoids creating an account in order to avoid being spammed with emails and offers.
The user creates an account only if he orders products regularly from the website.
User context
Occupation: Software developer
Lives in Amsterdam
The user does not use apps to order sports equipment, he visits the website from a desktop.
He avoids completing the purchase from mobile because he feels he does not have a good overview/control.
During the test, the user was asked to share his thoughts about the two different websites and to verbalize what was unclear, where he was not sure how to proceed and in general all the pain points he bumped into, using the apps.
Outcomes
After reviewing carefully the usability test video, I summarized the finding into the following categories of goals, mental models, behaviors, and pain points.
Usability test outcomes.
User persona.
#3 User persona
The goal is to provide an interface that is user-centered design. To achieve that, I had to understand well my users and see the experience from their perspective. I created the persona profile and used this tool as a compass, to represent the user's needs.
I used the quantitative and qualitative data I collected from the competitive benchmarking, and the usability test, to define the persona.
More specifically, I focused on the user goals, design goals, and the scenario of the last time the user purchased sports equipment online.
#4 Customer journey map
In order to understand better the customizing and purchasing process, I formed the customer journey map. This step helped me visualize the pain points, behaviors, mental models, and goals of the users at each step of the process. I categorized the interactions into 8 high-level steps:
Awareness [ need to buy a bike]
Select the bike category
Compare bikes
Select and customize bikes
Selecting accessories
Basket
Payment methods / details
Payment confirmation
I defined on a scale of 5, how the user feels at each high-level step, based on the comments of the users and their goals, behaviors, and pain points.
Customer journey map.
#5 Information architecture
Based on the insight gained from all the research I created the information architecture diagram for the specific flow of customizing and purchasing a bike. I defined what actions should be taken in which screen states in order to make the next steps easier.
I structured the screens in a way that is logical and matches the mental model of the users. In addition, I made sure that each screen focuses on one main action, that is highly prioritized to help the user identify the action he/she is required to take. In this step, I also made sure that the structure of this product had to be forthcoming and save steps where possible.
Information architecture.
#6 Wireframe sketches
After having digested all the data gathered, and with the Information Architecture as a leading structure, I moved forward to sketching the main screen states. This is the way I prefer to visualize the first screen states as I believe is the fastest and more intuitive way to share my ideas.
It took me five attempts to define the screens. After the first version, I went through the customer journey map and the user persona profile. I had to make sure all the pain points of the users were resolved, all the design goals were achieved, and that my product was matching the users' mental model. So I started over again and again until I was satisfied with the result. By adding annotations I made sure that even the information of what happens when a button is pressed or a checkbox is taped was included.
I decided to display the bike models on the home page as the number was only limited to three. On the product page, in order to avoid a cluttered screen, I chose to display all the characteristics of the product as collapsible. Also, I realized that in order to make customization intuitive there should be a visualization for every adjustment the user would make. So, on the customization page, I reserved the bottom part of the screen to always display the original model of the bike that would change according to the options the user would choose.
Wireframe sketches.
Interactive prototype [Adobe XD].
#7 Prototyping
Having defined the sketchy wireframes, I created a low-fidelity prototype for testing purposes.
I used the Adobe XD to create the hole flow from the home page to the payment confirmation page. It was an essential step to define the screens as I received precious insights from the usability testing process.
#8 Moderated usability testing
In total, I made five testing rounds, each time improving the structure of the screens, adjusting the hierarchy of the elements, and making the flow more clear.
All five of the participants were matching the target group characteristics. It was really essential to start testing the low fidelity prototype as it had enough information to receive feedback on the flow, the hierarchy, the affordance of the different control inputs, and in general to see where the design didn't match the users' mental model.
By facilitating the usability testing so early in the design phase I made sure that the users would not get distracted or influenced by the content and the UI but they would focus on completing the tasks successfully.
I used LetsView to mirror the mobile screen to the desktop screen and Screenrec to record the session.
Findings from the usability test.
Colors and text test fit.
#9 UI Design
Once I solved successfully all the issues that were revealed during the usability testing, I started designing the final screens in Adobe XD.
Color palette
I went for a fresh and light visual style. I chose to check the primary and secondary colors in Material Color Tool for suitable user interface and accessibility.
Text
Regarding readability, I made sure that the contrast ratio for titles and body text meets the WCAG AAA criteria.
Design system.
#10 Design System
In order to make the project less complex, I decided to set up a design system. In this way, I had a unified set of rules that I could follow.
I started by defining my components. That includes:
Input controls [data fields, buttons text fields, dropdown lists, selection controls]
Navigation components [ header, footer, breadcrumbs, search fields, icons]
Information components [tooltips, icons]
Color palette
Fonts
I also defined how the elements appeared disabled/enabled and where applied in case of error or empty field that is required.
In this way, if the project would evolve to include more flows and features, the additional elements could follow the design system for a more uniform and consistent outcome.
11
Iterations
37
Screens
5
usability tests
User flow.
11# What I learned
Misconceptions about the user flow
It took seven low fidelity prototypes and five usability tests to simplify the steps of customization. I discovered after every usability test that there was more room for improvement, more information I could take out, and more steps to simplify. To make the process more intuitive I had to include only the absolutely necessary elements. In the end, the first low fidelity prototype with the final one had little in common. It is important when something is not going the direction you want to let it go and approach from a different perspective than keep going the wrong direction.
Looking back to the whole process I realized I should have spent more time in the sketchy wireframes. I had spent more time defining the information that should be included in every screen, it would have taken fewer versions of low fidelity prototyping to define the final result. But on the other hand, testing the low-fidelity prototype is what gave me the correct direction to improve the content. So the balance must be found between those two steps.
UI Design
So far in my projects, I chose to focus more on the research and the users' experience part. This is what fascinates me the most. Gathering the data, analyzing them, and creating solutions for the problems revealed through testing. But devoting time to produce a good UI can upgrade a really good product into exceptional.
Not being familiar with this part I realized in the end that it is better first to check how the color contrasts and texts work together in a small sample. In this case, I would be more flexible to create a few variations of different colors and fonts to see how the combinations look like and if they have good contrast for good accessibility.
What is next
As the next step of this project, I would first sketch the screes of the accessories page. It is a flow I chose not to include in this case study as I wanted to focus mainly on the customization of the bikes. Then I would follow the same process as for the rest case study [low fidelity prototype, usability testing, high fidelity prototype]. Thanks to the design system there is already a base for all the elements.
The next step would be to create a desktop version of the website.
Finally, when having completed also the flow of purchasing accessories, and the desktop version of the website, I would create detailed wireframes for developers. This is a necessary step to communicate all the rules that define the interactions that take place.