top of page

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

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

The-Tennessean-Hotel-Anthony-Ploof-Feature-Shot-Image-Credit-Moxley-Carmichael-1024x677.jp

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. 

Home.png
The user opens the website to the home screen
Overlay.png
The user then chooses which category of bikes they would like to browse from the "bike" tab on the home screen
bikes.png
Out of that category, the user can narrow down their choice
Selection.png
Once they choose their bike, they can browse the specifications and choose to add it to their cart
Cart overlay.png
A small pop-up window will display once they add it to their cart prompting the user to go to the checkout page
checkout.png
The user will begin their checkout process by filling in their email and address for shipping
shipping.png
payment.png
payment-1.png
payment-2.png
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

Starting the design

Paper wireframes

IMG_0800_edited.jpg
IMG_0801_edited.jpg
IMG_0802_edited.jpg
IMG_0803_edited.jpg

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

HomeHomeSc.png
checkout.png
payment.png
shipping.png
review.png

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.

Screen Shot 2022-04-21 at 3.10.37 PM.png

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

Refining the design

Mockups

Home.png
Cart overlay.png
Overlay.png
bikes.png
checkout.png
shipping.png
payment.png
payment-1.png
payment-2.png

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. 

StickerSheet.png

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.

Screen Shot 2022-04-21 at 4.03.40 PM.png

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

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

Thank You!

  • Instagram
  • LinkedIn
logo1.PNG
bottom of page