Everyway
Read time:
5 min
Client:
Academic Project
Industry:
Product Design / E-commerce
Start:
End:
Duration:
8 Weeks
Tools:
Figma, Figma Make, Auto Layout, Variables, Components
Everyway is a conceptual e-commerce platform designed to help individuals discover transportation accessories, navigation tools, and mobility equipment that support their unique needs. Built around the idea that mobility looks different for everyone, the platform brings together practical product discovery and a playful, approachable shopping experience.
I designed Everyway from the ground up, developing a comprehensive design system that connects typography, color, reusable components, and responsive layouts. Working systematically from foundational design decisions to high-fidelity screens, I explored how consistency and flexibility can support a cohesive digital experience. I then used Figma Make to transform the static designs into an interactive prototype, bringing the experience to life.
Starting point
Mobility is not a one-size-fits-all experience. Whether someone is navigating a new city, adapting their transportation routine, or looking for equipment that supports their independence, finding the right tools can involve navigating unfamiliar products and categories.
Everyway began with a design challenge: How might we create an e-commerce experience that makes discovering mobility solutions more intuitive, accessible, and engaging?
Rather than approaching mobility through a purely functional lens, I wanted to create a platform that celebrated movement and independence. My visual direction emphasized playful shapes, expressive colors, and approachable interactions while maintaining the clarity expected from an e-commerce experience.
To inform this direction, I examined two existing digital experiences: REI and Transit. Although they serve different purposes, each offered valuable insights into balancing usability with visual personality.
Competitive inspiration:
REI: Clear product categorization and practical filtering demonstrate how large product collections can remain approachable and easy to navigate.
Transit: Expressive colors, playful illustrations, and simplified navigation demonstrate how transportation-focused interfaces can feel engaging rather than overwhelming.
Problem solving
Building a cohesive design language
The central challenge was not simply designing an attractive storefront. It was creating a consistent visual and interaction system that could scale across multiple pages, components, and screen sizes.
I approached this challenge by building Everyway’s design system before developing its final interfaces. This allowed me to establish clear rules for typography, color, spacing, and component behavior rather than making isolated decisions for individual screens.
Typography and visual hierarchy
I began by developing a responsive typography system that established consistent relationships between headings, supporting text, labels, and body content. Using a modular type scale, I explored how hierarchy could remain recognizable across desktop and mobile interfaces.
This was particularly important for an e-commerce experience, where product names, prices, descriptions, and actions compete for attention. The typography system helped establish a predictable reading experience while supporting the brand’s expressive visual identity.
Color and visual consistency
Next, I established a semantic color system using Figma variables. Rather than assigning colors independently throughout the interface, I defined reusable values for backgrounds, text, surfaces, and interactive elements.
This approach allowed me to explore how the visual identity could remain consistent across different interface contexts and themes. It also reinforced the importance of considering contrast, hierarchy, and readability alongside aesthetics.
Reusable components
With these foundations established, I developed a library of reusable interface components, including navigation elements, buttons, product cards, filters, and interactive controls.
Each component was designed to support consistency while remaining flexible enough to accommodate different content and layouts. By using Auto Layout, component properties, and variables, I could make changes at the system level rather than updating individual screens.
Key design considerations:
Clarity: Establishing recognizable navigation patterns and visual hierarchy to reduce the effort required to explore products.
Flexibility: Creating reusable components that adapt to different content, layouts, and screen sizes.
Consistency: Using shared typography, color, and component rules to maintain a cohesive experience.
Accessibility: Considering readable typography, contrast, predictable interactions, and responsive behavior throughout the design process.
This system-first approach became the foundation for the entire Everyway experience.
Implementation
Translating a design system into a digital experience
With the design foundations established, I began assembling high-fidelity page templates that represented the platform’s primary shopping experiences.
Rather than treating each page as an independent design, I used the component library to establish consistent navigation, content organization, and interaction patterns across the website.
The resulting templates supported product discovery, browsing, and evaluation while reinforcing Everyway’s visual identity.
Responsive design
One of the most important parts of implementation was ensuring that the interface could adapt to different screen sizes without losing its hierarchy or functionality.
Using Figma Auto Layout, I explored how desktop compositions should reorganize for mobile rather than simply scale down.
For example, the desktop product details layout presented imagery and product information alongside one another. On mobile, these elements transitioned into a vertical arrangement, placing product information beneath the imagery to support a more natural reading and browsing experience.
Navigation, buttons, image galleries, and content containers were also designed to respond to changes in available space.
These decisions reinforced an important lesson: responsive design is not simply about accommodating smaller screens. It requires reconsidering how information is prioritized and experienced across different contexts.
From high-fidelity screens to an interactive prototype
After developing the final interfaces, I used Figma Make to translate the designs into an interactive prototype.
This introduced another layer to the design process. Rather than evaluating individual screens in isolation, I could explore how the experience functioned as a connected product.
The interactive prototype brought together navigation, page transitions, and shopping interactions, allowing me to better understand how the design system supported the overall user experience.
It also provided an opportunity to explore AI-assisted prototyping as part of my workflow, connecting traditional interface design with emerging tools for translating design intent into interactive experiences.
Key experiences designed:
Product discovery: A homepage and browsing experience that introduces mobility solutions through clear categories and approachable visuals.
Product listings: Consistent product cards and filtering patterns that support efficient exploration.
Product details: Responsive layouts that prioritize imagery, essential product information, and purchasing actions.
Navigation: Adaptable desktop and mobile navigation systems that maintain consistency across the experience.
Interactive prototyping: A connected experience developed with Figma Make to demonstrate how the individual interfaces function together.
Results
Designing beyond individual screens
Everyway resulted in a cohesive, responsive e-commerce concept supported by a reusable Figma design system and an interactive prototype.
While the project began as an exploration of mobility-focused e-commerce, its greatest value was the opportunity to design at the system level. Developing the experience from typography and color through components, templates, and high-fidelity screens strengthened my understanding of how foundational decisions influence an entire digital product.
Key outcomes:
Comprehensive design system: Established reusable typography, color, and component foundations to support consistency across the experience.
Responsive interface design: Developed desktop and mobile layouts that adapt content hierarchy, navigation, and interactions to different screen sizes.
Scalable component architecture: Created flexible interface elements that could be reused across multiple page templates.
AI-assisted prototyping: Used Figma Make to translate high-fidelity designs into an interactive experience.
Stronger systems thinking: Gained experience considering how individual design decisions influence the usability, consistency, and maintainability of a larger product.
Perhaps my biggest takeaway was learning to think about design as an interconnected system rather than a collection of finished screens.
A decision as small as defining a button’s spacing or establishing a typography scale can influence the consistency of an entire interface. By developing these foundations intentionally, I was able to focus more of my attention on how the overall experience came together.
Everyway represents my growing interest in designing digital products that balance thoughtful visual design, functional usability, and scalable systems. It also reflects my belief that accessibility and approachability should be considered throughout the design process, not added as an afterthought.
