Challenge:
Design a clear product page and gamification system in the existing customer panel using current UX trends and practices.
My contribution:
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.
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.
Pethelp.pl is a leading and rapidly growing startup in Poland that provides medical and veterinary care packages for pet owners.
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.
Design a product page and a gamification system in the existing customer panel leveraging most up-to-date UX practices.
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.
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.
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.
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.
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).
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).
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.
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.
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.
