My Role:
Tools:
Deliverables:
Primary UX Designer & Research Coordinator
User Testing, Sketch, InVision
Wireframes, Test design, Competitive analysis, Prototype designs.
Step 1: Test Brief
As with every test run at Rothy's, we began with a brief. This brief would serve to guide the process of design, testing, and implementation by outlining our problem, hypothesis, and Key Performance Indicators (KPI) used to measure whether our hypothesis proved correct.
Step 2: Competitive Analysis
Once it was decided what the users were looking for, we had to see what the competitors were doing , which lead me to creating a competitive analysis document that ran through multiple competitor websites analyzing various points of interest such as look and feel, accessibility, usability, narrative and cognitive load.
Step 3: Wireframes
After spending a bit of time sketching out wireframes, we were able to find a good direction based on the competitive analysis and our current design system. The thought process going into the wireframes was user expectations as set by previous e-commerce experience, as well as the ease of use.
Step 4: Design Iterations
For this test we had a pretty clear direction to go in following the Design System in place. Thus, iterating didn't take much of our time; however, a unique problem we did run into was how to indicate 'color out of stock' should the size be in stock. This lead to 3 different iterations, and collaboration between 3 UX designers which was then handed to myself to get user feedback.
Step 5: User Surveys/Recordings
We set up a User Survey to test if the users, both familiar to Rothy's and unfamiliar, could understand our design and its purpose in each state of use. The key point of interest was with the 'Color out of stock' option in each design iteration. With concern that the user would get confused, we were relieved to find this to not be the case for returning and new users alike.
Step 6: Live Testing - Optimizely
Once the winner from the user surveys and recordings were selected, the designs were built and loaded into Optimizely by the development team. Measuring against the chosen KPIs as set out by the test brief we gathered the data from the live run and found our hypothesis proven correct - color swatches made for a better User Experience on the Product Details Page.
Live Version