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.



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



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.



Task Flow 1 – Search & Save




Task Flow 2 – Compare from Saved