We started with a fun user workshop with the aim to understand all their users journeys though the site. The journey was mapped so each persona could meet all their key tasks and goals in a logical order. We also thought of their emotions at every step so we could consider if they were frustrated or sceptical. Having the user personas and journeys allowed us to cull any pages that weren’t needed, make key pages in the user journey more prominent and allowed us to tailor the UI to their emotions.

The previous sitemap had lots of levels, and pages with varied, ungrouped content. To get to the final version (it took a lot to tame this beast), we discussed what pages could be grouped or removed, which gave us a good bunch for the card sort. The card sort helped organise and group all the pages. This highlighted we could group the navigation into 3 core areas. We then organised, simplified and adjusted the taxonomies over many revisions to make it as easy to navigate as possible. Once the site map was finished, it allowed us to do a content map, which organised the content so it was easy to find.

Our task was to establish the brand and represent the diverse cultures Wycliffe helped to unlock. Before committing to any design, we created a cool board that expresses our visual direction. We were inspired by the vibrant colours and patterns of diverse cultures. Using these with a clean typeface and people-focused imagery, powerfully brought everything together, making the brand resonate with its users.

In greyscale, we designed the backbones of the website that was tailored towards the user journey and content map. The benefit of wireframing was we were able to just focus on the structure, content, flow and hierarchy. After some quick iterations, we were happy with all the content being in the right place at the right time.

We applied the cool board styling to the wireframes to bring the site to life. Our main focus was to create a clean and powerful user interface. We used people-focused images, along with the patterns and colours across the site to reinforce the message and create visual interest on every page. The patterns were useful as we were able to layer them behind certain elements to create depth. We were pleased with how the Red, Yellow and Orange worked together.

To tackle the overcomplicated donation form, we had a workshop which firstly involved mapping out the previous form. From there, we were able to cull, simplify, group, rename and automate any steps. Normal donation forms just donate to the charity, however, this form required to donate to projects, people or where they needed it most. This added a layer of potential confusion and complexity, due to searching for projects and people. We solved this by leading with the most popular option (where needs it most) and then separating the projects and people into their own tab with extra UI complexity and functionality. This resulted in two tabs with each focused on its main task, making the form cleaner and more focused. We also found the most popular donation amounts, to reduce the user input.

The main task was to balance a really easy-to-use form with a limited amount of input and bringing in some signals that the user is making an impact with their donation. Ways we made it more efficient were using switches and radio buttons where possible to reduce typing, using analytics for popular donations and a postcode address finder. To highlight the user is making a change, we brought in a quote section, in some empty space, that tells users the change donations have had on them. Lastly, on the donation amounts, we visually showed the impact of that amount such as £10 can buy X,Y,Z.