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.

As lead designer in our digital team, my project responsibilities were quite broad in scope. From the discovery phase through to the final user interface designs I utilised user research, usability, information architecture, client presentation and UI design skills.

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 evolution of a homepage

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.

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".


Colour palette:

Colour palette in use:

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.


Typography 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

Utilising the power of Bohemian Coding's Sketch app, I created a design system for all elements of the interface. This acted as a "style guide" for developers, designers and stakeholders, ensuring consistency across the site and enabling us to re-use elements when adding new functionality therefore reducing the time and cost of future developments.


Design system excerpt - Button styles

Mobile view:

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