Overview
In collaboration with a design partner, I embarked on a transformative project to reimagine the online shopping experience for a fragrance-focused e-commerce website for the class HCID 512: Interface Design Lab.
Roles
Interaction Designer
UX Designer
Team
Addy Elketami
Matthieu Reed
Approach
Competitive Analysis
Design Brief
Information Archietcture
Wireframes
Stule Guide
Design System
Logical Prototype
Micro-interactions
Usablity Testing
Concept Testing
Next Steps
Problem
Solution
Make a consistent fragrance e-commerce website with a contemporary luxurious feel and streamlined user experience. Fragrance is art.
Project Goals
Create a web and mobile site that improves on the digital shopping experience for fine fragrances.
Design for 3 main user flows homepage to product detail page, product detail page through checkout, and sign up/sign in.
Use common e-commerce design patterns.
Create micro-interactions and an in-depth prototype for account sign-in and sign-up.
How might we… ...Improve the experience of shopping from an online retailer for fine fragrances.
Design
Information Architecture
Site-wide information architecture was built after assessing information needs from the perspective of two user categories. It was then refined based on team feedback.
Wireframes
Each screen for desktop and mobile was wireframed to map out the logical structure of the user journey, critiqued, then iterated upon.
Product Listing Page
Ideating for product listing page. Two version were created exploring differing browsing navigation styles. Ultimately version 2 navigation was chosen due to it's simplicity and ability to specially account for sorting in search.
Product Detail Page
Ideating for detail pages. Two version were created exploring diferent ways to communicate more information about the product.
Sign In/ Sign Up Page
Ideating for sign-in page. Two versions were created exploring different ways to build a sign-in/sign-up form. The second version using tabs was chosen to be in line with the site-wide minimal aesthetic and avoidance of visual clutter.
Mobile Wireframes
Below are the mobile wireframes meant to match the general layout of the desktop site but using a more vertical two column layout rather than the desktop 4 column layout.
Style Guide
A style guide was established to promote consistency throughout the web experience. Inluding gride, typography, and colors.
Higher Fidelity
Prototype Video
Logical Prototyping in Proto.io
A Closer Look at some Screens…
Interactive Mobile Prototype
Interactive Desktop Prototype
Testing
Because this was a project more focused on an aesthetic and technical design process user testing was not conducted. Most feedback for iterations was given during formal and informal design reviews and critique by peers and faculty.