E-Commerce Site Creation

Pedal Cycling Clothing

Reasonably-Priced, High-Quality Cycling Clothing

Project Information

  • My Role: UX/UI Designer

  • Team: DesignLab UX Academy

  • Tools Utilized: Figma, Canva, Miro, Optimal Workshop, Survey Maker, Whimsical, and Google Docs

  • Skills Utilized: User Research, Competitive Analysis, User/Task Flows, User Persona, Empathy Mapping, Site Map, Wireframing, Usability Testing, and Prototyping

  • Duration: Six 40-Hour Weeks

Why Cycling Clothing?

Pedal was my first independent project at DesignLab UX Academy, so I chose to concentrate on something I love - cycling!

I’m a road and mountain biker, and I like high-quality cycling clothing. It’s very difficult and time-consuming to find reasonably-priced clothing. Shopping online is difficult, regardless of the type of clothing. My intent is to provide an online, reasonably-priced, high-quality choice for cyclists.

Problem

  • Pedal’s current website is very insufficient and outdated

  • Customers have made it clear they want the convenience of shopping online

Goals

  • Determine the ingredients that current customers have valued about Pedal and other brick-and-mortar stores, and replicate as many of those items as possible

  • Ascertain if there are other things that can be implemented that can improve the user experience.

Me! :)

Competitive Analysis

Because I’m a cyclist, I was already familiar with whom Pedal’s competitors would be, but I was curious to find out what their strengths and weaknesses are. So I researched the information for a Competitive Analysis.

My research showed that all the competitors:

  • Sell outdoor clothing

  • Have online presences

  • Have strong brand recognition

  • Sell quality products

  • Have knowledgeable staff members

  • Have relatively reasonable prices

Conversely, some of the competitors’ weaknesses are:

  • Lack of product choices

  • Limited sale prices

  • Two competitors don’t have physical locations

User Survey

Common Themes

In order to better understand the information regarding the target market, I conducted 11 user surveys, via Survey Maker, and compiled the results via Miro.

  • Ages were between 30 - 56

  • Shop online for cycling clothing weekly

  • 52% shop online for cycling clothing

  • 82% utilize their smartphones for online shopping

  • 73% most often ride mountain bikes, and 45% most often ride road bikes

User Pain Points

  • Have difficulty with sizing when purchasing online

  • Dislike the inconvenience of shopping in-store

  • Do not like paying unreasonable prices

Opportunities

There is a wide-open space for an online retailer that sells reasonably-priced, high-quality clothing that users feel confident will fit.

Empathy Map

As a Product Designer, it’s imperative for me to understand with the users. So, from the results of the user survey, I compiled an Empathy Map to synthesize, fully understand, and empathize with the target market.

User Persona

From the user research gathered, I compiled what the persona of a typical Pedal user might be.

Pedal users tend to love the outdoors, especially cycling. Most users are mountain bikers, with a smaller percentage that enjoy road cycling, as well. Pedal users prefer purchasing cycling clothing online, but have also been frustrated with the process in the past. Users are typically very familiar with cycling clothing brands, have a strong preference for convenience, value, quality, and variety.

Key Research Findings

  • When shopping online, users value the convenience, variety, options, low prices, efficiency, and lack of crowds

  • Conversely, things users dislike about shopping online are difficulty to return, inability to try clothes on and see quality, inaccuracy between what was shown online and what was received, can be time-consuming, and website/app poorly designed

  • Additionally, the things the interviewees like about shopping at on-site locations are the ability to try on and touch, can see actual colors and quality, helpful staff, interaction with staff and customers

  • Conversely, when shopping at an on-site location, users dislike crowds, wasted time, expensive items, limited choices, and rude staff

Sitemap

To better understand how a user might interact with the site, I created a sitemap, via Miro, to show the relationship between content on the site.

I wanted to ensure all the pertinent types of clothing, shoes and accessories were included, as well as the option to choose the particular sport for clothing.

A Little Sketchy

I sketched low-fidelity versions of the homepage, that I felt would be viable options.

