The task was to redesign the website based on the new content platform.

My role was split into two phases. Initially I was to conduct the research phase and be ION’s representative for the UX work, collaborating with the platform provider and their team to lay the website’s foundation.

Once we had tested the website and it shipped, I was tasked with the creation of website assets that had been agreed with the wider team (lead by ION’s other designer).

I put myself forward for the research and UX portion of this project, partly as in 2016 I had produced a "Digital social strategy" report (which nicely dovetailed many aspects) but mostly as it presented a fantastic learning opportunity.

The project was represented by a small team from ION and RaisingIT, with personnel being:

The creation of this website was split into multiple phases and we utilised an Agile Design process to best inform, iterate and deliver the solution. For this groundwork phase the core team members were the Business Manager, Marketing & Comms officer, and I.

In the Autumn of 2017, ION invited vendors to put forth their bid to becomes it’s technology platform partner. The final three vendors were:

• KOKM
• RaisingIT
• Hubbub

After two months of careful consideration, ION’s seven trustees decided to partner with RaisingIT, and its SaaS platform which provided a CRM-powered website.

In November 2017 the Business Manager and I represented ION at the project launch meeting with RaisingIT, where we established what we wanted the new site to achieve, why we wanted the change, and why previous platforms failed.

ION were then assigned a RaisingIT Delivery Manager and Web Developer and asked to attend a Strategy Workshop Day in January 2018. Hosted by RaisingIT this day would be attended by several of its new clients and help them understand how best to create a website. ION was represented by the Business Manager, the Marketing and Comms officer, a Nutritional Therapist, and I (as the designer).

This full day event covered many aspects with the greatest takeaway being how to group ION’s various offerings, so they aid usability and reduce confusion.

My research needed to provide ideas, direction, or solutions for:

• User functionality
• The basic navigation menu
• Required page styles (news, blog, event, etc) from RaisingIT’s library
• Required third-party integrations
• Site activity reports, integrating with third-party reports

The outcomes from the research were to be influenced by user needs, but balanced with the business needs of ION, the capabilities of the RaisingIT platform, and findings of previous research work (e.g. the "Digital social strategy" document). The research phase would contain:

• Requirements gathering
• Competitor analysis
• User interviews / surveys
• Expert interviews
• Affinity mapping
• Personas
• Wireframe brainstorming

To determine the needs of the business I conducted interviews and data collection with 21 key personnel across all ION departments, resulting in some core website objectives:

• Users to buy clinic consultation packages
• Users to view various events and book tickets
• Users to be able to subscribe to magazine
• Users to be able to freely learn about nutrition through various different media
• Alumni to be able to join a (gated) community
• Users to be able to donate

To better understand user needs and identity problems I conducted face-to-face interviews with four customers and surveyed our email database, receiving 49 replies. The main issues could be summarised as:

• Website and its content was circular, with no clear entry and exit
• Website was not up-to-date technologically (platform unresponsive)
• Design (and sometimes content) was inconsistent
• Accessibility was poor

In total I identified:

• Nine issues impacting external users
• Five issues impacting staff
• Seven issues impacting the business

Having analysed the answers, it was apparent the main underlying cause was not understanding who our users were, with each department thinking the user was most engaged/interested with their department’s offerings.

Using the interviews I conducted, and surveys I produced, I was able to come up with personas to better guide everyone and empathise with our users:

Working with the Business Manager we produced a strengths/weaknesses document to that took in the needs of both internal and external users:

Understanding reporting results (including Google Analytics, SEO, KOKM reports, etc) I found that ION sales were declining in short course tickets and magazine sales – especially to competitors. The main reason was the ineffectiveness of our website. I conducted a competitor analysis to find out what the market was doing better:

The RaisingIT platform has a predefined base template which is then edited to suit each business, with the greatest editing opportunity to its underlying structure being the homepage. The other pages (news, content, event, etc) are limited to front-facing UI elements (such as font, colour, etc).

To build an effective website we conducted affinity mapping sessions within ION and with the RaisingIT team.

The current site-map was too circular:

Working with the team at RaisingIT a simpler site-map was produced with clearly defined sections:

Armed with this research I then started wireframing for the homepage. After a few iterations the team settled on a streamlined layout:

All our information was passed to RaisingIT, who had their designers and engineers collaborate with ION and make the high-fidelity prototype in Marvel and Basecamp.

At this point ION’s other designer was introduced to the project. Myself, the Business Manager and the other designer worked with RaisingIT’s designer to refine the prototype.

The prototype was signed-off and certified for production within the timeframe. RaisingIT then spent four weeks creating and testing the site.

We were then tasked with producing content for the site. For this phase the core team was myself, ION's other designer, the Business Manager, the Marketing Manager, and the Magazine editor (for the text).

The UI was informed by the recent rebrand that I led. The other designer used that project to inform the visuals on the site, letting the platforms capabilities dictate the final design.

For example, page banners utilised the “layering” concept but the texture layer was placed as a border:

The “strip” concept was only used in the page heading so as not to overwhelm users:

The fonts used were the brand fonts, Kepler and Calibri.

Almost one year after project instigation, the website successfully shipped in the Autumn of 2018:

My role now centred on producing assets informed by the template we signed off. These assets were created over a period of one week. Existing assets were updated.

After a few months we realised that change was required to certain text copy, the short course event pages, and the page banners.

The short course event pages would benefit from video trailers to increase engagement:

The page banners were getting difficult to produce due to the responsive nature of the website. When the layout changed to the mobile version, part of the page banner would be covered by the heading. Initially we overcame this by having large amount of white space either side of the image subject. However images were becoming sparse and the dependence on “Photoshopping” increased.

To overcome this I proposed reorganising the “layering” concept into three distinct horizontal sections. This overcame the ‘text covering image’ problem and needed no Photoshopping of the stock image.

We also iterated on the size of the text base layer, going from one large piece of text, to have the text repeating at a much smaller size. The benefit of this was it was less in your face and gave more opportunity to read the text.

The project was a good success when measured against all original project. The website was successfully produced and delivered on time. Sales saw a measurable increase, staff were trained, and user feedback was very positive.

Engagement figures were particularly pleasing, with an upward trend within two weeks of the go live date.

After a year, figures showed an increase in daily active users from 125 to 218, and just under 300,000 page views, with 82% of these from new visitors.

These numbers continued to rise steadily and, in 2020, jumped dramatically. This could most logically be attributed to the COVID19 pandemic which led to many people working from home, researching methods to keep healthy, and some looking for career changes. This was backed up with Google Analytic trends that showed the top 10 browsed pages being course related, rather than our usual 60-40 split between courses and clinic.

After the pandemic figures fell slightly but still in line with the upward trend.

At the same time ION sales increased for short courses, free webinars, and magazine subscriptions.

On the old website the short courses would sell around 80% of their tickets; with the new website it proved so popular it would oversubscribe and a waiting list feature was necessary.

The magazine (along with it’s redesign) also saw an increase in sales, with a print subscriber increase of 950% and digital of 4,759%

Anecdotally we also a lot more customers state they approached ION via the website.

During this redesign we used a behavioural analytics tool during the research phase, and again after the new site was live.

Analysis after the site went live was very positive:

• Before the new vs returning users was 57:43 and afterwards it became 72:28
• The average session increased by 107 seconds to 4min 52 sec
• People leaving the site in frustration (u-turns / rage clicks) decreased to just 2.36% for the year
• Phone and tablet sessions overtook desktop for the first time
• Heatmaps showed greater interaction with all aspects of various sections