HOPS DESIGN SYSTEM
Visual/UX/UI Design + Design System
OVERVIEW
Hops is a native mobile wayfinding app. Hops is seeking to organize its information architecture through the use of atomic design using Figma. Elements, molecules, and organisms must be captured correctly so that this design system can thrive through future development.
​
2022
ROLE
Visual/UX/UI Designer
Content strategy
UX/UI design
Prototyping
Information architecture
Design system
Quality assurance
Accessibility audit
UNDERSTANDING THE PROBLEM
An audit with successful apps like Waze and Google Maps assisted me with understanding areas of opportunity for a wayfinding app. I found some value added in:
-
Simplifying the UX/UI design for various modes of transportation
-
Creating user-friendly interactions
-
Focusing on an atomic design system for a better foundation for future use
TOOLS
-
Adobe Illustrator
-
Balsamiq
-
Figma
-
Kontrast (Accessibility tool)
DEFINING THE MVP
I identified our key user journey:
-
Focus on creating a clean atomic design system
-
Input "from" and "to" points for the commute and travel time
-
Map with multiple options for the route depending on form of transportation
-
Ability to choose preferred routes
RESULTS AND TAKEAWAY
-
Organizing individual elements from the start of the design phase are crucial
-
Taking the time to create proper information architecture, hierarchy, naming conventions, and grouping like items together are worth the investment
-
Proper naming conventions are crucial for smooth development
-
Using a tool like Figma is powerful and great for collaborative work across multifunctional teams
