Background
Xyla is a service provider of NHS Health programmes, including Adult Weight Management (AWM), National Diabetes Prevention Programme (NDPP) and Low Calorie Diet (LCD).
Originally, Xyla was split into five different brands: Xyla Health and Wellbeing, Xyla Elective Care, Xyla Health and Social Services, Xyla Digital Therapies and CHS Healthcare.
I was briefed with the goal of merging all these websites into one primary website, incorporating both customer and business facing content.
Understanding the problem
We began with multiple discovery calls with stakeholders from every brand, to understand how their business worked and what their goal was from the merger.
We created Miro boards, which had the following agendas:
- Introductions: As we had not worked with many of the stakeholders before, we used 5-10 minutes as icebreakers, so everyone would be able to get to know each other.
- Background and purpose: We gave a brief overview of why we have put the call together, and what outcomes we expect by the end.
- What does the service offer?
- Who are the target audience?
- On the current website, what works and what doesn’t?
- Q & As
Overall, the workshops lasted 90 minutes with around 10 people on a call.
Research
I conducted competitor research, looking at both direct and indirect competitors to see what their websites looked like and what functionality they provided. We placed post-it notes alongside components on pages, and marked up key notes. I also worked closely with our content writer, who marked up key content themes.
The outcomes were split into three different sections: What we like, what we don’t like and any additional comments.
Information architecture / Sitemap
As this was such a complex website, we went through 5 iterations of the IA. Much of the IA came from findings we made during the workshops, where it became clear there were certain pages that needed to be kept in by each brand.
One of the key differences with this website was the target audience. We found that we would have to split the website into two sections, one for customers and another for clients/professionals.
Wireframes
There were three different stages of wireframing that I went through. The first draft was completed with only the first few pages completd.
All pages were designed with a component first approach. This meant that we only needed to design the key pages, as marketing could then use the components in WordPress to build out new pages.
I hosted design review calls, where I walked through my designs with stakeholders, along with my thinking for each section. Stakeholders provided me with valuable feedback and also allowed discussions to help me progress with designs.
Handover and development
Once the wireframes were around 70% done, we began conversations with the external agency, to allow them to begin planning the build, alongside ask any initial questions or raise any concerns.
The external agency began developing the website, keeping close contact with me to answer any questions or provide support with any unexpected issues. We used Monday.com as the primary way to keep track of tasks and add comments when needed.
Release
The website was released towards the end of April, along with new marketing material. There was an overwhelming level of positive feedback from customers and stakeholders.
“You made that concept a reality in just over 12 months, and wow, it really is amazing!”
– Chief Operating Officer, Xyla.
“We’re thrilled by the positive response since launching our new brand”
– Brand Manager, Xyla.
Lessons learnt
- It is important to gather as much information as possible before starting a project, even if it involves multiple workshops.
- Some stakeholders may not understand how discovery and design work, so it’s key that the whole process and timeline is explained to them from the start.
Gallery
