top of page

Projects

FRAME X FRAME - Mobile Web

CASE STUDY | PROTOTYPE

FRAME x FRAME project header, person riding a bike down a quiet forest road

A global pandemic is sitting heavy on everyone’s shoulders. Daily life is greatly affected, and everyone is missing all the little things that made our lives feel normal. Walking into a store and choosing a product based on the way it fits and feels may not be an option for some- businesses are recognizing this and doing their best to come up with solutions to keep their customers happy and confident in their products. 

 

Many companies are switching gears and becoming entirely dependant on online sales- but how can they create the same sense of comfort and confidence in an online experience that their customers felt in their

in-store environment?

THE PROBLEM

Research has shown that a majority of FRAME X FRAME shoppers do not complete their online bike purchases; cart abandonment is the most prominent issue that the eCommerce site faces.

How might we encourage shoppers to feel confident in completing their bike purchase?

THE SOLUTION

Survey results found that the majority of users do not feel confident in their knowledge of bikes, which prevents them from purchasing online. 

I created several ‘Help’ resources to instill confidence in the shopper to select the correct bike for their purposes, and to complete their purchase. 

MY ROLE

While a project brief was provided with the problem space, and preliminary research was provided, I created the brand identity and the complete UI design from 

start to finish. 

 

SOLO DESIGN BUILD

UX RESEARCH | USABILITY TESTING

BRANDING | UI DESIGN

illustrative heading that reads Research

In the project brief, two statistics stood front and centre: 50% of shoppers leave the site after browsing a variety of sections, and 70% abandon their carts after selecting items to purchase.  If a shopper is taking the time to browse and even decide on items to purchase, what is 

stopping them from completing their transaction? 

The brief also provided information on what the average FRAME X FRAME shopper looks like: age 24-38, mostly men. High income earners that are avid cyclists, they like to do their research before making a purchase to ensure they’re spending their money wisely. 

 

I conducted a survey of ten cyclists to get a better, real-world idea of their habits when shopping online for bicycles. Of the 60% of particpants who have bought a bike in the last 3 years, 80% bought their bike in-person, with the majority citing that wanting to test-ride the bike prior to purchase was important. But why was this so important that the convenience of shopping online would be cast aside? Nearly all participants stated that they wanted to make sure the fit was correct.

“It's nice to get a feel of the bike and, being on the shorter side, I like to try it out first.  Also depending on the style, I would want to check out if the bars feel too narrow or too wide”

“The dynamics of the bike are important for a rider’s comfort. 

Are the hand bars too far away? 

How is the rider’s posture on the bike etc.”

​“My arms and legs are shorter than normal for my height!

So I need to make sure the proportions are comfortable”

Shoppers want an in-store experience so they can ensure the bike they take home is the right fit for them. So, how are other websites addressing this issue? I performed a heuristic evaluation on three eCommerce sites, taking myself through the selection/checkout process, paying close attention to the ‘help’ and sizing resources. The three sites I looked at were trekbikes.com, amazon.ca, and target.com.

TREK User flow starting at bike selection to purchase check-out
Target User flow starting at bike selection to purchase check-out
Amazon User flow starting at bike selection to purchase check-out

TREK User Flow

Target User Flow

Amazon User Flow

Both Trek and Amazon have a ‘Compare’ option to allow shoppers to select bikes and compare features. Aside from that resource, Trek has a ‘Chat’ function that connects to an agent to answer any questions a shopper may have. Trek also offers a size guide to their shoppers to aid in selecting the proper size. Both Amazon and Target require an account to checkout, while Trek offers a guest checkout experience.

As Trek is the only one of the three that is exclusively bikes and bike accessories, I put more weight in that analysis, and began forming my solution plans. 

My research showed that shoppers would appreciate a ’Compare’ tool prior to purchase, access to fool-proof fit guide, and, in an attempt to mimic the in-store experience, access to virtual consultations with biking experts.

illustrative heading that reads Ideation

The user flow for any shopping experience generally will look pretty similar, regardless of the product or site: home page, category page, product page, cart, checkout, confirmation. 

I created the user flow in Miro based on this trend, with the incorporation of the help resources determined by my research. The experience I was designing was relatively linear, creating one main red route: confidently selecting a product and completing a purchase.

Frame x Frame project user flow for bike selection to purchase check-out

With my primary flow in front of me, I could now easily see the steps my user would take, or could take, in choosing the perfect bike for themselves and their needs. 

 

Next, I went back to basics, got out the graph paper, and started laying out the sketches for my flow to prepare for my first round of usability testing. For my sketches, I began the process at the product page as I initially thought that this was more efficient than starting from the home page (spoiler: not a 100% accurate assumption, but more on that later). I laid out my sketches in a casual flow, and uploaded the files to Marvel App to 

build my first prototype.

Sketch on paper of bike selection to purchase check-out user flow, seven screens

Preliminary Sketches

Bike selection to purchase check-out user flow laid out with paper sketches

Sketched User Flow

illustrative heading that reads Design

