Project Overview
Project Duration: July 2024 to October 2024
My Role: UX Designer, Graphic Design
Tools: Figma, Adobe XD, Photoshop, Illustrator
Conducting field research and interviews, testing paper and digital wireframes through low and
high fidelity prototypes. Accounting for everyone’s accessibility and an equitable design for a responsive website design.
high fidelity prototypes. Accounting for everyone’s accessibility and an equitable design for a responsive website design.
The Goal
The goal of the project was to reorganize the layout of pages and recreate UI elements to help improve the user's navigation and shopping experience.
User Research
SUMMARY
Personas described their frustration with navigating the CycleSale app, they consider the layout to function better as a mobile website than a convenient way to have direct access to their account information through the app.
PAIN POINTS
Convenience:
App functionality isn't distinguishable from store website through browser
App functionality isn't distinguishable from store website through browser
Excessive Information:
Too much information crowded the app and doesn't allow easy navigation and causes confusion to users
Too much information crowded the app and doesn't allow easy navigation and causes confusion to users
Account Summary:
Users don't have the ability to find previous order information or see the status of their order
Users don't have the ability to find previous order information or see the status of their order
PERSONAS
JOURNEY MAP
Starting the Design
SITEMAP
Navigation has been updated with new account information and order history
Original application menu to be updated:
PAPER WIREFRAMES
DIGITAL WIREFRAMES
DIGITAL WIREFRAME SCREEN SIZE VARIATIONS
LOW-FIDELITY PROTOTYPE
USABILITY STUDY: PARAMETERS
Study type:
Unmoderated usability study
Unmoderated usability study
Participants:
3
3
Location:
United States, Remote
United States, Remote
Length:
20-30 Minutes
20-30 Minutes
USABILITY STUDY: FINDINGS
Forum Fill Out:
Too many selections confused the user to what to choose to advance.
Too many selections confused the user to what to choose to advance.
Search:
With browsing inventory, requiring an account confused about viewing products.
With browsing inventory, requiring an account confused about viewing products.
Confirmation:
Information was not clear to where a receipt or confirmation was sent.
Information was not clear to where a receipt or confirmation was sent.
Refining the Design
MOCKUPS
HIGH-FIDELITY PROTOYPE
Test Prototype Here: CycleSale
ACCESSIBILITY CONSIDERATIONS
Navigation Accessibility:
A less content-heavy navigation offers compatibility to accessible users.
A less content-heavy navigation offers compatibility to accessible users.
Going Forward
TAKEAWAYS
What I Learned:
Users feel reassured when they receive confirmation messages that reassure them of their purchases being validated and processed correctly.
Users feel reassured when they receive confirmation messages that reassure them of their purchases being validated and processed correctly.