NERD-MART

OVERVIEW:

Nerd-Mart is a fictional gamer-focused e-commerce experience designed to make discovering, comparing, and purchasing gaming products more accessible and intuitive.

Through research, user-flow exploration, wireframing, and interface design, I explored how a clearer information hierarchy and streamlined shopping experience could reduce friction while maintaining a distinct visual identity.

DATE
Spring 2024 - 2025

ROLE
UX/UI Designer & Researcher

DELIVERABLES
UX Research • User Flows • Information Architecture • Wireframing • UI Design • Visual Identity • Prototype

A sleek, gamer-focused e-commerce app designed for accessibility, affordability, and ease.

CHALLENGES:

  • Defining a brand identity that resonated with a diverse gaming audience while aligning with the app’s visual style, tone, and personality.

  • Researching and analyzing relevant e-commerce and gaming platforms to identify features and patterns that would best support product discovery, comparison, and purchasing.

  • Balancing visual appeal and usability, ensuring the interface remained intuitive, efficient, and friction-free throughout the shopping experience.

DESIGN GOALS:

  • Design a cohesive app and website experience that worked seamlessly together, enabling users to browse, evaluate, and purchase affordable gaming gear with ease.

  • Establish a scalable design foundation that supports future feature additions, branding updates, and visual refinements as the product evolves.

  • Consider accessibility and inclusivity through legible typography, clear hierarchy, familiar interaction patterns, and interface contrast.

Wireframing & Flow Exploration:

I began with hand-drawn sketches to explore structure, hierarchy, and interaction across the core shopping journey. Initial concepts focused on home, search, product, and checkout screens.

A second iteration expanded the experience into a more complete end-to-end user flow, including welcome, login, search, reviews, cart, payment, and order status. These low-fidelity wireframes allowed me to quickly evaluate user paths and refine the information architecture before moving into higher-fidelity designs.

Rough sketches of low fidelity wireframing.

Side by side layouts for low and mid fidelity wireframing.

Visual System & Style Guide:

I developed a visual system that balances the energy of gaming culture with clarity and usability. Gotham and Rubik establish a friendly, modern hierarchy, while a controlled color palette uses cyan and lime as accents against neutral black and white.

Familiar iconography and consistent interaction patterns help reduce cognitive load and make navigation recognizable throughout the shopping experience.

Outcome & Reflection:

Nerd-Mart helped me apply my existing background in visual and information design to a structured UX/UI process. Developing the experience from early research and sketches through wireframes and final interfaces strengthened my understanding of how hierarchy, consistency, and user flows influence the usability of a digital product.

The project also identified areas I want to continue developing, including accessibility, usability testing, and scalable design systems.

Next
Next

Undoing Ruin