During this project, I briefly interviewed around five users.
Inside the company, I got some coworkers to test the mobile website and tried to discover all the usability issues in the product.
From this point on, I started thinking about solutions for the usability issues and a redesign of the page.
I started out with a small card sorting session centered mainly around the hierarchy of the product-page template.
After the card sorting session, I wireframed the interface so I could test it with my coworkers from different parts of the company (development, customer care, etc.).
During the wireframing process, I thought about the first content the customer was going to see when they opened the product-page. Here, I wanted to show them valuable product information as much as possible to create a positive vibe around the product they possibly wanted to buy.
Examples of this are the customer-generated rating of the product in stars, clear packshots with the product in the center of attention and, for example, persuasive features like discount stickers.
Some parts of the website, such as the product description, reviews and the Q&A were very tall block-elements. I chose to give those elements a maximum height and making them fold-in when they were too big so the customer didn’t have to scroll unnecessarily.
Finally, at the bottom of the mobile page, I placed an element in which we’re able to make automatically generated recommendations to customers for additional purchases that go well with their current purchase to be.
At the end of the process, I designed the new product-page in the already defined Drogisterij.net corporate identity and tested the final prototype internally. All assets were then transferred to development and I worked with them on the step from design to code and final product.
Sidenote: the mobile website has been updated in the meantime. Some of the features I designed have been replaced by new ones. Check out the website live: Drogisterij.net.