top of page
Fulton_Cover2.24.png

UI/UX CASE STUDY

Fulton

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

After Effects

Google Docs

Miro

Trello

My Role /

Design Lead

Project Management
Task Delegation
User Interviews

Usability Testing

Heuristics & Accessibility
User Interface Design
Motion Design

Team / 

Jerry Qu, Chuck Bourg, Shelagh Bennett

Platforms / 

iOS

Date / 

June, 2021

Fulton_BG_3.png
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 Problem
Project Parameters
These four elements make up the most significant design criteria.
Heuristics
& Accessibility 
 

To assess the current website and uncover usability issues.

Promotion of Wellness
 

To empower users to improve their alignment.

Sustainability
 

Inform users of the product's eco-friendly materials.

Agile UX
 

Design of features built through team collaboration and customer feedback

Fulton_BG_1.png
Plan of Action
To begin working on a solution, we needed to pinpoint the cause of the problem. To do so, we gained access to Fulton's analytic information via Google Analytics and then conducted a heuristics evaluation and an accessibility audit on Fulton’s current site.
The mobile website had both the most traffic and the highest bounce rate.

So we decided to redesign the Fulton website from the ground up mobile-first.
How Might We . . .
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
Fulton_BG_3.png
Information Architecture
The most cluttered part of Fulton's original website was its home page, which doubled as its Shop page; it also housed the FAQ, Contact, Press, Reviews, and physiological science behind alignment. 

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.

We sorted user quotes feedback into an affinity map on Miro 
IA Design
UI Design
Fulton_BG_3.png
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
Fulton_BG_3.png
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 Chuck 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.
Fulton-Wireframes.png
Information
 

Rich but scannable.

CTAs
 

Intuitive and straightforward

Content
 

User reviews and navigation could improve.

Hi-Fi Design
Fulton_BG_3.png
High Fidelity Design
Fulton-Wireframes.gif
Colors
Brand Attributes: Nurturing | Sincere | Effortless | Caring
Pantone: 659C
#88B1E8 | RGB 123 164 219
Pantone: 7729C
#01483A | RGB 0 88 70
Pantone: 1575C
#FF7F32 | RGB 255 128 51
Pantone: 4755C
#DDCDBF | RGB 217 195 194
Musicare_BG6s.png
Animation
Fulton-180.gif
360 Product Visualization
Fulton-RedRoute.gif
Red Route: Make a Purchase
Fulton_BG_3.png
Iconography
Iconography.png
UI Elements
UI Elements.png
bottom of page