Projects
FRAME X FRAME - Mobile Web
CASE STUDY | PROTOTYPE
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
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
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.
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.
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.
Preliminary Sketches
Sketched User Flow
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.
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.
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.
Find Your Ride questionnaire
Checkout- Shipping Estimate
'Compare' tool
'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.
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.
‘Start Over’ replaced ‘Take Quiz Again’ to eliminate confusion over the intention of the
‘Find Your Ride’ experience.
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.
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.
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.
.png)