Responsive Web Design for an Ecommerce Site

  • The Goal

    To create a user-friendly responsive website for an ecommerce platform in which users can buy and sell their gaming equipment. The design should reflect the brand’s ethos while delivering a smooth, easy to navigate experience for its users.

  • The Process

    Building on the user research from the Mod Vault app, I began with paper sketches for the desktop layout and low-fidelity wireframes in Figma for both desktop and mobile. I then moved into UI design, creating high-fidelity mockups and interactive prototypes, incorporating imagery from Unsplash and copy generated with ChatGPT.

  • The Solution

    The solution was a fully responsive ecommerce site for Mod Vault that delivers a seamless experience across desktop and mobile. The design balances functionality with a clean, modern UI, making it easy for users to browse, buy, and sell gaming products. By applying user research insights, the final product improves usability, enhances visual appeal, and supports intuitive navigation throughout the shopping journey.

Laptop screen displaying a website for MOD VAULT with the slogan 'Play More. Pay Less. Trade the Rest.' a large stylized arrow icon on the right and a search bar at the top.
Link to Desktop Prototype
Smartphone screen displaying an online gaming store with a neon arrow cursor, a pink 'Search' button, featured products, and a listed headset priced at $79.99.
Link to Mobile Prototype
  • A laptop and smartphone display the same online store homepage with the slogan "Play More. Pay Less. Trade the Rest." and images of tech gadgets, including a neon-colored cursor icon and a pink headset.

    Homepage

  • Laptop and smartphone screens displaying an online shopping page for gold-colored Bluetooth gaming headphones with a pink background image.

    Product Page

  • A website displayed on a desktop and a mobile phone, showing a gaming gear store with pink neon-themed graphics, gaming accessories, and a section titled 'Gear Guides'.

    Blog

  • A laptop and a smartphone displaying the Mod Vault website interface for buying and selling gaming gear, featuring a large cardboard box, search bar, pink search button, and sections about search, shipping, and credits.

    Selling a Product

  • A laptop and smartphone display an online shopping cart with two items, a headset and a mouse pad, showing their prices, ratings, and options to remove items. The screen also shows a rewards promotion and order summary details.

    Cart

User Research

To review the in-depth user research, please review the previous case study in my portfolio on the Mod Vault app. The same user research, personas, and user journeys were applied to this design.

Mod Vault App Case Study

Paper Wireframes

The ideation process started with paper wireframing. I designed some of the most important screens on paper first to develop several quick iterations and narrow down the best user-centered solutions before going digital.

See Paper Wireframes Here
A hand-drawn wireframe for a website titled 'Sell V5 Final,' featuring a header with a logo, navigation menu, a promotional section for selling gear, a three-step process, a start selling section with a search bar, FAQs with checkmarks, and footer with logo.

Low Fidelity Prototype

I then transferred the paper wireframes to low fidelity wireframes in Figma to create a working prototype.

Link to Lo-Fi Prototype

Design System

The design system was synthesized with the help of ChatGPT to determine complementary typography, Coolors.Co to develop a complementary color palette, and iconography from Google’s design system Material Design. Unsplash was utilized for product imagery and ChatGPT was used for product pricing and descriptions.

Typography guide with font styles, sizes, and examples for logo, headings, subheadings, body, buttons, and italic text.
A digital interface with a section titled 'Buttons:' containing three groups. The first group has two pink 'Shop Now' buttons, the second group has two white 'Go Back' buttons, and the third group has two pink 'Remove' buttons with black x icons.
Screenshot of a user interface for a website or app called MOD VAULT, featuring navigation bars with a hamburger menu icon, notification bell, shopping cart icon, back arrows, a help icon, and a close icon, with a section outlined in purple dashed lines.
A color palette with two sections: a blue square labeled 'Secondary Colors' and a pink square labeled 'Accent/Call to Action Colors'.
Grid showing electronic gadgets and accessories including keyboards, headphones, headsets, a mouse pad, and headphones with brands, prices, ratings, and 'Add to Cart' buttons.
A collection of blue icons including home, shopping bag, tag, shopping cart, bell, truck, magnifying glass, list, check mark, up arrow, cross, cube, left arrow, heart, person silhouette, user icon, filter, question mark, download, gear, printer, settings, toggle switch, headset, phone, chat bubble, documents, and email.
Two search bars with a magnifying glass icon, filter and sort icons, and pink search buttons. The top section is labeled 'Search Bars:' and there is a blue back arrow labeled 'back' on the left.

High Fidelity Prototype

Buying a Gaming Product

When users search for a product, the results display with subtle hover animations that highlight the item being selected. After clicking “Add to Cart,” an overlay appears, showing the items currently in the user’s cart. Users can also hover over the cart icon to quickly preview their selections without leaving the page. On each product page, a “Buy Used” option allows shoppers to view an overlay with multiple listings sorted by price and quality—giving them the flexibility to choose a used product instead of purchasing new.

Selling a Gaming Product

Users move through a step-by-step flow to sell an existing product. They begin by selecting an item from search results displayed as interactive chips with product names, images, and descriptions. Next, they enter details such as purchase year, quality, and shipping ZIP code. Users then choose between shipping or pickup options—each expanding to show relevant fields like nearby drop-off centers or pickup scheduling. After confirming, they see their calculated store credit with a celebratory confetti animation to reinforce a positive experience. Finally, a confirmation screen with a checkmark animation and “Continue Shopping” button completes the process.

The Checkout Process

Users follow a clear, step-by-step flow to complete their purchase. The process begins with a cart summary displaying items and interactive chips for available discounts, such as their wallet balance and rewards points. When a discount is applied, a confetti animation appears, highlighting the user’s savings, to reinforce the positive sentiment towards the money being saved. During checkout, users can quickly select saved addresses and payment methods through interactive chips or add new ones as needed. A final order summary allows for review before placing the order, which concludes with a confirmation screen and checkmark animation to signal success.

Next Steps

After launching the responsive website, our next step would be to measure our success by the following metrics:

  • Feature Usage Frequency (selling a gaming product)

  • Increased Traffic and User Retention

  • Increased Sales

  • User Surveys