Charlotte Franenberg
Jacobs Douwe Egberts
In this project, my team and I optimized the homepage, category page, and product detail page for two Jacobs Douwe Egberts (JDE) brands: Douwe Egbert (Coffee) and Pickwick (Tea). Both brands have a rich history and are an authority in the Netherlands in the field of coffee and tea. However, steps still needed to be made in the field of the online brand experience. In my role as UX designer, I focussed on the structure and user experience of the pages. I also looked at their place within the total flow of the site.
Note: This project is still being implemented by JDE. Therefore I’m not able use any visuals to describe this project yet.
Starting-points
- Responsive design (mobile compatible)
- Online brand experience with an emphasis on user experience
- A seamless experience with other media
- Easy to maintain by JDE in their CRM
Data research
JDE did a survey among 200 respondents before the start op this project. This meant that we could use this data to get insights about the customers of both brands. Among others, I visualized this data in pie charts depicting reasons for users to visit the websites and what they were missing. Furthermore, I looked at Hotjar and Google Analytics metrics to understand how people navigate through the website.
My main findings were that users visited the website to get more information about the products, the savings program, and campaigns. The information the users were missing most was information about the saving program and inspiration.
Wireframes
After making a flowchart and sitemap I created wireframes. These wireframes allowed me to start working on the basic layout for each page. This made it possible to rapidly understand how the pages would function and how the content would be presented. I also took the overall composition into account and, looked at how the elements on the pages should be arranged to create an optimal user-centered design. Additionally, I created the wireframes with the CRM in the back of my mind. This means the pages are build up of modules of which the content can be edited by JDE and can also be re-used on other pages in the future.
Visual Design and handoff
After handing my wireframes over to the visual designer we still worked closely together to find a perfect balance between usability and a trendy design. We also defined the animations together to give the website an extra ump of delightfulness. We documented all the information about the designs and animations. Together with a visual style guide, we send all this information to the developers at JDE.