Role:
Product Designer
Team:
Solo project
Platform:
Mobile & Web
Duration:
12 weeks
Tools:
Photoshop, Figma
EquippedToGo is a cross-platform e-commerce app designed for both mobile and web created early in my design training to explore full-flow UI execution for a retail experience. The project focused on designing a complete shopping journey, from browsing products to checkout, while establishing a cohesive visual system through custom icons, branding elements, and reusable components.
Rather than solving a novel user problem, this project served as an opportunity to practice structuring familiar e-commerce patterns and maintaining visual consistency across multiple screens and states.
The primary goal of this project was to design a clear and visually consistent e-commerce interface that covered all core shopping flows. Emphasis was placed on layout structure, hierarchy, and UI execution rather than research-driven problem discovery.
This work helped build a foundation in:
Designing common commerce patterns
Creating reusable UI components
Maintaining consistency across a multi-screen product experience
The design process focused on translating standard e-commerce flows into a cohesive cross-platform interface.
Key areas of focus included:
Establishing clear navigation between browse, product, cart, and checkout
Designing screens that balance visual appeal with clarity
Consistent cross-platform layouts ensured visual continuity between web and mobile
Early exploration centered on layout and hierarchy before moving into high-fidelity execution.
A significant portion of the project was dedicated to visual design and system consistency.
This included:
Designing custom icons for navigation and product actions
Establishing a color palette and typography system
Applying consistent spacing, button styles, and visual hierarchy
These elements were reused across the app to support clarity and cohesion throughout the shopping experience.
Core user flows were mapped to ensure a complete and logical shopping journey:
Browsing and filtering products
Viewing product details
Adding items to cart
Completing checkout
These flows helped guide screen requirements and ensured all necessary states were accounted for in the UI.
Low-fidelity wireframes were used to establish structure and content placement before moving into high-fidelity mockups.
As the design progressed:
Layouts were simplified for readability
Navigation patterns were standardized
Screens were refined to support scannability and ease of use
The final designs cover all primary e-commerce touchpoints within the app.
The final interface includes:
Home: Entry points to key product categories
Browse & Store: Structured product listings with clear hierarchy
Product Detail: Focused layouts highlighting imagery and essential information
Cart & Checkout: Streamlined flows designed for clarity and completion
Together, these screens demonstrate a complete and visually consistent retail experience. Final designs were refined for both mobile and web, ensuring consistent patterns and clarity across contexts.
During design iteration and informal usability feedback, several refinements were incorporated to improve clarity and reduce friction:
Language support: French localization to better support Canadian users
Store clarity: Clear display of store hours and availability based on user confusion during testing
Checkout flexibility: Ability to share and reuse shipping and billing addresses to reduce repeated input
Readability: Clear contrast, typography, and grouping of actions to support scannability across devices
This project resulted in a complete, high-fidelity e-commerce UI covering core shopping flows. It demonstrates early strengths in visual design, layout consistency, and component reuse across a multi-screen experience.
While exploratory in nature, the project provided a strong foundation for future work focused on deeper product thinking and user-driven design.
As one of my earliest projects, EquippedToGo represents an important step in developing my UI and product design skills. Since completing this work, my focus has shifted toward solving more clearly defined user problems and grounding design decisions in research, iteration, and validation.
This project helped me internalize layout consistency and reusable components, which have informed how I build scalable interfaces in later designs.