User Experience Designer
Sketch, UX Tweak, InVision Studio, Zoom
User Research; Market Research; Information Architecture; Wireframing, Responsive Design; Prototyping, Usability Testing
With conditions arising due to the global pandemic, a local sporting goods shop can’t service its customer base or reach new potential customers because its website lacks the functionality and organization of an e-commerce site.
To remedy this I utilized a number of tools to define user expectations, prioritize goals, and created a more relative information architecture.
The process yielded an interface that was easy to understand and use. It also offers features that meet user expectations whether shopping in-person or online.
In the discovery phase I utilized various tools to could help me gain an
understanding of the problem I’m trying to solve.
The cardsort study synthesis revealed what services and features were desired.
Comparative and Comparative Analysis
As survey was taken of comparable local and national sporting goods stores and the features
they offered to assess how the redesign could compete within the market.
Two personas for the most ideal users were developed, and the problem defined.
A user flow was created for each persona.
I reviewed the click streams for top competitors, their website structures and came up with a possible site map for the redesigned site.
The Checkout Process
Analyzing the Results
To kick off the ideation phase I started with hashing out screens for
the new redesign, focusing on a single user flow.
Using the Sketch app I created wireframes as well as mobile device responsive layouts.
From left to right: home page, home page with dropdown menu, category product list, product profile, product cart, transaction confirmation
Home page screen responsive layouts
Usability Test Plan
Going into the usability study, a plan was devised to moderate users through a specific user flow.
Live High-Fidelity Prototype
The final prototype was created using InVision Studio and demonstrates the
clickstream for each usability study.
- Conduct further usability studies to address viewport margin and device types
- Test additional user flows
- Conduct heuristic evaluation