Overview
Goal: Redesign a responsive website & online bike design tool for Villy Custom
Role: UX & UI Designer, User Researcher
Tools: Pen/Pencil & Paper, Figma, Photoshop
Process: Research → Define → Ideate → Design → Test
Background
Villy Custom, established in 2010, provides fully customized (in colors range, not technical) cruiser bikes. They started doing business locally in Dallas. Now they are in customers’ reach nationwide.
Orders are collected via their website, to the customer they send ready to assemble bikes. Assembly can be done in the closest customer’s bike shop and pick up by the customer from there.
They need a well thought out responsive website that makes designing and ordering bikes seamless, allow users to make safe purchase and shows the company as trustworthy and reliable.
Note: This project was completed as part of the Design Lab’s UX Academy course.
Research
Competitive Analysis and Market Research
User Interviews
I haven't had any experience of buying a bike online, so first I had to think about what is most important in that kind of transaction. I set up several goals for my research study:
Understand the pain points for customers when they make an online purchase: big size/expensive and customized things
What customers need to feel the online purchase of a bike is safe
Recognize how users would like to see an online tool for bike design
Analyze competitors to find areas for improvement and areas where Villy Custom can differentiate itself from other
I created the whole Research Plan to outline how I would conduct the research step by step.
Competitive Analysis
I started with Competitive Analysis. I found several online bike shops that sell custom bikes and analyzed their pages.
I decided to create a strength-weakness matrix to gather ideas for sorting information and ideas, and where and how they could be improved. My scope was mainly limited to the bike design process, but I also analyzed competitor’s additional features and overall information architecture on pages.
User Interviews
Informed by my secondary research, I developed a list of questions and an interview guide to structure my contextual inquiry.
I interviewed 7 participants between the ages of 19 - 39. What I wanted to get out was to empathize with, why and how users are shopping online, what information they are looking for before making a big size/expensive product purchase. I wanted to understand also why they are looking for custom offers for products, along with what pains and gains they have when doing this. I also attempted to uncover what kind of details are the most important for them to be able to make a decision about buying bikes, what they are afraid of while doing that online.
All my questions had to be thoughtful and touch things I wanted to check.
Interview’s questions and script are available for your review.
General Findings (Insights)
7//7 participants like to shop online (time savings, company/products review, a wider range of choice)
5/7 participants buy big-size/expensive products online
6/7 participants check product reviews and other regulations (delivery method, warranty policy, return options) before they do a transaction
4/7 participants like to buy custom things and look for such an offer. They need to see visualization of product first
4/7 participants would not buy a bike online - they need chat with specialist about bike’s technical specification, they need to try size and try if bike is comfortable. They would concern how to assemble bike, too.
Participants’ PAINS
Lack of possibilities to see how the product looks, if it is comfortable, if the size fits
How to assemble a bike by yourself
Difficulties with returning big-size products
Difficulties with returning custom things
Participants’ GAINS
Visualizing how your colors look on the bike
A lot of comments/reviews about product/company
Easy access to warranty rules
Having a bike in colors you like
Comparing competitors’ offers
Participants’ NEEDS & WANTS (Key Insights)
Transparency in product descriptions and a lot of product/ company reviews
Transparency with warranty rules, return options and delivery method
Be sure they are buying right size bike
Be able to see how their final product looks like
Possibility to try different configurations, compare options
Know how to assemble bike, know technical specification
Users want to differentiate among people
Define
Persona
Empathy Map
POV & HMW
Site Map
Interaction design - user flow
Persona
The needs of the primary user persona that came from my research proved some of my assumptions. Katia wants to differentiate among people and she wants to spend her money in a safe and wise way.
Empathy Map
Having my persona defined, I used my research findings to create an empathy map. The empathy map helped me further to understand my users and be able to create a page where they can find there everything what they are looking for.
POV & HMW
Based on all the data gathered during the primary and secondary research, I took all insights and needs and translated them into Point of View Statements, then from those, crafted How Might We questions for each one:
Users want to check product/ company reviews…
How might we help user to check company/products reviews
Users want to have an easy access to all required regulations/polices…
How might we help users in easy way to find information they are looking for
Users need help with proper bike size finding…
How might we help them to find proper bike size
Users need easy tool to design their bike
How might we design an intuitive bike design tool
Users need to see different colors configurations on their bike…
How might we let them compare their different bike designs
Site Map
I started out by creating a sitemap. I wanted to organize the site in a way that was concise and user-friendly and where users from the very beginning could feel that the transaction they intend to make is safe.
Interaction design
User Flow
With my sitemap in place, I moved towards the prototyping process. I created a user flow for the bike design process to show how intuitive the design tool will be, and to show the core function of the page. It helped me to think through each step and make sure the pages flowed in a smooth manner.
Ideate
Sketches
Wireframes
Sketches
Before creating digital wireframes, I decided to do brainstorming and I drew initial sketches of the pages I need to create as per project requirements.
Wireframes
Working on wireframing I not only wanted to make sure I was following UX best practices, but also some design patterns specific for bike shops and online design tool. In addition, I made it a point to design in accordance with my research findings.
Some solutions and features to the potential user needs were:
Simple navigation across all pages which allowed easy wayfinding for high demand information (delivery method, warranty policy, return policy)
Quick access to design tool to easily start to create a custom bike
Matrix of questions which helps find the proper bike size
Intuitive and easy to navigate design tool with visualization of the custom bike
Possibility to compare different bike designs
Company’s reviews
Design
UI design and branding - Style Tile
High Fidelity Screens Design
Style Tile
I decided to keep LOGO unchanged as it is strongly connected with company history and in my opinion is quite unique.
For the rest style tile's elements, my goal was to choose typography, color palette, and some imagery that will match company LOGO and also will allow to underline that company is trustworthy and solid and cooperation with the company will be safe, straightforward and easy.
When it comes to colors - I knew that a lot of colors on the website would come from bikes pictures, so my color palette had to be gentle on the eyes, easy to read, and not overwhelm the users.
Choosing fonts, I wanted to have something which brings an association with bikes. Maccos seemed for me like bike trace left on the trail. As body text, I decided to go with San Serif and have chosen a very gentle one -Josefin Sans.
High Fidelity Screens
Before I went with hi-fi screens I decided to do quick user test on my wireframes. I have prepared prototype and made a test with 2 participants. With feedback on this, again I made verification according users expectations and made some several important changes:
Changed the idea for hero picture on Mainpage
I decided to get rid of the hero picture on Contact us page
Changed sections' layout on About us page
Removed page Size results
Added progress bar for bike design process
All the hi-fi screens in detail are available for your review.
Usability Study
Prototype
User testing
Affinity Map
Next Steps
Prototype
For prototype purposes, I created:
many additional screens with different colors of bike configurations (to show how the bike design tool works. It took a lot of my own testing to get everything to work well with the bike design tool, but I was happy with the final result.
screens for checkout flow (based on the checkout layouts on checkout.com and bolt.com )
I built the prototype using Figma.
User testing
I have prepared Usability test plan with the test objectives, methodology, script and list of tasks.
The tasks for this project were very straightforward:
Task 1: Use the company website to get the contact details of the company
Task 2: Find proper bike frame type and size
Task 3: Design bike using online design tool (use certain colors for particular bike parts) and add a bike to cart and finish the purchase.
Affinity Map
I tested the prototype with four participants (male and female, between ages 20 - 40) and received some useful feedback. All results are in below Affinity Map.
Next Steps
Design and test revisions
Build out and test other necessary pages
Hand off to developers for implementation
Summarize
Looking back on this project, this was an excellent exercise in listening to what the customers really needed, and what would help them simplify the pains they have with purchase custom bikes online. Initially, I thought the users would be most interested in a tool that could help them visualize their design, but turned out not less important for them is to have easy and quick access to all regulations, policies, instructions customers must follow.
Designlab’s project requirements set About us and Contact us pages as must-have. In hindsight, I think would be better to design some other pages to show how easy will be to get the most demanded information potential user might looking for.
In this project, I made a number of iterations on the high fidelity designs. From the combination of feedback from my mentor and gradually realizing more and more ways to improve my designs I reached out the final result.
That was good exercise to extend my comfort zone as an UX and UI designer. I am most proud of the transformation from the original, very messy site to a product that is user friendly and helps to build the company's image as reliable and safe.