A Responsive E-Commerce Site Design & UI/UX Case Study
THE PROJECT:
A responsive e-commerce web app that enables customers to easily shop for parts, components, and accessories for the legendary antique Swedish Mauser rifle.
UI Design Responsive Design User Stories User Flows User Testing
User Stories #1
As a new user, I want to access the inventory without having to register, so that I can make sure this store has what I’m looking for before having to create an account.
I want to be able to place multiple items in a shopping card, so that I can purchase more than one item at a time.
As a customer, I want there to be a variety of payment options, so that I can choose the payment method that suits me best.
User Flows
Low-Fidelity Wireframes
I want to be able to place multiple items in a shopping card, so that I can purchase more than one item at a time.
Medium-Fidelity Wireframes
I want to be able to place multiple items in a shopping card, so that I can purchase more than one item at a time.
User Testing
User #1
APPRECIATIVE: Looks beautiful! Very easy to go through the process of adding items to my cart.
OPORTUNITY: Might need something to signify the ability to scroll from left to right when viewing images of items at the top.
User #2
APPRECIATIVE: A super easy app to use! Super awesome logo!
OPORTUNITY: I don’t feel like the circles within the bottom navigation menu drew my attention very well. They need to be more prominent.
User #3
APPRECIATIVE: Love the that the name of the cart is your “ammo box.”
OPORTUNITY: Maybe “Saved Parts” should be “Wishlist” or “Favorites.” We want ratings, so perhaps a different icon than a star for “Wishlist. We don’t want a heart. Too feminine for a gun parts store.
6.5 x 55 llc Styleguide
Multi-item Cart Funtionality
I want to be able to place multiple items in a shopping card, so that I can purchase more than one item at a time.
Seamless Shopping Experience
Featuring custom wishlist icon modeled after the Swedish crown mark that signifies the authenticity of each rifle and collapsible item description viewports.
Multiple Payment Options at Checkout
As a customer, I want there to be a variety of payment options, so that I can choose the payment method that suits me best.