Project Overview
The Product:
A responsive desktop website of an online bicycle store that allows for customization and purchasing top of the line bicycles.
The Problem:
Purchasing a bicycle can be overwhelming when there are so many options to choose from and websites don't allow for customization the user may need. Users need straight forward options with the ability to customize the bicycle if they decide to.
My Role:
-
Lead UX Designer
The Goal:
The goal of this project was to create an application for users to quickly and efficiently purchase tickets for upcoming shows they want to go to, while also sharing their experience with others. The tickets they purchased will be saved in the Igloo application so they can quickly pull it up when entering the venue.
Understanding the user
User research
Conducting research played a massive role in giving us the information we needed to form the personas we created. Those we interviewed were individuals who purchased bicycles in the past and were looking to purchase a bicycle again in the next 3-5 years.
Because of the global pandemic, research suggests that more and more customers are more likely to shop online rather than in person. This finding helped us to design a website that would allow a customer to have a similar experience as they would in an actual bicycle shop.
Pain points
Product: User want to have the capability of purchasing all the products they need in one place.
Process: Having a website that is easy to use with a seamless user flow keeps the user coming back to the website.
Process: Having a website that is easy to use with a seamless user flow keeps the user coming back to the website.
Persona

Goals:
-
Order parts to build a custom bicycle
-
Have an email sent to him fo when the parts are delivered and the status of the package
-
Can't be sure if the parts will fit his bike
-
Can't filter through the big selection of parts
Stephen Lee
Age: 45
Education: Culinary School
Hometown: Charlottesville, VA
Family: Wife, 5 children
Occupation: Executive Chef
Problem Statement:
Stephen Lees is an executive chef who needs a bicycle shop website to purchase pants to easily make a custom bicycle because he works 7 days a week and has no time or desire to go to a bike shop.
"I love everything that has to do with music, I just wish I could buy tickets from the palm of my hand."
Frustrations:
User journey map
The thought process behind the user journey map came from researching similar websites and combining different journeys to create the ideal flow. We would begin the process from the home page and follow the websites established journey map to gain perspective on what can be kept and what can be changed for our website.

The user opens the website to the home screen

The user then chooses which category of bikes they would like to browse from the "bike" tab on the home screen

Out of that category, the user can narrow down their choice

Once they choose their bike, they can browse the specifications and choose to add it to their cart

A small pop-up window will display once they add it to their cart prompting the user to go to the checkout page

The user will begin their checkout process by filling in their email and address for shipping




The user can then choose which type of shipping they prefer; standard or express
The user then will fill out their payment information using their credit card information and billing information
Finally, the user will review that all the information they provided is correct before confirming their order
Once confirmed, the user is thanked for their purchase and is given the option to continue browsing
Starting the design
Paper wireframes




Through user testing and research, we realized that familiarity is important to users when browsing, so we decided to keep the same elements that would be found on similar e-commerce websites.
Digital wireframes





Our digital wireframe gave us the basic foundations for what we wanted the website to look like. For the home page, we decided to present a product on the page that would catch the users eye and give them a teaser of what to expect when exploring the rest of the products. For the checkout process, we kept the pages similar enough to allow for the user to know they're still within the checkout process.
Low-fidelity prototype
To model our low-fidelity prototype, we used our wireframes. The main user flow of the site is centered around the browsing of bicycles, selecting a bicycle, adding it to the cart, filling in payment information, adding a shipping address, selecting shipping preference, and then reviewing the order that leads to the confirmation page.

Usability study findings
Round 1 Findings:
Doesn't want to be overwhelmed with options
Round 2 Findings:
User wants to be notified of package delivery
Needs a clear user flow
Refining the design
Mockups









For the mockups, we kept a simple three color palette that went along with the logo for "Bicicleta". Attached below is the sticker sheet we developed in order to keep consistency across the website and allowed for us to keep the typography and button size the same if we needed to put the project down and come back to at a later time.

High-fidelity prototype
The final high-fidelity prototype presented the complete user flow from browsing bicycles to reaching the confirmation page. The icons and buttons we added allows for the user to know how to advance forward through the pages.

Accessibility considerations
Consideration of the color palette choice and contrast of colors as well as the legibility of the font played a huge role in making our website accessible
Accessibility was considered through the images of the bicycles laid against a background that gives contrast to the product allowing users to see more detail in the product they are choosing
Accessibility was considered through the spacing of the icons and typography
Going forward
Takeaways
Impact:
The Bicicleta website keeps a modern look while keeping the user in mind. The flow of the website keeps customers coming back with its ease of usability. Bicicleta allows users to browse completed bicycles, parts, apparel, and more with the ability to filter for the perfect bicycle you're looking for.
What I learned:
Through the process of making a full responsive website, I learned that keeping the user in mind with each decision is very important. Creating a product is not just making a page look pretty, but making minute choices that lay the foundation for the larger picture.
What I'd do differently:
After completing the first designs, I would go back to make sure I was incorporating all the needs of the user, from being notified to when their package is delivered, to creating a feature for the user to browse parts that would fit their bicycle.
Next steps
Conduct more usability studies to always keep the users needs in mind when using the Bicicleta website
Continually update products that can be sold on the website with corresponding images and text