Introduction
This phase was about understanding who our potential audience would be. To understand, I needed to learn about the background of the charity, what they’ve done and what the goals were for this foundation. Stakeholder interviews and online research allowed me to understand the typical needs of audiences like the ones described by the stakeholders.
Stakeholder Interviews
Stakeholder interviews were 30 to 45-minute long, semi-structured, in-depth meetings. I hosted constant in-person meetings with the foundation’s CEO and remote meetings (Coventry to Los Angeles) to interview & question the main stakeholders.
It was necessary to discover what stakeholder goals and expectations were. It would allow me to understand and define potential target audiences. The main goals were:
- Increase in donations.
- Attract more partnerships & investors.
- Draw in new volunteers.
Introduction
Interviews with stakeholders provided enough information to narrow down our target audience and validate their behaviours and expectations with secondary research online.
As mentioned previously, there was already an existing Shopify template archive of the charity website that needed to be broken down and re-designed. Also, to optimise the website design to meet our goals, I found existing, successful charity websites and compared the archived website design to them.
User Types & Target Audiences
Three types of website visitors were identified, being donors, volunteers and partners. Donors were further broken down into three types, which are listed below.
Online Research
I studied the fundamentals of successful charity websites to ensure I didn’t overlook key features expected of this genre. It was useful because features exclusive to charity websites have tried & tested reasons that convert into desirable actions, i.e., donations.
I read countless articles explaining how to develop a design strategy for charity websites, what to avoid and what to consider depending on the type of charity. At this stage, I uncovered dozens of key features and techniques that weren’t considered at inception.
Comparative Analysis
Once I gathered the websites I wanted to focus on, I inspected them in detail and compared it to our current site to see what was missing for successful traffic conversion. Analysing multiple charity websites revealed some design patterns/ideas that I’ve considered in the final design. Different features have different goals, and the type of imagery and text plays a big part in it too, which has been noted.
Summary
I presented my findings and opinions to our founders and set a new course of action with updated rationale and milestones. The next stage is to map out the ideas for execution.
Information Architecture
This is the information architecture of the new Boxing is Love website from a top-down approach.
Paper Sketches
Sketching paper wireframes lets me get through different ideas quickly and get to prototyping sooner. Below, I’ve shown two examples of my sketches for the Homepage and the About Us page
Wireframes
I usually sketch on paper or on my iPad. Making wireframes on my iPad is best for sharing ideas with other people, for example, these wireframes were shared with my PM to oversee my progress.
Making wireframes assists with visualising how components and general content will be laid out, but it also helps with establishing the user flow & the user journey. In the wireframes shown below, I used arrows to indicate how the user would travel between the pages.
Just like sketching on paper, this is a way of rapidly going through ideas and understanding how screens will interact with one another, which saves a lot of time. Afterwards, I recreated the wireframes on Adobe XD to start the process of creating higher-fidelity prototypes.
High Fidelity Prototypes
I used Adobe XD to create high-fidelity designs for mobile and desktop. The designs were made based on feedback from stakeholders and the online research conducted earlier on. Also, these designs were shared with stakeholders and tested frequently.
Design Hand Off
Once the designs were ready, design documentation was created to share with a newly assigned engineer so time was used more efficiently. Design documentation makes hand-off easier because if there are any concerns with sizings, fonts, colours, opacity etc, all answers are set in one place.
Usability Testing
Having meetings with stakeholders was a regular occurrence to monitor progress. At different stages of development, usability testing was conducted iteratively with the senior team either in person or remotely for them to give their feedback on the experience.
Changes were made to accommodate feedback, new research, time changes and resources. All changes were tested to ensure they were feasible too.
UI Design Testing
To collaborate effectively, regular testing was done with an engineer. Whenever he would finish developing a web page design, I could closely compare the designs with the current development and provide feedback to ensure the design translates over correctly. Because of my programming background, if I had any doubts about colour or font etc, I would inspect the webpage’s code to confirm any assumptions or spot places for improvement. We kept track of this using a spreadsheet, a preview of our collaboration is shown below.
