Purrint®

Since it was clear from the beginning that the online shop will be the most important part of the branding, I started with the development of the online shop design.

For each page layout, a rough wireframe was developed in Figma. I assigned these to the steps in an initial user flow. Based on the user flow, I then developed the shop sitemap in FigJam.

The wireframes then were used as a starting point for further development.

Using the wireframes as a basis, I designed test images with different colors. Test subjects rated each test image according to how strongly they associated the respective image with the Purrint® brand values (personal, honest, sophisticated and animal-loving). This test allowed us to find colors that matched the brand early in the process and derive primary colors for the corporate design.

Once the basic aesthetic of the brand was established, I could create high fidelity desktop & mobile wireframes to fine tune. In this process, I defined the shapes and elements of the corporate design.

The focus of the usability tests was on the personalizer in the online shop, as this is a critical point in the customer journey. Nevertheless, I also repeatedly tested how well users navigate through the shop in order to identify and avoid frustration.

As an example, the home page and the product page are shown here as high fidelity wireframes.

After completing the high fidelity wireframes as well as the brand design, the shop was first created using HTML and then coded in the templating language Twig for Craft Commerce.

Various techniques (including template caching and lazy loading) were used for performance. Further improvements followed in collaboration with a full-stack developer. This resulted in a Google Lighthouse score that is 60% better than the competition and the site thus loads on average 20-50% faster than competing stores.

In addition to the shop template, newsletter as well as email layouts (shipping confirmation, review email, etc.) were also created. The newsletter can be easily applied by users without programming or design knowledge through a simple editor. The newsletter creation can thus be done by e.g. a copywriter alone, which frees up time.

Care was taken to ensure that the design is easily implementable in email HTML and worked according to the principle of “Graceful Degradation”. Even in older email clients with poor HTML support, the email always looks acceptable.

In order to develop a design that is consistently perceived as high quality, a photo style also has to be defined. As an online shop, quality and a consistent style of photos throughout ensure a consistent brand perception.

The illustration style is also defined in the corporate design. Infographics and decorative mascot illustrations break up long texts and inform the visitor. To ensure that these illustrations can be created quickly and efficiently, I developed a simple outline-based style that consists of the brand colors.