Ridin Dinesh
Avatar

Case Study

Helping marketing team with their online campaign with UX improvements

Role: UX Designer and Researcher

iPad App
  • Macbook Image
  • Project Rundown

    Nivea is one of the leading companies in the field of skincare – with more than 130 years of experience. Their marketing team in Thailand approached me to help them to come up with a solution for their online campaign. Nivea websites are managed by Nivea International and it has many limitations which makes it very difficult to create an effective layout for the pages to meet the UX requirement to display the product campaign properly. Thai users behave so much more different compared to other parts of the world. They needed a solution where they can create an effective page design to meet the online campaign requirement.

UX Challenge

Nivea websites are built on such a complex custom system, in order to make any changes to the website requires many levels of clearance before they approve any changes on the website. So for me to provide them an optimized layout/template/design for their website, I have to make sure I audit their entire website from top and bottom, almost as close as pixel by pixel examination.

UX Goal

Create an effective template(s) which they can use for their online campaign without having to go through too many design or layout changes. Lastly, formulate a strategy on how the content can be mixed and match to create a suitable template with existing page design.

Tools Used:

  • Adobe XD

    To create Hi-FI Wireframe

  • Google Analytics

    To study user behavior

  • Invision App

    Reviewing Wireframe with client

Phase 1: Website Audit

This process took a huge amount of time. Going through every layout of each page (Homepage, product page, campaign page, and other pages), understanding the all limitation and possibilities for each page such as column configuration, what kind of content is allowed (Text, images, video). All these steps had to be repeated for mobile devices as well.

Below are screenshots of some of the pages in the documentation. Which consists of 61 pages.

  • Image Image
  • Image
  • Image Image
  • Image Image

Phase 2: Competitive Analysis and user behavior

Before we get into understanding what we can do to improve their website and have an edge over their competitors, it’s important to identify their Top competitors. Currently what I see that makes Nivea falling back in terms of Online presence is the website. Nivea backend system is so restricted and doesn't provide many options to implement a better user experience.

I had a couple of meetings with their team, where we would have a session of Q&A and also discussing with regards to user behavior and competitors.

This phase involved the following topics:

  • 1. Understanding User behavior by speaking with the Marketing team, and Sales Team. Going over user behavior data in Google analytics.
  • 2. Understand Website limitations and what all new changes we can request to the main office so that they can approve the new layout.
  • 3. Discuss early wireframe for templates

Phase 3: Creating Wireframes, user testing and feedback, and Content Recommendations

After a month of research and understanding. I came up with templates/layouts which they can use for specific pages.

I have created optimized templates(wireframes) along with the content recommendations for each section.

  1. 1. Home page (2 Templates)
  2. 2. Campaign page (5 templates)
  3. 3. Article Page (3 Templates)
  4. 4. Product Page (2 Templates)

Below are some screenshots of the wireframe.

Please note, during this phase, usability testing and design iteration are carried out till we have come to a conclusion for the template. Since there wasn’t much time available, we didn’t get a chance to test it with real users. We did internal user testing using the employees in the company.

Phase 4: Submission of full UX research documentation and high-feditly Wireframes

File were submitted in Word document and Adobe XD file.

Conclusion

The layout and recommendation have been adopted in Nivea Thailand website. Now the next step is to evaluate the templates to see how it performs in Desktop and mobile device and continue to iterate and optimize the layout and content.