My Role:
Tools:
Deliverables:
Primary UX Designer & Research Coordinator
User Testing, Sketch, InVision
Wireframes, Test design, Competitive analysis, Prototype designs.
Step 1: Test Brief
The first step of the process was to outline the who, what, where, when, how, and why of the project at hand. Through a detailed test brief we were able to narrow down the problem: Users were skipping over the details section of the PDP due to it being a text block, and thus easily missed. It lead to our hypothesis: if we added a visual method of breaking up the information it'd catch more attention of the user and allow them to get the information they were scrolling around the page looking for faster, easier, and with less frustration on their part.
Step 2: User Surveys
The first order of business was to discern which pieces of information the users were coming to the product page (herein called 'PDP') to find. Through a set of recorded user surveys we were able to find out the following areas of interest, presented in their order of importance from most important to least:
Fit, Comfort, Care, and Materials.
Step 3: 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.
Step 4: Wire Framing
Rough wireframes of 10 design options were presented to the team in order to select four to move forward with. We began with a mobile first approach and moved into lo-fi iterations using Sketch as our main tool, with InVision as a way to share designs amongst the team..
Step 5: Hi-Fi
For this project we passed over the lo-fi step as the brand as well as the design system was well established. It would have not made sense for the client to deliberate on a lo-fi for designs aimed at a test. Therefore, I moved straight into creating our variations for the testing with a mobile first mindset
Step 6: Variation User Survey
Through a few more rounds of user surveys we were able to narrow down the 4 design options to 2. Once these two were decided upon, we could then move forward with designing for desktop and then finally, testing in a live A/B format to decide which would go live.
Step 7: Optimizely and Results
It turned out that the hypothesis was correct, and once we implemented the idea we tested for we found that the amount of users skipping the description to go to the reviews for the same information lessened significantly upon further user recording sessions. After going live into Optimizely for the live A/B test, the results further validated our initial hypothesis and thus our challenger won.
Live Version
