The Focus
Mankind ventured into the Pet-care segment with PetStar, catering to the increasing demand for high-quality, nutritious food by Indian pet parents.
The team had already developed a highly differentiated identity and packaging system for PetStar; now, the need of the hour was a website that would enlarge their brand world.
The website had to reinforce brand recall, while being a hub for pet-parents to demystify the product range, seek information, engage with the larger PetStar community and more.
The Design
The UI/UX team decided to deviate from an overtly functional approach and created an engaging website based on the progressive disclosure interaction framework.
Various elements were derived from our packaging design and brand identity solution, making the website a true extension of the brand and its persona.
The website arms pet parents with an assortment of necessary scientific knowledge conveyed in a playful, easy-to-understand format replete with highly interactive elements.
The Story
Mankind Pharma is a household brand in India with popular OTC products like Acnestar, Gas-O-Fast and Prega News. While already in the business of manufacturing pet medicines, they saw an emerging opportunity in the Pet Food sector. There was a marked shift in consumer focus. While breed-obsessed pet owners still exist, there is a marked rise in ‘pet-parents’, whose attitudes towards pets come from a place of looking at them as partners and not simply commodities.
The overall increase in pets has led to a larger influx of pet food brands, most of which are international. Other favourable indicators are the rise of pet-related occupations like groomers, trainers and walkers; with the elite consuming more and more from the pet fashion and cosmetics categories.
All of these trends led Mankind to approaching the team at Elephant, where we worked with an existing brand name – PetStar – helping Mankind with their brand strategy, a strong visual identity and a packaging system in an industry that was seeing the entry of new players.
Our work for PetStar resulted in an additional brief: developing the UI/UX framework and other Digital Design elements that would culminate in a website. This website naturally had to be an extension of the brand and its core premise; while arming parents with everything they needed to know about their pet’s nourishment and the product range. The website, in effect, needed to add value and enlarge the brand’s universe to distinguish itself from the competition and emerge as the go-to source of nourishment for new pet parents, starting with dog-owners.
Progressive Disclosure
Pet Nutrition – like any other nutrition – is a highly specialized field. It is also evolving continuously, with new breakthroughs being made at a frequent pace. New pet parents, in particular, can be rather overwhelmed with everything they have to absorb on a ‘need-to-know’ basis, given that most – if not all – of them want what’s best for their beloved dog.
With these factors in mind, the team opted for a progressive disclosure interaction-design pattern when providing a solution. This framework sequences information and actions across several screens, reducing informational clutter on each screen while providing users with a smooth, easy-to-understand experience as they explore the website at their own pace.
The team liberally used interactive tooltips and hover text to streamline information flow and prevent inundation. Other small touches reinforce the brand’s playful yet scientific overtones: the cursor morphs into a paw, animations with a parallax effect, filler videos of dogs licking the screen/playing/interacting with the food.
The goal was to use these unique elements to drive the user’s journey from understand the brand’s values, moving on to understanding the product range and creating links with the pet parent community at large: all of which were achieved via our UI/UX solution.
The Playground of User Interactions
Website design and development are constantly evolving at a rapid pace. Taking cognizance of these leaps, the team used an entire suite of inventive, best-in-class interactions to make the website extremely immersive.
The brand identity flares to life immediately upon launch, where the star-shaped logo takes centre stage, while connecting to the star-shaped kibble: one of PetStar’s signature elements. The homepage is one of the stickiest pages throughout, opening up various modes of interaction and amplifying user curiosity, encouraging them to explore more.
An interactive chatbot alleviates common pet parent concerns without the need for human intervention, providing immediate assistance to those seeking it.
The website is optimized for a variety of screens – static or mobile – with no loss in user experience. Direct interactions on every page enable users to share their experiences on social media, with multiple access points.
From Packaging to Virtuality
Packaging design serves many invaluable purposes. One of the big ones is providing information that enables consumers to make informed purchase decisions. This information may vary across cultures and time zones. With PetStar, Indian consumers compare the nutritional value of home-cooked meals for dogs with branded, packaged options; and may even opt out of store-bought items altogether.
We devoted a section that compares nutritional values according to serving size and prep. There are additional features that serve as extensions of the packaging: users can view handy, graphical guides for combining foods for maximum nutrition via a ‘food curation portal’. Users can input their dog size, allergies, activity and yet other variables to get a personalized combination of home cooked meals with Petstar products included.
There is also an interactive feeding guide, where users can customize portions by using sliders that incorporate relevant data: the pet’s age, weight and serving size.
A QR code is embedded within the packaging design: this takes users directly to the website, merging digital and real interactions. The website brings the packaging to life by animating various elements on the digital version, and the brand’s key propositions are given special focus: i.e., the fact that it is UK-made, and has active ingredients like Ashwagandha.
In effect, the website’s flexible, digital avatar compensates for what the packaging cannot communicate, supplementing the brand’s narrative and successfully immersing users in the larger world of Mankind’s pet-care range.