It is important for the site to include clear descriptions of the products, as well as images with models wearing the clothing, so users are able to see how the products fit.

User Flow

Since this was the first design I worked on from end-to-end, I wanted to visualize a user’s potential path, via a User Flow. The User Flow signifies a user arriving to the Pedal site, via an Instagram ad.

The user chooses men’s, clothing, then jerseys & tops filters. The site then gives the option to filter based on size or cost, and asks the user if they’d like to add to cart, view cart, and checkout, or continue shopping. At which point the user chooses women’s, clothing, shorts, skirts, & bibs, as well as being given additional filtering and cart options.

Task Flow

Using Whimsical, I created the Task and User Flows. It’s very interesting to think about the different paths the user may take.

Low-Fidelity Wireframes

I wanted to ensure there are many images, so users are able to accurately visualize how the clothing will look.

From the user research, I was able to determine the top brands users would like to see available, so I made sure these brands were listed.

Additionally, I made sure to capture that mountain and road cycling clothing were the primary offerings, since they were most popular with the users.

Responsive Wireframes

From the low-fidelity wireframes, I used Figma to create responsive wireframes in desktop, tablet, and cell phone sizes.

Since users primarily utilize cell phones, it’s very important that all the pertinent information is clearly represented and included on mobile.

Brand Ideation

It was really fun to ideate the color palette, headers, icons, logo, and typography for the Pedal brand. I also designed the logo.

Because cycling is typically an outdoor activity, I wanted the colors to reflect nature’s beauty.

Initial Prototype

  • Homepage

  • Products Offered

  • Filtered Items

  • Specific Filtered Item

  • View Cart & Checkout

  • Shopping Cart

  • Checkout

  • Order Summary

  • Order Confirmation

Usability Test

I planned and conducted In-Person Usability Testing with three people. My test objectives were to:

1) Determine if users are able to search for and find the items specified in their instructions

2) Gather information for items I need to improve (users’ pain points), and

3) See what the users like about the design.

I conducted three in-person usability tests. The interviewees’ demographics were:

  • Male, 31 years-old, Product Designer

  • Female, 30-years-old, UX/UI Designer

  • Male, 56-years-old, Human Resources VP

The users’ prompt was to locate and purchase the Women’s Pearl Izumi “Race Like a Girl” Interval Jersey., size Large.

Affinity Map

Once I received user feedback from Usability Testing, I compiled the results, via Miro. The users had some very useful feedback for the design, namely:

1) The images are pixelated

2) Users would like the option to filter options, rather than scroll

3) Unclear CTA

4) Do not like the Hero image, as it’s too busy

Responsive Revision Prototype

Based upon the users’ feedback from Usability Testing, I updated the design to include the above shown suggestions, as well as the below:

  • Updated the second screen to simply be an overlay, rather than an entire screen

  • Changed some areas from buttons to touchable link areas

  • Updated the option to search for items by brand, rather than having to look through the individual cards

  • Re-designed the Brand page, so the brand names are more prevalent, and the image is smaller

  • Updated the Homepage colors to reflect users’ color preferences

  • Desktop Homepage

  • Women's Options Overlay

  • Women's Filtered Items

  • Jerseys and Tops Overlay

  • Choose Size

  • View Cart and Checkout

  • Shopping Cart

  • Checkout - No Info Entered

  • Checkout - Info Entered

  • Order Summary

  • Order Confirmation

Please check out the final prototype below

Key Insights & Reflection

  • Once I updated the design with the suggestions the users had, I again asked them to test it; they all said there was a significant improvement in the aesthetics, as well as usability.

  • All users mentioned they would like the ability to pursue other options within the site, but I explained the design doesn’t yet have that added capability.

  • Considering this was my first end-to-end design and the fast pace with which we learned the new information, tools, etc., in the future, I look forward to taking a bit more time in the process.

  • I plan to also begin editing the design from proper responsiveness, as I definitely have a lot of learning yet to do in that area.

Previous

Grondel Therapy
Next

UTA GoRide Redesign