The brand attributes provided in the project brief were noted as ‘savvy, focused, serious and dependable’, with the brand personality described as ‘an expert in the field who is always knowledgeable about the very latest trends and best products related to biking’. Keeping these words in mind, I developed the name ‘FRAME X FRAME’ (frame by frame), a name that refers to the ‘bones’ of a bicycle (the frame), but also draws inspiration from the memories biking can make, captured like snapshots in time- memories of friends, families, competitions or finding the beauty in a daily commute.  Each letter in the typeface of the logo, ’Neoneon’, incorporates a clean start and finish- reminiscent of a bike path or trail.

The primary colours of the high-contrast colour palette- Black (#000000) and White (#ffffff)- keep the interface clean, modern and easy to read. The secondary colour Lime Green (#00D900) adds a needed pop of colour while also drawing inpiration from the changing landscapes experienced while biking- both urban and rural.

FRAME x FRAME logo wordmark with colour palette of black, white and lime green

My HiFi designs followed the initial sketches closely. After an initial round of user testing, I discovered that it was important to start the shopper’s experience at the home page. Several of my test participants voiced the desire for some sort of questionnaire that would help point them in the right direction of appropriate bikes for their needs; naturally, this would most likely originate on the home page. I built the HiFi screens to near-completion in Sketch, and then finished the designs and prototyped in InVision Studio. As I did with my sketches, I assembled my HiFi screens into a casual flow in preparation for prototyping, and to see if any changes or edits were needed prior to my first round of testing.

Hi-Fi mockups of all screens needed for bike selection to purchase check-out

The additional help resources I incorporated into my build were a ‘Find Your Ride’ questionnaire, a ‘Compare’ option for similar bikes, a size guide, and the opportunity to either instantly be connected (or book for a later time/day) with a bike expert who can show the shopper how to properly measure themselves to ensure the perfect fit, and/or ask any questions they would normally feel comfortable asking during an in-store experience. In addition to the help resources, I also added a price transparency feature to the cart; users can enter their postal/ZIP code to have a shipping cost generated, allowing the shopper to have a better idea of their total purchase price earlier on in the checkout experience.

Hi-Fi mockups of initial 'find your ride' questionnaire

Find Your Ride questionnaire

Hi-Fi mockups of shopping cart UI, with shipping estimate calculator (postal code input)

Checkout- Shipping Estimate

Hi-Fi mockups of comparison tool to compare up to three different bikes and their features

'Compare' tool

Hi-Fi mockups of the 'sizing help' tool, with size guide option or video call with an expert option

'Sizing Help' options- Video Chat with in-store expert

My second round of testing (the first with my HiFi mockups) did not produce any critical errors, but there were a handful of usability improvements to be addressed.

For my second and final iteration round of my HiFi design, I made improvements to the home page, clarified the CTA on the ‘Compare’ screen, made sure wording was consistant (particularly for the ‘Find Your Ride’ questionnaire, and the option to ‘Take quiz again’- test feedback showed that it wasn’t made clear that the experience was a quiz), and also added user ratings/reviews to bikes in the ‘Compare’ results. 

Hi-Fi home screen iPhone mockup with first and second iteration comparison

Visabilty of the ‘Find Your Ride’ feature was improved by darkening the image to match the categories below, increasing the CTA and text size, changing the descriptor text to a heavier weight and adding a drop shadow. The ’All Bikes’ CTA was also updated to reflect the same style as the ‘Find Your Ride’ CTA for visual consistency and balance.

Hi-Fi questionnaire results iPhone mockup first and second iteration comparison

‘Start Over’ replaced ‘Take Quiz Again’ to eliminate confusion over the intention of the

‘Find Your Ride’ experience.

Hi-Fi compare selection iPhone mockup first and second iteration comparison

The ‘View Comparison’ CTA became a floating element to improve the clarity of the action. 

I also made the CTA inactive until selections are made, in an attempt to further clarify the area users are to interact with to generate the comparison results. 

Hi-Fi compare results iPhone mockup first and second iteration comparison

On the ‘Compare’ results screen, the alignment of elements was improved, as well as the addition of customer ratings/reviews to each item’s list.

Illustrative heading that reads Final Thoughts

I didn’t find incorporating the feedback from my test users into the final design to be overly challenging, as I (thankfully) did not experience any critical flaws with my first HiFi iteration. If I were to take this product further and ready it for public use, I would consider adding a ‘Chat’ help function, but for this product I wanted to keep options to a minimum, and focus moreso on how I could mimic, as best I could, an in-store experience. 

 

I definitely found my comfort zone with FRAME X FRAME. From the experience gained through my previous projects, I was able to move through the steps confidently and relatively quickly, without feeling like I was sacrificing the quality of my work. I feel that this project showcases my growth as a designer, and I’m very happy with the final version of the product that I have presented.

Explore the mobile

PROTOTYPE

Explore the mobile

PROTOTYPE

iPhone mockup with Frame x Frame logo, image of two cyclists on rural trail
bottom of page