UX, Content Strat & Branding for good

Website redesign for the amazing charity empowering displaced women and girls in refugee camps: The Lotus Flower due to reduced engagement on existing site. Full article on my Medium covers my full UX process from teasing out their core identity and communicating it effectively to testing niche concepts with limited resources and non-linear customer journeys. Here however, I want to take you through the concise version with a focus on the visuals. 

Client Website Redesign
Team: Joyce Lao (Project Management), Katerina Samoilis (Research Lead) 
Client: The Lotus Flower Charity
My role: Design Lead
Methods: Competitive analysis, surveying, design workshop, client consultation, 1–2–1 Interviews, focus group research/testing, Sketch App prototyping, user testing with clickable prototype using Invision app.

Discover

In our initial phase we reframed the brief asking a basic question: if this project is a success what will have changed?

Given that the charity does not address for the users of the website a higher Maslovian user ‘need’ as such we had to think about how as UX designers our methodologies would apply to this project. The Jobs to be Done framework was more instructional for our project as it focuesses on the specific journey for a user who lands on the site. 

We got to know the charity sector, the views of charity workers and donors as well as social media advocates in outreach that included a survey, one-to-one interviews and online forums. From these we built up a strong picture of what comparable websites features and visual identities resonated with charity audiences and what activities their websites were most useful for according to their users. Amongst the most useful activities was the initial short charity engagement survey we put put. From the 160 respondents, we were able inform our persona development and identify individuals for further interviewing and user testing. They also confirmed the critical prominence of a charities' website to their online presence, donation funnel and brand recognition.

Define

Problem: At the moment the brand and strategy is not clear enough to encourage site visitors to donate or get involved, and the information architecture is not reasoned, further confusing the user.

This is resulting in reduced engagement both in donations and social through avenues such as social media, newsletter signups and enquiries/direct communication with the charity. Teasing out that the aim was to create a clear, strong emotional journey for the site visitors so they will be able to connect with the charity and want to donate or otherwise get involved with the cause, was vital in understanding the user experience issue we were setting out to solve. It rapidly became clear that in order to improve the UX, we would need to work on the content strategy and branding as well to achieve our aim, themes explored in my medium article.

Hypothesis: We believe that by prioritising the correct information in a visually arresting format the charity's vision, mission, background and projects will become discoverable and clear for the visitor to understand. This will engage site visitors and encourage them to take action to help the Lotus Flower cause. 

Persona Development

From the google analytics, our survey and interview respondents, industry papers and Taban’s own experience of donors we were able to draw out our three main personas:

 

Susie's User Journey

Susie, the most frequent but low value donor, was identified as our primary persona and having affinity mapped the responses we had from testing the current site we were able to trace her journey of wanting to support the Lotus Flower in their mission on the current website. Various pain points en route were identified and the result is clear that most users are coming up against lockgates that cause them to abandon and seek another charity doing work in this area.

Design workshop through to initial sketches

The next step process was a workshop with Taban to define the information architecture of the new website. Firstly we identified the key static pages, then prioritised the content needed within these and across the website with a feature prioritisation grid that was itself drawn from work where all possible pages were called out and given a post-it, the possible features listed underneath and then voted on for the most important features to consider on each page (as below).

feature proritisationfeature proritisation

Initial Sketches and Usability Testing 

The feature prioritisation informed our initial timeboxed sketches. After we pitched our designs we repeated the process to include the ideas we had most admired or ditch those that drew criticism. Finally all the sketches were laid out and preferred designs were voted for (as above) for an early indication of what worked or was perceived as appealing. The visual structure in the first paper wireframes for the Lotus Flower as such already reflected substantial critical analysis which was then refined through continuous usability testing.

usertesting_iterationusertesting_iteration

Information Hierarchy

The website was restructured to improve impact and clarity. This work is most applicable to the Homepage that also served as the archetype for many of the other pages as it is both the landing page and contains many repeated elements and styling across the site.

When the homepage is broken down as below you can see the visual prominence that we ascribed to the charity mission statement (this was also refined by us in the branding session). Directly underneath, the three motion pillars of the charity are highlighted. Key statistics were nested directly underneath, in colour blocked boxes to add credibility and urgency through clearly delineated bite size information that could also be shareable. With this simplification the option to expand allows engaged users to dive deeper when desired but doesn’t disrupt the easy assimilation of information or the user flow by introducing large text blocks where the user hasn’t requested more information.

Current Projects and upcoming Events show how active the charity is and a carousel of partners of the charity reinforces the credibility of the organisation with appealing current imagery illustrating their activities. The footer now contains the option to subscribe to the charity’s Newsletter to keep up to date.

Visual Design and Brand Identity

With the brand identity of the website, we kept elements of the current look and feel such as the Lotus logo and warm colour scheme. We emphasised the reds in a way that was warm but not girly and include an accent colour for emphasis. The logo was simplified and the more impactful reds added to the colour palette are exotic and evocative of crimson hues — these conveying a sense of urgency and importance being the colours of blood. The typefaces used were Montserrat and Lato, both visually clear and modern to tie in with the demographic and feel of the brand.

visual_identityvisual_identity

Deliver

Interactive prototypes: view the interactive prototype of the new website here.

Bearing in mind mobile users, both in the field and for those all important first impressions for busy users or the younger demographic we took pains to show how the modular layout we used in the desktop prototype translates well onto mobile screens. The titles are maintained, with the topline text revealed by clicking on the block. Block elements now stack vertically as opposed to horizontally.

Regarding the other key users, Erika is encouraged to help the charity through volunteering and sharing the cause via social media, while Jeremy is ensured of the credibility and impact of the organisation and will set aside some of his company’s annual budget to aid the cause.

The redesign was positively received by Taban and is currently being implemented.

[unex_ce_button id="content_i89kdvi40" button_text_color="#f7dce4" button_font="semibold" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="4px" button_border_color="#f7dce4" button_border_radius="5px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#f7dce4" button_border_hover_color="#f7dce4" button_link="https://medium.com/@ionaselig/ux-content-strat-branding-for-good-f5eafe9fb289#.fmuuavafu" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Read Full Article[/ce_button]