UI DESIGN / VISUAL DESIGN / APP DESIGN / CONCEPT DESIGNMobile App Design
User experience design project focused on user interface design for an e-Commerce yoga supply store.
Completed
Student Project: Winter 2021
Programs
Figma
DESIGN SPECS
Overview
Create a store and a brand for an online mobile app.
Create a mood board and build a style guide.
Create a “happy path” the user will experience from home screen to order confirmation.
Create and build wireframes and a low-fidelity prototype.
Iterate on designs and build a high-fidelity prototype.
PROCESS
Research
The first step was to research other eCommerce sites and decide what made the user experience successful and what improvements could be made. I started a screenshot folder of sites I liked to use as inspiration. Next was deciding what type of site to build. I am into yoga and fitness so I wanted to create a yoga clothing and supplies store. From there, I made an IA diagram to guide me in what features and experiences the user would go through.
PLANNING
IA Diagram
Flow chart showing the user journey and features to include in the app.
THE HAPPY PATH
First Draft of Wireframe Design
Home Page
Search Results Page
Product Description Page
Pop-up when item added to cart
Shopping Cart Page
Log In Page
Verify Order Information
Successful Order Confirmation
ITERATION
Revisions
After the first draft and receiving feedback, I went on to improve the design and continued to built out the wireframes.
This included:
adding space between elements
clarifying hierarchy
improving readability
creating a better checkout system
MAKING IMPROVEMENTS
Revised Wireframe Design
STORY TELLING
Visual Style Guide
After reworking the initial wireframes, it was time to create a UI Style Guide to add all the design elements and look of the eCommerce site.
PERSONALITY
relaxing
calming
nature
breath
THE WHOLE PICTURE
Final Design Frames
Home Page
Search Results Page
Product Description Page
Pop-up when item added to bag
Shopping Cart Page
Log In Page
Forgot Password Page
Notification to check email to reset password
Reset Password Page
Successful Password Reset
Guest Checkout - User Info
Guest Checkout - Address Info
Guest Checkout - Payment Info
Option to create account
Password for Account Creation
Review Order
Successful Order Page