Case studies –

Designing an organisation's website with a focus on usability and UX

UX design | UI design | Design systems

In my role at Bluefrog, I was tasked with the website redesign for Mothers' Union, a 140 year old organisation with over 4 million members worldwide.

Discovery phase

As lead designer, my responsibilities fell into multiple areas. From the discovery phase through to the final user interface designs, I utilised user research, usability, information architecture, client presentation and UX / UI design skills.


Mapping out user journeys


Reviewing existing website functionality - incorporating Google Analytics data





Remote usability testing to discover pain points




Tree testing - results analysis




Results of the second tree test using my proposed navigation




User research - building personas following user workshops and interviews

Armed with all the research and insights from the discovery phase, I began create the final interface design.

Interface design

It was identified during earlier stakeholder meetings that the organisation wanted to appeal to a broader audience and appear more welcoming. The visual style had to reflect this so I experimented with a series of colour, typographical and layout approaches.

The final design style is both bold and vibrant whilst professional and authoritative in appearance. The angled colour accents give a dynamic feel which, combined with a better use of white space, and bold typography allow the site's content (photography, video) to really stand out.

Design system

To ensure a consistent experience across the site, aid the development team, and help the organisation plan new functionality efficiently in the future, I created a design system to specify each component of the website, it's attributes and use.

I devised a new colour palette that complimented the existing blue and green with a collection of intense highlights. The colours could be applied sympathetically to each page's content. For example, a project page with a donate CTA could utilise "Action Pink" to grab attention whereas a more community focussed page could use the softer "Community Purple".


Design system - colour specification

I chose Delve Withrington's Highway Gothic inspired "Overpass" typeface. It looks great on screens large and small, and conveys just the right level of character when headings are set in "Black" font weights that it compliments the bold design style.


Design system - typographical styles

To counter many of the structuring and hierarchy issues identified in an earlier user workshop, I set out a series of 4 template layouts that would ensure a consistent, responsive experience throughout the site. I also specified breakpoints and the row/column layouts at different screen sizes to aid the development team.


Design system excerpt - displaying responsive templates


Design system excerpt - Button styles

Results

The website performance looks promising so far, in the first month after going live, the homepage bounce rate had dropped by 10% and the exit rate by 14% so we can assume users are more engaged.

The search function appeared to be less relied upon with 10,000 less page views and a broader spread of views across the rest of the site. This may indicate our new structure and navigation is working better.

Prayer resources were the 4th most visited section of the old website and frequently came up in user interviews and workshops as a heavily used area of the site to improve upon. It is now the second most visited section (after the homepage) and appears much easier to find and use with page views increased by 694%.

And finally the "get involved" section (incorporating the new hub page template and clearer labelling of the ways users can support the organisation) has a reduction in bounce rate of 31%. Given the importance of this section in fostering future income from donations, membership and fundraising events, this is very welcome news.

Get in touch

If you'd like to discuss working together or just have a question for me, please get in touch:

andy@brightblackcreative.co.uk