Purrint®
Brand Design & Online Shop Design & Development for Pet Brand
Purrint® is an eCommerce project for personalized clothing and lifestyle products for cat lovers, for which I independently developed the corporate design, UX, product photos and product illustrations.
The goal is to find a high-end solution within the market niche that will delight cat lovers all around by allowing them to perfectly recreate their own pet with a personalizer feature.
The shop can be viewed live here: to the online shop.
Summary
- Development of a high-quality, unique corporate design based on market research
- Development of the online store using best practice UX and design methods
Execution
- Development of the marketing concept
- Development of the corporate design
- Usability testing
- Frontend development with HTML, CSS, Vue.js & Twig
- Management of the development of middleware for the communication with external services
Planning the Shop
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.
High Fidelity Wireframes
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.
Template
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.
Newsletter & E-Mail
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.
Product Images
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.
Illustrations
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.