E-commerce website restructure

Restructuring McCauley website's information architecture and customer journey to improve their online shopping experience
*Please note that images and/or sensitive information may be blurred out due to confidentiality agreements

Project Context

UX Designer
3 UX Designers (including myself), UI Designers, Strategist, Project Manager and Client Lead
project status
Most of 2020

McCauley has always been proud to be the to-go Irish pharmacy that locals can rely on due to their outstanding in-store experience and tailored expertise. However, in March 2020, as Covid-19 started to rise in Ireland their customers started shopping online and suddenly they couldn’t offer the same customer service. The website was hard to navigate and not very customer friendly. Our aim at Lucky Beard was to help McCauley bring that outstanding in-store shopping experience online.

Customer insights & User research

1 - As-is experience & Site structure

At the beginning of the project I was in charge of mapping the current site and app structure. Using Miro, I could visually see that from the top navigation there is a lot of sub-pages of products. In addition, I mapped out the experiences that customers had to go through to complete certain tasks to see if it was easy to follow and how consistent was the design.

Sitemap of pages from the top navigation of McCauley’s old site
Visual representation of the website structure of McCauley

It was clear that there needed to be a new navigation system that made it intuitive to find products.

2 - Business stakeholder and customer interviews

While I was doing the sitemap, I was also part of onboarding interviews with the business stakeholders to understand their services, needs and tech stack. Through this process it was identified that their online experience was nowhere near the personalised experience that clients got in-store. In addition,

In addition, I conducted online interviews with a diverse group of potential customers where I asked what they expected from pharmacies online and off-line (without mentioning who we were working for). This allowed me to get an unbiased view on what pharmacies often and their shopping patterns. Afterwards, I revealed that I was working with McCauley and got them to browse the existing online experience. The moderated task asked them narrate their thoughts as they tried to find some products and check out. One interesting finding was that people would use the search bar when they were looking for specific products. In contrast, they would use the top nav when they were 'exploring' product categories.

3 - Research Outcome

The as-is analysis and customer interviews made it obvious that the great in-store experience was not at all reflected on their online presence. Their site was overwhelming as one could get to the same page in several ways. In addition, the expertise of the pharmacist and what they recommended was not being carried over. For example, when the interviewees landed on a product page there was no reviews or detailed descriptions that would let the customer know that that product was good for them.

The outcome of this part was that I was able to create personas and user journeys that highlighted the needs, wants, pain points and mood of the of the types of customers McCauley. This allowed me to highlight specific areas of the experience that needed to change so they could be taken into consideration for the North Star and the prioritisation of the project.

Persona of a potential McCauley customer, it was important to highlight how Covid had impacted the way they shopped
Customer journey of a potential McCauley persona where the pain points are highlighted as well as suggestions as to how to improve them

The design process

1 - The North Star

With the research completed and the points that needed to change highlighted, the UX team was able to create a priority roadmap that took into account the tech and business process. So then, I was wireframing the North Star concept so McCauley stakeholders could see where they should be heading regardless where they where right now operationally and technologically.

2 - Compromising

After the North Star, there was several talks with stakeholders to prioritise certain features and put others on hold. One of the propositions where we compromised was bringing the McCauley’s employees expert opinion to their online experience. Here they would have been able to recommend products and routines to customers. In addition, if a certain product was a McCauley employee’s favorite it would be highlighted in the product page.

Wireframe example of bringing the in-store expertise into the digital experience

3 - The quick-wins

After getting a clear priority roadmap, it was easier to know what the wireframes needed to be. Although most of my examples are in desktop view, I started wireframing mobile first. Through my different projects I have learned that sometimes clients engage more with desktop as it's hard to picture a mobile screen while on the computer.

In this example, I was wireframing the ‘category page’. Originally, it was a lot of products with an endless amount of filters and no clear best sellers or top products. So on the iteration, I brought in a top banner that could show new products or special offers in the category.  In addition, there now was a best seller carousel so customers could quickly see what was popular. This is important because without the expert’s opinion customers rely on this kind of tags to find out what might be best suited for them.

Comparison of the original product page vs the wireframe
Live page based on the wireframe in the image above

Another example of a customer informed design decision was implementing suggestions on the search bar as customers type. During my interviews I noted that people expected to start typing the product name and get a suggestion. However, the search was static and just provided results once customers clicked enter. Now, the search dropdown suggested them products/results as they they typed.

Mobile wireframes of the search feature


A highlight of the project was reorganising the information architecture to be intuitive and less overwhelming for customers. As a pharmacy, McCauley had a lot of products and therefore a lot of categories. So, after doing the initial research and mapping of the existing architecture I organised a UX team card sorting workshop. Using Miro, we all had a set of individual cards with all the different products that currently existed. The aim of the workshop was that each one of us would create new groupings that made sense to us. Afterwards we came together as a team and discussed the best option.

Screenshot of the Miro board for the card sorting workshop

Once we had agreed on the IA we wanted to test, I created a Maze tree test. The aim was for testers to read a small task and go through the nav as if they were browsing the website to find a specific product. The results of the showed some tasks were successful while others weren't so the IA was iterated on based on that. It was very useful as you can clearly see where people would go in the nav and if they went back or not.

Results of the tree testing in Maze

In addition to changing the product categories, the menu changed from a standard horizontal menu to a mega menu. The new progressive disclosure in the menu made it less overwhelming because customers were able to focus on one decision at a time and narrow their search one layer further than before.

Comparison of the old menu vs the new menu


The McCauley project was really interesting because it was a change that only happened because of Covid-19 but actually has benefited them in the long run. As my first retail e-commerce project I was surprised to see how shops are run and how different types of customers browse differently.

I enjoyed being part of the whole UX process where I saw my research and interview experiences come to life through wireframes and testing prototypes. It was also a great experience presenting to key stakeholders and compromising to prioritise features.

Other projects