Project Overview
Pets at Home has been undergoing a period of large scale change both in terms of brand as well as product design and engineering. The existing site is being completely transformed and rebuilt as well as rebranded with the launch of the new Pets brand refresh which touches on all areas both digital and physical stores.
The vision
To deliver a refreshed and enjoyable shopping and ordering experience that meets new and existing pet owners expectations in a rapidly changing digital and retail space. Also bring inline the new Pets brand across all areas of the product and business. The goal is to always put the pets first and to provide the best pet care experience in store and for online ordering and delivery.
As well as the core shopping experience of ordering, collection and delivery, another key area included allowing pet owners one single point of login to allow them to access all the Pets brands and services and manage their account and VIP rewards.
The existing website has been undergoing a complete brand refresh and with the recent launch of the native mobile app that features the previous brand identity and design system the objective is to extend the new brand design to bring both web and native mobile app inline to create a smooth cohesive brand experience.
Initially the refresh of the native mobile app was going to be achieved by means of a design reskin based on the new design system.
More recently there was a strategy change to move from designing full end to end journey experiences to a model where everything was segmented into 25+ individual journeys including the mobile app. This was started to enable design and dev to more efficiently build the app incrementally. Starting with more basic journeys and then building up to more detailed and complex journeys progressively whilst keeping in mind a global view of the entire product.
My role
My role at Pets at Home was as a UI designer working in a squad with a UI designer, UX designer and UX researcher. Project work was completed in two week sprint structure involving members of the squad as well as Product Owner, Analyst and Dev as well as leadership.
Earlier projects I worked on were focused on My Account and Single Sign In / Registration.
Later on I worked on the initial native mobile reskin project adapting the design of the existing but still newly launched native mobile app to apply core foundation elements and main components libraries from the new design system. This project included creating new design projects in Figma to transfer design over from Adobe XD and linking the new design system libraries so they could then be extended.
More recently at Pets I also worked on the Convenience project which focused on all aspects of delivery and collection for guest and registered users. The purpose of the project was to allow customers to have a clearer view about pricing, delivery speed and stock for basic as well as mixed baskets where there is a combination of products being ordered and a combination of methods that the order will be fulfilled.
Challenges
One of the biggest challenges in terms of approach for the UX design team was to switch to using Figma as our design tool and to create the new design system in Figma so that it could be extended out for mobile and other areas and improve collaboration and efficiency across design and dev teams.
Moving over to Figma at the same time as creating a new design system was a large scale effort to take design previously created in XD and living in Zeplin and create new projects in Figma whilst building up the new design system.
After establishing a Sandbox and Live project environment for all areas of the product this was extended to achieve the same project structure for all the individual journeys. With a new brand refresh launch this involved further rework of the design system to accommodate new logo, colours, fonts and other brand elements. These changes also had to be reflected in the Figma projects incrementally by testing out how they would affect current and new design.
Our task is helping Pets at Home create an app that carried the new brand forward and unified the different product and service areas of the business to provide the best pet care experience for pet owners. This is an ongoing effort and ever evolving as it grows.
Solution
Identifying the current web and native app experience and key user journeys as well as learnings from the UX research team to inform our product design journeys.
Squads were created with a mixture of UI designers, UX designers and UX researchers. Project work was completed in two week sprint structure involving members of the squad as well as Product Owner, Analyst and Dev as well as leadership. Squads working on different journeys are in constant communication and together with product process sessions the goal is to identify and accommodate all crossovers between journeys to ensure that dependencies are captured and covered.
Mobile App Reskin Project
The initial design effort was directed on what the current experience / flows looked like and what core functionality needed to be given priority as we started the reskin project.
Reskin Journeys
Convenience Project - Delivery & Collection
When starting on the convenience project we looked at our process as well as case studies of other products as well as our current experience. There was tests run on some of the current journeys so that we could get current user feedback and input about how they understood and felt about the delivery and collection experience.
Based on these results and our own findings from case studies we then started to work on a design solution that could be tested.
Prototypes were created that could be tested with users to see whether the changes to messaging and design for delivery and collection were clear and helpful.
