During this project I completely redesigned the Product Detail Page for contact lenses, whilst partnering collaboratively with a cross-functional Scrum team as well as with other UX designers, researchers and project managers within an Agile working environment.
To solve this challenge, I decided to utilise design thinking logic to openly investigate on the challenge that must be tackled before defining the problem, ideating on possible solutions and then refining these solutions.
Framing the Problem
I facilitated a holistic evaluation workshop to collect an understanding of the business requirements, to highlight existing usability issues and user needs.
Workshop results (Sample)
Analysis of the workshop results
Initial Project Goals
- To increase the conversion by reducing the bounce rate on the page.
- To improve the usability and understanding of product specification selection and data entry.
Userflow Mapping
To gain a further understanding of the areas of user pain points, I mapped the userflow of the existing page. By doing this, I not only gained an understanding for the user's intentions but saw several opportunities to improve the user's flow through the page at an early stage.
Wireframe Testing
With a long list of hypotheses gathered, it was time to validate which ones should be focussed on according to the actual user need.
To achieve this, I created a wireframe of an updated version of the page that encompassed many of these hypothesis and then gained quick user feedback by conducting a guerrilla test with this as a paper prototype.
Iteration 1 test wireframe
Following this experiment, the both the user needs and business needs were clear so the project goals were updated accordingly.
Updated Project Goals
- To increase product recognition and user comfort on the page.
- To increase the conversion by reducing the bounce rate on the page.
- To improve the usability and understanding of specification selection and data entry.
Research and Design Development
Iteration 1
Rapid feedback loops on sketched ideas with the product owners allowed me to quickly generate a vast array of ideas. We then chose the ideas that best fit the goals of the project.
From this, I created a low fidelity click-through prototype, wrote a test script and conducted moderated user tests to see if we were heading in the right direction.
Iteration 2 test wireframe
Analysis of the test results showed that the proposed solution still did not meet the users' needs but also gave insight into ways that it could
Iteration 2
Benchmarking of existing solutions on other sites and further ideation gave me the concept for a new user flow.
After mapping and refining this flow, I then created a higher fidelity prototype which we tested once again.
The test results were clear - this flow didn't meet the users expectations or existing mental models about how they should order the product.
Although it was not a success, it was incredibly valuable to gain this information as it allowed us to rule out this option at an early stage, saving us from making this mistake later on. It also pointed us back in the direction that would solve the user need here.
Iteration 3
Using the learning that we received in from the last usability test, I ideated on a solution once again using a series of rapid feedback loops.
The prototype that was created this time was of a very high fidelity in order to portray a sense of polished completeness to the test participants, to receive high-end, realistic feedback on the 'website'.
Iteration 4 test High fidelity prototype
Amongst other findings, the test results showed that the linear mobile prototype was considerably better understood than the desktop prototype.
I decided to use this information as a springboard to meet the users needs on desktop as much as on mobile.
Iteration 4
By adapting the information hierarchy and formation in a more linear fashion, I created my last click-through prototype for this iteration and once again tested it with users.
This time around, I observed that the concept was finally understood on both platforms due to the clearer perception of progress and a sense of navigation within the page.
There were still smaller areas of improvement but we decided that the proposed solution met the users needs and and further improvements could be investigated in later iterations on this page.
Outcome
Qualitatively, usability testing has shown that the user needs have been met and that the solution allowed them to comfortably flow through the ordering process.
Quantitively, Increased conversion rate despite two separate price increases.
Final result
