Date: July 2018
Platform: desktop, tablet

Challenge:

Design a clear product page and gamification system in the existing customer panel using current UX trends and practices.

My contribution:

  • Defining the problem
  • Stakeholders interviews
  • Building personas
  • Low-fidelity wireframes
  • High-fidelity prototypes

Introduction

Background of my commitment

In July 2018, the Project Manager at PetHelp asked me to create a gamification system in the existing customer panel and a new product page. I received the requirements, presented my doubts, and after fully understanding my role, I decided to cooperate.

The scope of my work

In the beginning, I must point out that the menu, header, and footer were out of the scope of my work (Fig. 1). I received these elements, and I connected them with the main content that I designed. This note is relevant both for the customer panel and the product page.

The structure of the customer panel
Figure 1. The structure of the customer panel. Both the menu, header, and footer were out of scope of my work

Defining the problem

What is the website about?

Pethelp.pl is a leading and rapidly growing startup in Poland that provides medical and veterinary care packages for pet owners.

What are the goals of the website?

The main goal of the website is to improve the quality of life for pets. One way to achieve it is to facilitate access to veterinary care by the monthly paid packages and an encouraging gamification system.

Problem to solve

Design a product page and a gamification system in the existing customer panel leveraging most up-to-date UX practices.

What were the constraints?

The client needed the right solutions quickly. Therefore I didn't have enough time to do comprehensive research among the users. They were limited only to remote interviews with the stakeholders.

Conducting interviews

Gathering data about the project

I conducted remote interviews with the stakeholders to gather extensive information about the project and the primary audience. Stakeholders' expertise provided me with detailed information which complemented the set of requirements that I had received earlier (Fig. 2). Having a broader perspective, I was able to build personas in the next step.

The photo of the specification of the customer panel and the product page
Figure 2. The specification of the customer panel and the product page

Building personas

The representation of the key audience

I built the primary persona based on my knowledge about the project gathered during interviews. I must point out that the scope of my work justified focussing on pet owners as main clients (Fig. 3). The second types of clients are the owners of veterinary clinics, but the solutions for them have been already done.

The primary persona
Figure 3. The primary persona that represents pet owners

Low fidelity wireframes

The representation of the key audience

Usually, after the analysis stage, I take a pen or marker to sketch my ideas. However, in some cases, Balsamiq is a better choice. Thanks to low fidelity wireframes, we can rapidly show the world how actually our concept looks in the early stage of the design process.

The sketch of the gamification system
Figure 5. The sketch of the gamification system
 The early concept of the product page
Figure 4. The early concept of the product page

High fidelity prototypes

Tints and Gestalt Principles

When I was designing the gamification system in the customer panel, I decided to use tints to distinguish the items in the slider, indicating the range of the points. I also implemented one of the Gestalt Principles called Proximity to separate three kinds of preventions (Fig. 6).

Reducing clutter

On the product page, the most challenging thing was the section with the price and the CTA button. The client wanted to put too much information there. I wanted to provide a scannable design. Therefore each of my iterations was actually reducing clutter (Fig. 7).

The final version of the gamification system
Figure 6. The final version of the gamification system
The final version of the product page
Figure 7. The final version of the product page

Current project status

PetHelp startup fully succeeded

I delivered the outputs after two weeks of work. I know from the press releases that PetHelp reached a Pre Seed Round of funding. Of course, it doesn't mean that my commitment was significant. I designed only two fairly minor parts of the whole complex system. Despite this, the stakeholders were pleased with my work and I hope that the users also were.

The product page on the tablet screen
Figure 8. The product page on the tablet screen

General insights

My assessment

Although I didn't have too much time to experiment with the layouts, I am pretty happy with the final result. I had to design relatively difficult pages quickly, and I handled it.

Working with the right people

I talked with the Project Manager at Pethelp and the Front-end developer many times during my work. It was a big pleasure to work with such competent and professional people.