Skip to content

User Experience Manager

Screenshot of ALX

Musgrave is a 146 year old retail and wholesale business, owning two of the most recognisable retail brands in Ireland - SuperValu and Centra. I was hired as UX Manager for the retail side of the business, leading 3 designers, and with responsibilities for products in the ecommerce, in-store digital, and loyalty spaces.

I rebuilt the team after some resignations, backfilling positions and also expanding the team by one more designer. I’m a strong believer in having people at different levels on the same team to learn from each other, and so also hired an intern. Through initiatives I took, I helped to instil belief in the team, raise its profile and change the attitude of the company towards User Experience and Design.

UX at Musgrave

On my arrival the UX team were disillusioned with their position in the company, being primarily seen as a visual resource. The team felt under-appreciated and under-utilised, and didn’t have much control over what they would work on, rarely if ever being involved in product direction or strategy discussions.

At Musgrave, all development work is provided by external agencies, and there had been no relationships built between the UX team and any of the agencies we used. Most communication had been through our IT or Product teams, leading to an artificial distance between the designers and their work. Handoff tools such as Zeplin were being used in lieu of actual discussions and clarity. The flip side of this was that developers had little input during the design phase, which helped build a further discrepancy between design and production. The overall quality of what was being released was compromised.

Brand Rejuvenation

I wanted the team to work together on a big, design-led project. This would give us the platform to collaborate within the team in a more meaningful way, and demonstrate to the wider company what we were capable of.

An opportunity presented itself in the form of a rebrand for SuperValu and its variants and sub-brands, including Real Rewards Loyalty, Insurance, Getaway Breaks and Gift Cards. These were expressed in a patchwork of sites, sub-domains and apps, all of which had been designed and built by different teams and agencies at different times. The project was part of an overall programme of work covering all physical stores, logistics, etc, and with a nationwide media campaign attached.

Screen grab from the Tayberry Design System showing menu items and colour design tokens
Design Tokens in the Tayberry Design System

The UX Team was expected to carry out a reskin exercise, using the new branding provided by an outside agency. Speaking with the team, however, I showed them that it was an opportunity to improve how we designed. I wanted to change our workflow from being quite waterfall, to being more agile and collaborative with other functions and departments, which would help overall product release quality. Once we had agreed as a team to build a design system we named it Tayberry, which is a cross between a Raspberry and a Blackberry.

Process

Alongside an in-depth audit of all of the websites and apps which were in scope, I began liaising with the development agencies on the changes to understand the technical limitations and costs. We also began to introduce the idea of aligning frontend code between the agencies and using a centralised pattern library, which had not been done before. Our main development partner responsible for the largest part of the work, Laposa, were enthusiastic about implementing a design system in Patternlab, and were extremely proactive in reducing friction with the other agencies.

Image showing 8 different SuperValu brand variant logos
All 5 brand variants for SuperValu

Once we had finished our audit and identified patterns across the different assets, the designers began the UI design work and building out the pattern library. Some of the new brand guidelines were created without much consideration for digital design, and so we collaborated with the design agency to amend some of the colour and typography. I set up weekly critiques and prioritisation sessions with the UX team, ensuring we were designing the right things at the right time. I also encouraged the team to learn more about frontend coding so they were able to have richer conversations with our developers.

Some of the design tokens from the Tayberry Design system
Screens from the Design System detailing buttons, inputs etc.

Internally, I needed the rest of the company to understand what we were looking to achieve, and the changes that would be needed - not just in our design process, but in the overall product and content workflow. There were numerous stakeholders who I needed to manage to ensure we were given the space to succeed, including Product, IT, Programme Teams (ie. Loyalty), Brand Managers, Digital Operations, and the Marketing and Content teams. Clear project limits were set to ensure clarity and prevent scope creep, and I also needed to de-risk the new methods in the minds of stakeholders through continual workshops and demonstrations.

Screen grab from documentation showing images in situ on a website, with red lines and notes to explain the dimensions and how the images are obscured depending on the screen width
Detail from documentation with redlining to help Marketing teams create assets for the new website

What's missing? eCommerce

One major gap in where the design system was implemented was the SuperValu eCommerce site. The engine powering this site is a platform from Mi9 (now Wynshop) which was due to be deprecated. At the same time as the rebranding, we were also in the early stages of a large project to update the eCommerce platform.

During usability testing the UX team explored having a discrepancy in branding between the eCommerce site and everywhere else. There was no major negative reaction from customers, and it didn’t stop people using either platform. With there being substantial costs for iterating the eCommerce site due to the software being close to being out of support, we decided to not proceed and instead concentrate our efforts elsewhere.

User flow map example, demonstrating difference in brand experience from one site to another
The current SuperValu ecommerce site

Website launch & Content Design

Something that caused a wrinkle to updating the main SuperValu website was copy formatted in the CMS by the site editors. Headers were used incorrectly, copy extensively bolded and italicised, centering of text, and more. None of these could be treated programmatically, and would have to be fixed manually when the new site was launched. Using analytics to gauge how popular certain pages and sections were, we worked closely with the Content Team to prioritise which pages would be updated.

Example pages of the SuperValu website shown on different size devices
The new SuperValu website

This also gave us an opportunity to grow understanding within the Content Team, to set up a better working relationship. Exposure to analytics to measure performance, and explanation of UX principles around content design, helped us to engage a team which had spent most of their focus on social media. Together we restructured the content on the site to make it more accessible, and archived quite a few articles which were no longer relevant or performing.

Example pages of the SuperValu website shown on different size devices
Example pages of the SuperValu website shown on different size devices

Real Rewards app

The app for our loyalty programme, Real Rewards, was one of the larger parts of the rebranding. Unlike the websites, structural changes were in scope, allowing us to push the pattern library further. Laposa was again the developer, ensuring continuity in approach to implementation.

We were aware there were to be fundamental changes to the loyalty programme over the coming years. The UX team saw this as an opportunity to start introducing some of the features and mechanisms of the new programme early, to gain insights into our customers behaviour. Some of the changes we proposed included major iterations to the information architecture and the introduction of a ‘wallet’ feature, to gather all vouchers and coupons in one place.

Various screens from the Real Rewards app
Various screens from the Real Rewards app
Various screens from the Real Rewards app
Various screens from the Real Rewards app

When we encountered some resistance from the Loyalty team to our proposed changes, we invited them to multiple usability tests and debrief sessions. Seeing our customers' ease with navigating the new IA, and being shown analytics which demonstrated problems with the existing app helped to bring them on board and become advocates of the release.

Various screens from the Real Rewards app
Various screens from the Real Rewards app
Various screens from the Real Rewards app
Various screens from the Real Rewards app

Project results

As an example of how well the new process worked the new design for the Real Rewards app was extremely successful. We increased retention, with an MAU increase of 15.4% and engagement time up by 10%. One of our hypotheses when redesigning the app was that if we moved the position of coupons they would be used more often. In fact their use exploded, with an increase of ~300% redemptions compared to the same period as the previous year.

On the more intangible side of things, over the course of the project and beyond, the UX team found confidence again. Through working through tricky problems, regular critiques, and launching a huge project together and changing how products were released, the team had built a lot of trust in each other and their own ability. More contact with the teams we worked with helped to build understanding and knowledge, making the UX team more comfortable speaking and asking questions.

We also built lasting relationships with other teams and company leadership. Our approach to the work was now proven in the eyes of the company, and we were requested to consult and contribute to other high profile projects. Examples of this include UX leading research and strategy on a Marketing project to change materials distribution to retailers, and results from our usability testing leading to fundamental changes to the operational roll out of the eCommerce replatform mentioned earlier.