
GearUp App Design
Interaction Design Studio | August 2022
GearUp is a mobile application that allows users to buy, sell, and compare second-hand outdoor gear.
The scope of this app design is limited to the screens visited in the two task flows outlined below. However, the design system considers scalability — implying how additional pages would appear, should the same navigational techniques, shape language, and aesthetic style be applied.
Visual elements appear natural & inviting, yet refined & intentional. Interactive features facilitate use and consider accessibility.
The scope of this app design is limited to the screens visited in the two task flows outlined below. However, the design system considers scalability — implying how additional pages would appear, should the same navigational techniques, shape language, and aesthetic style be applied.
Visual elements appear natural & inviting, yet refined & intentional. Interactive features facilitate use and consider accessibility.
RESEARCH & GROUNDING
Ideal Flows
Task 1 – Find a pair of women’s Merrell hiking boots, size 8
Task 2 – Compare an Eddie Bauer Pack with an Osprey Pack
Task 2 – Compare an Eddie Bauer Pack with an Osprey Pack


User Testing Flows
User 1
![]()
![]()


User 2
![]()

Existing Information Architecture

DEFINING USER TYPES
GearUp’s content design speaks to both ends of the spectrum, when it comes to user familiarity with the outdoors.


PROTOTYPING
Paper Wireframe


Refined Digital Wireframe
![]()
VISUAL AESTHETIC PROCESS
Style Direction 1
MoodBoard

Rationale

Style Guide

Style Frames

Style Direction 2
Mood Board

Rationale

Style Guide

Style Frames

Final Style Guide & Visual Aesthetic
Successful & relevant aspects of the above style directions were refined and built upon to arrive at a most-appropriate visual aesthetic. The below design system was fomulated accordingly, and helps establish a clear visual hierarchy, connect visual flows among related items, and optimize layout across different pages.

FINAL SCREEN MOCKUPS
A routine online shopper myself, I recognize the consumer struggle to remember features, specs, and purchase details of all items in consideration, while bouncing between various site tabs.
GearUp facilitates this process by allowing users to not only search for gear and save individual listings (Task Flow 1), but compare product details in a sliding, side-by-side layout (Task Flow 2) directly from his or her Saved listings.