The Lorna Young Foundation
Overview
A UI redesign and branding overhaul for a charity promoting ethical trading. I was to keep all the functionalities, structure and content the same, only updating the visuals and interface where necessary. It also needed to be responsive.
The brief:
Redesign a charity’s website to improve the visual design and User Interface
Must be responsively designed, allowing for viewing across web, tablet and mobile
Document design decisions in a styleguide for elements such as typefaces, colours, layouts, spacing and components
Key findings:
Responsive design was complex, but I took away several aspects of “best practice” for future reference
Brand identity goes deeper than just a logo. The values and attitude of a company are reflected in every single visual aspect, from the fonts to the space you don’t even use
The Project
First look
Giving the site the 5-second test — briefly viewing a page to determine whether you can effectively answer the question “what is this site about?” — immediately led to a few issues.
The problem with being unable to quickly determine what a project is trying to communicate is that users are easily deterred, and poor or complicated design will lead to higher bounce rates. For a charity who rely solely on donations, people clicking away is going to be extremely detrimental.
The biggest problem was that the homepage itself lacked focus.
There was no descriptive copy telling you what the foundation does, or why they are doing it.
There was no Call To Action (CTA) — essential to persuade visitors to your site to take a particular action that benefits your company. Again, with The Lorna Young Foundation being purely funded by donations, lacking a prominent CTA is counterproductive.
The general visual style was somewhat drab and outdated.
The site was also not responsively designed, and difficult to access on mobile.
Ideation
I sketched up some ideas for layouts that I felt might solve these problems.
Ideation for updated site layouts, taking breakpoints into consideration for responsive design
By offsetting the hero images of the carousel to one side, I could free up space for some simple copy, allowing me to let users immediately know, in just a few words, why the site they are on is important and what they can do to help.
The multiple blog post text links have also been combined into a uniform gallery underneath. It was important to ensure that the title of this section always appeared above the “fold”, so users knew to scroll down for additional content.
I designed predominantly for three viewports — large, medium and small — representing three main devices
Branding
The idea of a “foundation” conjures up thoughts of respectability and prestige, and I wanted the new design to reflect this idea of a time-honoured institution. I kept their base colour of the ocean green, but paired it instead with a more elegant mustard accent, inspired by the sea and sand of the African coasts.
I stripped away all the background textures and shapes, and spaced out the content. This abundance of whitespace, alongside the new Cantana One font, lends the design a premium feel.
The redesigned homepage. A prominent “Support Our Work” call to action now immediately visible under short, sharp copy.
The ‘Our Programmes’ page, allowing the user to click through to the project they are interested in, rather than scrolling though each one in full.
The Medium and Small viewports, for tablets and mobile
Conclusion and learnings
The responsive element ended up being more challenging than I anticipated, as the offset nature of my layout made knowing which assets to shrink, and in which order to move them, somewhat tricky.
Ultimately I was able to retain the asymmetrical arrangement up to a point, but I don’t feel the design was compromised on the smallest viewport. I was told it might be easier to design the smallest one first — I now understand why.