What is zonnebrillen.com?

Zonnebrillen.com is an eCommerce website specialized in designer sunglasses. The main brands that they sell are Ray-Ban, Oakley and Sinner. They are the biggest online Ray-Ban seller in the Netherlands.

The website is getting more traffic day by day. The desktop users are reducing and the mobile users are growing. Altough there are more mobile users, is the conversion on mobile lower then on desktop. The website is an responsive website but it is unclear why the mobile users doesn't purchase anything.

The Goal

The purpose of the assignment was to improve the mobile version of the website. That improvement will allow a better conversion rate on mobile, which is offcourse measured in euros.

The challenge was to make the website more easy to browse on mobiles and the design must stay within the capabilities of the Magento template Ultimo.

The research

The first research i did was Google Analytics. It serves as baseline to identify the conversion problem. I was interested to learn how the users behave on the website. I researched the conversion rate per device, the abandonment rate, the bounce rate, how much time a users stay on an page and the behavior flow of the website.

After Google Analytics i did an Hueristic evaluation on the website so i can further investigate where the problem might be. There i found out multiple possible causes like the checkout page. The checkout page is not optimized at all. The users was able to make mistakes without even getting an error sign. Another problem was the way the sunglasses was presented. The user will see on the productlistpage a list of about 300 sunglasseses to choose from and were unable to properly filter the ones they didnt want to see.

It was easy to know who will use the website. Sunglass users ofcourse. But it wasn't clear when they will buy a new sunglass or which brand. To identify such things i did an audience research. I interviewed some audience to know their user needs and did a deskresearch to know more about the statistics of the optic branche here in The Netherlands.

To start wireframing i benchmarked the competition so i could see how they present their filters and the sunglasses choices on their website.


Some early fases of wireframing (homepage)


The categories in the main navigation was made using the card sorting method. It is the key to build the information architecture of an website. It helped me to understand my users expectations of the website.

After building the website using Magento on a testserver, i ran an usability test to evaluate the website and identify possible usability problems.