Header Illustration
LanguageSwitch
Portfolio

Purrint® Personalizer

Personalization Feature as UX&UI Case Study

Purrint® is an eCommerce project for personalised clothing and lifestyle products for cat lovers, for which I developed the corporate design and shop as well as the online personalizer.

The personalizer ensures that customers can quickly and accurately recreate their pet. They receive a personalized product preview and can save and reuse the configurations. This makes it fundamentally different from competing products.

In this market niche, the aim is to find a high-quality solution that will delight cat lovers all around by allowing them to perfectly recreate their own pet.

Summary

  • Development of the online configurator in the store using best practice UX and design methods.
  • Compliance with the corporate design guidelines of Purrint®
  • Development of the personalizer backend visually matching the CMS software

Execution

  • Wireframing & creation of multiple interactive prototypes
  • Usability testing in several iterations
  • Design of the structure and technical functionality
  • Development of the frontend and backend with HTML, CSS and Vue.js
  • Collaboration with a full-stack developer to implement the backend

Menu-IconMenu-IconTable of Contents

  1. How it Works
    2.
  2. Stakeholders
    3.
  3. First Concept in Figma
    4.
  4. New Design as interactive Figma Prototype
    5.
  5. Interactive HTML & JS prototype
    6.

How it Works

Status Quo

In established personalization applications, the visitor selects an image from a list that most closely resembles their desired pet. So far, the resemblance to the owner’s cat is low and the configuration through long drop-down lists is tedious and confusing. If the visitor leaves the product page, he has to completely reconfigure his cat, even if another product uses the same image.

Personalizer workslike bg

The Purrint® Personalizer lets the customer create a cat by selecting the breed, patterns and colors separately. This way, product illustrations can be built in layers that correspond to different patterns and are automatically colorized. This results in a configuration that’s usable site-wide and gives the customer the possibility to create a cat that looks very similar to their own.

Personalizer stakeholder bg

Stakeholders

Who influences the Project

It is important to define the interests of the different stakeholders in the project. The most important is the customer.

  • The customer wants an easy-to-use feature that will get great results quickly
  • The artist wants an easy-to-use backend editor where they can quickly and easily integrate illustrations for the frontend
  • The UX/UI designer wants an application that is easily expanded with new features
  • The developer wants an application that is easy to program and maintain

In the designer’s position, the concept of the configurator must benefit all four parties (customer, artist, designer & developer) and take their needs into account.

First Concept in Figma

First Draft

Since the customer’s needs are the most important, the customer’s touch points were designed first.

The customer interacts primarily with the personalizer on the product page of the Purrint® store, where they can follow a live preview on the product of his choice in parallel with the configuration of his cat. The rest of the product page is already in a high-fidelity state at this point.

Personalizer firstiteration 0 bg

Above is the first draft of the personalizer with position on the product page. It was intended to show configurations in slots, which can be expanded with a tap.

Further configuration options, which depend on the product image, such as the color of the blanket, follow afterwards.

Personalizer firstiteration combo

This rough draft from Figma served as the basis for the first HTML dummy, which was created in parallel with the HTML dummy of the store itself. With this I performed the first usability test and used the findings for the next design.

Identified problems

  • Some choices, such as when the configurator is retrofitted with dogs, affect what is displayed afterwards and can cause confusion
  • Patterns are not easy to see due to the circular image and do not offer the possibility of fine-tuning. Also, they are not very accessible as long as the name is only visible when hovering
  • Larger color palettes become confusing quickly
  • The amount of choices can be overwhelming
Read more
Configurator htmldummy complete

New Design as interactive Figma Prototype

Second Draft & Usability Test

As a possible solution, I designed a step-by-step wizard in Figma.

  • The choices no longer seem overwhelming, when they’re presented in small steps. The next step is clearly communicated
  • Patterns are now displayed on a cat model so you can see exactly what they look like, this also allows for a very detailed configuration
  • To keep track of the status of the configuration at any time, a live model is built into (almost) every step, giving direct feedback
  • A big criticism of step-by-step wizards is that the user feels trapped in the current step. The progress bar is there to allow users to jump back to previous steps at any time and have orientation.
Configurator htmldummy 3 complete
Configurator step 2
Configurator step 3
Configurator step 4
Configurator step 5

The Step-by-Step Wizard was received excellently across the board in the 2nd usability test. Even though there were still minor problems.

I created a Rainbow spreadsheet to get an good overview. The test consisted of 2 tasks in the personalizer and an open discussion afterwards.

Problems

  • A recurring argument for the first list design was the perceived speed of configuration compared to the wizard
    • The status bar was often not perceived as clickable at first glance. Fixing this would counteract this
    • The live cat model was so well received that none of the testers wanted to do without it, and 50% even mentioned it unprompted. But that would make the list design even more cumbersome
    • Ultimately, I decided to keep the wizard design. Among other things, because a large part of the testers stated that they make purchases with their smartphone and the list would become very confusing on it
  • Cat designs are saved, even if you don’t use them for the product image. This confused the testers
  • The “Create Pet” button was perceived as inactive by one tester because it was grey
  • The color selection was displayed as a list, which would again become very confusing from a larger selection
Read more
Purrint Jam bg

Interactive HTML & JS prototype

Third draft and usability test

With the insights from the 2nd usability test, I sat down to run another test on the 2nd HTML dummy version, this time using Vue.js. Advantages of the HTML/JS prototype were that the live model could actually respond inputs and display an interactive image. For the first time, people could actually build their own cat instead of following a predetermined testing path.

The responsive design also meant testers could now complete the test on their favorite device, getting very close to their natural environment they’d make purchases in.

Actions

  • The “Create Pet” button is now white instead of gray with a green plus button in it to make it perceived as clickable. On desktop devices hover effects also help
  • The color selection is now a dropdown, which makes the color step much clearer
  • The status bar is designed in the green that is used throughout for buttons
Read more
Confgurator now

The third test showed that the design works and excites the target group. The target group easily configured one cat after the other. Out of 10 testers, only one person had problems locating a feature. All testers said they had fun during the configuration process.

The goal of building a personalizer that is fast, easy to use, and as close to the customer’s cat as possible was exceeded. The testers voluntarily spent more time perfecting their configuration.

You can try out the prototype with these credentials yourself:
Username: finya
Password: miezekatze

ButtonOpen Prototype
Arrow