top of page
Fulton.1.png
FULTON logo.png

UI/UX CASE STUDY

FULTON

Project Overview

Fulton is a wellness startup specializing in insoles, which provides accessible and sustainable arch support designed for individual comfort and proactive alignment.

PROGRAMS USED / 

Adobe XD, Illustrator, Photoshop

 

ROLE / 

UI/UX Designer, Design Lead

 

TEAM / 

Jerry Q, Chuck B, Shelagh B

 

DATE / 

June to July, 2021

FultonInsoles.png
Designer's Role

 

Our team of three comprises two UI/UX designers, me and Chuck, and one UX designer, Shelagh.

​

As the one with the most extensive design experience within our team of three, I took on a leadership role that encompasses communication with stakeholders, design direction, scheduling, time-tracking, and prioritization of tasks. I helped conduct interviews in the first round of usability testing, ran the heuristics evaluation and accessibility audit, worked on the sitemap, user flows, and helped write most of the reports. I was the assistant designer for the wireframes, the design lead for the high-fidelity prototype, and the design lead for all interactions.

The Problem

Fulton seeks to improve the overall experience of their current website by finding the most effective ways to educate their customers about the product’s value and increase sales.

The Solution

To begin working on a solution, we needed to pinpoint the cause of the problem. To do so, we requested analytics information from the stakeholders and then conducted a heuristics evaluation and an accessibility audit on Fulton’s current site.

Because their mobile website had both the most traffic and the highest bounce rate, we decided to redesign the Fulton website from the ground up mobile-first.

Scope of Work

Usability Heuristics Evaluation + Accessibility Audit
to assess the current website and uncover usability and accessibility issues.

 

1 Round of Usability Testing

of existing website to understand pain points on both mobile and desktop.

​

User Personas + User Stories + Sitemap + User Flows + Sketches

to aid the redesign.

 

1 Round of Guerrilla Usability Testing
with low-fidelity wireframes.


1 Round of Usability Testing
with a high fidelity prototype to test the redesign.

Usability Heuristic Evaluation

Goal:
Uncover usability and accessibility issues affecting the mobile and desktop sites.
 

Method:
Individual analysis using Jakob Nielsen’s 10 Heuristics Principles for User Interface Design and Accessibility audit.
 

Result:
Report listing 16 violations and recommendations for improvement.

Summary

Most of the violations had to do with lack of information hierarchy, deviation from interface design industry standards, and excessive cognitive load.

​

Read the full report here >

Usability Testing

Goal:
Uncover usability issues affecting user task flows and product education.
 

Method:
30-minute remote usability testing using mobile or desktop sites.

Summary

This first round of user testing enabled us to pinpoint several specific areas of improvement. Although interviews were conducted remotely, an additional teammate reviewed each session to take notes and help synthesize the information—a lot of user feedback aligned with the results from our heuristics evaluation. Through testing the current site, we better understand how the existing website focuses and accomplishes its goals. We recruited all the test subjects from our network.

 

Read the full report here >

Participants:
Recruited from our networks

Report Author:
Jerry Q., Chuck B.

Testing Conducted By:
Jerry Q., Chuck B.

Usability Testing
How Might We
  • More quickly and easily inform the user about the product and its benefits

  • Re-organize the overall information architecture so that the website displays all of the important information closer to the product.

Affinity Map

To begin organizing the information architecture, we sorted user quotes and feedback into a Miro affinity map. Product information had the highest hierarchy at the top level - this was the information essential for the e-commerce website to function as intended. The second level had information about sizing, pricing, and discounts - information in this level aids the success of the top level. The third level had user impressions, where users experienced information overload and any confusion with site navigation. The last group had ideas that would be
beneficial to the website if implemented. 

Fulton - Affinity Map.jpg
Affinty Map
Sitemap

The most cluttered part of Fulton’s website was the home page, which doubled as the Shop page; it housed the FAQ, contact information, explanation of the physiological science behind alignment, user reviews, press publications, and information about arch support. The design priority was to shorten the overall length of the home page.


To tackle this challenge, everybody on our team split up to ideate possible solutions, then met up again to create the most logical sitemap. We planned to use iconography to reduce cognitive load and inserted webpages only accessible from the home page but do not appear in the navigation menu.

Fulton - Revised Sitemap (Wireframe).jpg
Sitemap
User Flows

The ‘Red Route’ is the most critical task performed by users. The website cannot function without it. ‘Normal Routes’ are secondary tasks that are important but not critical.

Fulton - User Flow (Red Route) - Make a Purchase.jpg
Fulton - User Flow (Normal Route) - See Photos.jpg
Fulton - User Flow (Normal Route) - Read Articles.jpg
Fulton - User Flow (Normal Route) - Read Reviews .jpg
Sketches

Once we finalized the sitemap, we split up to visualize possible screens and layouts on paper. On the next day, we ran a critique on each other’s designs and combined our favorite elements into this ‘Frankenstein’ of a sketch.

Lo-Fi Sketches.png
Low Fidelity Wireframes

After another designer on our team drew up low-fidelity screens based on our collective sketch, I created simple interactions and linked the screens into a clickable prototype in preparation for our second round of usability testing.

​

Interactive wireframes here >

Wireframe.JPG
Guerrilla Usability Testing

Goal:
Test the low-fidelity redesign of the website.
 

Method:
30-minute remote guerrilla testing using the mobile prototype.

Summary

After conducting usability testing on Fulton’s existing website, our team has developed a wireframe prototype, proposing a site-wide redesign guided by findings from our usability testing. During this guerilla usability testing session, we tested out the red routes of our prototype on 5 participants recruited from our network to see if the design was informative, functional, and intuitive to use.

