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.
It was clear that there needed to be a new navigation system that made it intuitive to find products.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Wup, now that you've made it all the way down, you can keep browsing my projects, learn more about me or contact me at sarahsaggiante@gmail.com or through LinkedIn.
