Royal Canin is a premium, global dog and cat food brand, owned by Mars. They use research, science and innovation, and the characteristics of each animal to create breed-specific nutrition, providing precise nutritional solutions for pet owners.
I began leading the UX on a global website design project in September 2017, working alongside a CX Lead, Business Analyst, Project Manager, Content Strategist, client-side UX Manager and, over the course of the project, four UI and visual designers.
The project's aim—firstly to deliver a consistent user and brand experience across 56 markets, and secondly, to introduce a sophisticated, personalised e-commerce capability delivered through the Sitecore CMS.
Much of my focus has centred around areas key to every page; the site header, navigation and menu, 'cards' and content components.
At the point I joined the project, some initial UI design work had already begun. Running as a parallel workstream to the global website project is a comprehensive online style guide for use across all Royal Canin digital platforms—the ‘Royal Canin Design Language’.
The Design Language was approached with atomic design principles meaning initial working versions of many elements and components had already been documented and, in some instances, adopted by other Royal Canin projects and suppliers.
My task was to build on that work, challenge it, where necessary, and identify areas to test, validate and revisit, as and where appropriate.
I introduced a collaborative process which comprised research, team workshops where we sketched approaches, wireframes and lo-fidelity prototypes. We then used these to conduct initial short internal tests, iterating the prototypes if issues were identified. This was followed by hi-fidelity UI designs for external user testing.
Royal Canin wanted to create an ‘in-page experience’, meaning they wanted users to journey through the site using content and links within the body of the page, not through navigation rails. As we developed the site navigation, balancing the client's desire to lead users' interaction with the site with the needs of the users themselves was a recurring theme .
My process began with competitor analysis and personas, then white‐boarding sessions—sketching concepts and user flows with varying members of our team. Depending on the outcome of the sessions, we would then either continue with further detailed desk-based sketching, or translate the white-board concepts into wireframes and prototypes.
On occasion we'd move directly into hi‐fidelity design comps as we already had many existing design patterns, elements and components in our UI kit.
I broke the existing design down into key components and began with the header and navigation.
The existing desktop header designs were driven by Royal Canin’s desire for a premium brand appearance and clean aesthetic.
All navigation in the header – bar the Search, My Account and Shopping Basket links – sat behind a pale grey ‘burger’ style navigation icon. Selecting the burger icon opened a sequential mega menu.
I knew not all users identify the burger icon as a navigation device, and I wanted to surface the top level sections, 'Cats', 'Dogs', 'Science & Nutrition' and 'About'. We quickly prototyped some variations, each with a primary navigation, and tested each with a findability task.
Improving The Header
The results of the initial tests showed that users were quicker to interact with a primary navigation than a burger icon –17 seconds compared to 31 seconds – and completed the test more quickly, in 48 seconds, whereas the 'burger test' users took 1 minute and 7 seconds.
In subsequent tests, we added a label entitled 'Menu' to the burger icon. The interaction with the navigation from the burger icon increased but only slightly, from 35% up to 39%, and the time taken to complete the task decreased from 31 seconds down to 23 seconds.
I felt the test results warranted retaining the newly added label whilst at the same time making a compelling case for having an open primary navigation.
The existing mobile designs featured a ‘sticky’ navigation bar at the foot of the screen. Although this location was commonly utilised in apps for navigation, I saw issues I was keen to address.
The close proximity of the navigation bar to Safari's browser buttons could create challenges for users on iOS. There was also a significant amount of page real estate with navigation options users may well not need. For example, a dog owner doesn’t need to see a persistent link to the ‘Cats’ section of the site.
I was aware of recent research which showed that sequential menus can cause users to accidentally make mistakes, especially on Android phones (or in a browser). People are tempted to use the phone’s physical Back button or the browser’s Back button, accidentally end up closing the menu and navigating to a different page instead of moving back to the higher-level menu.
The links back in the first version of the navigation were smaller and lighter than other navigation items, resulting in them appearing recessive by comparison.
We workshopped an alternative to the sequential menu, an accordion for the primary categories accessed from the top left of the screen, with each accordion expanding to expose its corresponding subcategories. This design felt like a 'submenu' inside a larger menu. The category the user is in remained visible at the top of the menu, giving them a clear route back.
In testing, the two styles of navigation performed much the same; there wasn't enough of a difference in the results to call a winner. What was clear though was that there was no benefit from retaining the sticky footer navigation—it wasn't providing a tangible benefit to warrant the use of the real estate on every screen.
We tested a hybrid of the two approaches, a sequential navigation accessed from a burger icon at the top of the screen. Of the tests we ran, this option performed the strongest.
The finalised desktop header has a primary navigation rail providing quick access to the top level sections. The menu accessed from the burger provides links to the second level pages.
The mobile menu is now accessed from the burger icon in the top left of the screen, a position consistent with the desktop experience.
The link back to the the higher level menus is the same height as the other navigation items, differentiated by type style and colour.
Designing The Interactions
I introduced Principle app to create and demo animation and microinteractions, briefing the design of interactive elements of the user interface.
We developed key areas such as menu interactions for mobile and desktop breakpoints, down to microinteractions such as the button and navigation hover styles.
In some areas of the project, the design language facilitated swift progress to polished UI designs. In other areas, more exploration, iteration and client engagement was needed.
The addition of e-commerce to the product page required us to feed in various requirements from Royal Canin's e-merchandising team, including up-selling, cross-selling and additional selling.
I started with some product page UX and conversion best practice research, then created a content hierarchy that ordered the content requirements identified by Royal Canin and our team. Seeing the content in a hierarchical structure – without the influence of page architecture or aesthetics – gave us and Royal Canin the opportunity to assess and rationalise the content from purely that perspective .
Once the content structure had been agreed, I introduced Axure to the project and created a mobile first adaptive prototype.
Work on the project is ongoing and the first pilot market is scheduled to launch in July 2018.
My contribution to the Design Language has focused around the transitioning of version one of the design language from a developer-centric resource into one that serves wider audiences; designers, brand managers and marketers. This encompassed initial research, an audit of the existing content and definition of a new site structure, informed by card sorting exercises.
I collaborated with the project lead and UI designer to define the layout grid and breakpoints, the type specification, button styles and rules on their use.
The site can be viewed here developer.royalcanin.com