Participants:
Recruited from our networks

Report Author:
Jerry Q., Shelagh B.

Testing Conducted By:
Shelagh B.

General Feedback

Overall, users were able to comprehend the standard features of the product quickly and easily, finding the wireframes to be information-rich but still quite scannable. Every user validated the functionality and usefulness of the “Buy Insoles” call to action button that floats with them as they scroll, and they found the shop flow to be intuitive and straightforward. However, we found that the reviews page and some content on the home page and navigation can improve in the next prototype.

 

Read the full report here >

Style Guide - About Fulton

The Brand

Fulton is a wellness startup specializing in sustainable custom insoles. We provide easy, sustainable arch support designed for individual comfort and proactive alignment.

 

The Vision

We envision a world where integrating supportive footwear is essential for everyone's whole body wellness.

​

The Mission

We're on a mission to empower people to take control of their alignment from the ground up.

 

The Product
The material makeup of our insoles consists of cork, which adapts to the shape of each person's feet after 10 hours of wear.

Style Guide - Logo

Mobile: Header

Group 4340.png

Mobile: Footer

Group 4342.png

Wed: Header & Footer

Group 4341.png
Style Guide - Color

Fulton’s Brand Guide had five colors as their ‘brand colors’ but had no hierarchy over each other, which resulted in a lack of contrast and low accessibility in their current website. I incorporated their brand colors into a broader color palette that categorized color used by text, backgrounds, icons, accents, and the disabled state.

Fulton Brand Guide: Brand Colors

Capture.PNG

Redesign: Style Guide

Color pallete.png
Prototype Usability Testing

Goal:
Test the high-fidelity prototype of the website on mobile.
 

Method:
30-minute remote usability testing using the mobile prototype.

Summary

After conducting guerilla usability testing on initial wireframes for the redesign, our team developed a high-fidelity mobile prototype which we then ran a final round of usability testing. During this usability testing session, we tested out the red routes of our hi-fi prototype on 5 participants recruited from our network to see if the design was informative, functional, and intuitive to use.

Participants:
Recruited from our networks

Report Author:
Jerry Q., Chuck B., Shelagh B.

Testing Conducted By:
Shelagh B., Chuck B.

General Feedback

Overall, users could comprehend the product’s features quickly and easily, finding the homepage to be information-rich yet easy to scan because of the interspersed illustration and visually indicated sections. The shopping flow stood out as being very intuitive and straightforward in terms of user interaction. Additionally, users liked the interactive rotating model of the insole, they found the side-by-side comparison chart helpful, and they liked the concept of a diagnostic tool. However, we found room for improvement with the “buy” button design, and specific areas of content and copy could elevate to represent the product better.

 

Read the full report here >

User Flows
Sketches
Low-Fi Wireframes
Guerrilla Testing
Style Guide
Style Guide - Typography

Favorit is Fulton's brand font. Helvetica Neue is used where Favorit is not available.

​

Favorit
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ? ! % & ? ()


Favorit Bold
Favorit Regular
Favorit Light


Helvetica Neue
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ? ! % & ? ()


Neue Helvetica Bold
Neue Helvetica Medium
Neue Helvetica Roman
Neue Helvetica Light

Style Guide - Iconography
Iconography.png
Style Guide - UI Elements
UI Elements.png
High Fidelity Design

Fulton had spent many resources on the product rotation feature for their current website, so I tried to incorporate a similar feature using their product photography. Unfortunately, due to the limitations of prototyping in XD, I could not create a realistic drag-to-rotate interaction, so the product rotation is click enabled as a placeholder.

​

Below the rotating insole, infographics introduce users to the concepts of Alignment and Arch Support. The following section explains the sustainable composition of the insole layer-by-layer. A button below two featured testimonials leads to the Reviews page, followed by a comparison chart showing users a snapshot of the advantages of Fulton’s insoles. Last but not least is a simple diagnostic tool for users to determine if Fulton’s insoles will be beneficial.

​

Interactive hi-fi prototype here >

Hi-Fi.PNG
Hi-Fi Prototype
High Fidelity Design - Desktop

In recent years, “mobile-first design” has become the industry standard for designing websites. The phrase “mobile-first” refers to the design practice where we start the product design from the mobile end, which has more restrictions, so we will prioritize features to seize the key points of the product.

Then we would expand and strengthen these features to create a tablet or desktop version.

 

Due to time restraints, we were not able to complete the entire desktop site.
Below are the key screens and a limited interactive prototype.

​

Interactive hi-fi prototype here >

Hi-Fi2.PNG
Prototype Testing
Insights & Next Steps

The project with Fulton was an enriching experience. It taught me how to plan for a project, coordinate with stakeholders, lead a small team, and effectively choose design methods because we were limited to forty hours each for the entire project.
 

Every social interaction throughout the project -from acquainting my teammates to convincing the stakeholders via Zoom meetings- was a real experience that will likely repeat in a work setting soon. So it was good practice!
 

If there were more time, I would’ve liked to conduct user screeners and interviews before the usability testing of Fulton’s current site. Doing so would’ve provided me Fulton’s target userbase familiar with orthotics instead of random people we pulled from our networks to interview. Further exploration of prototyping tools may enable us to implement drag-to-rotate successfully in our prototype for accurate user testing. Moreover, additional time would allow for possible A/B testing between the product rotation and the new vs. used insole slider, which piqued the curiosity of Fulton’s co-founders.

Insights & Next Steps
bottom of page