UX Case Study: Asylum Links Information Outreach Website
Asylum Links Information Outreach is an aid organisation focusing on reaching refugees with their one of their most valuable and sadly, most underserved resource — information.
Their website needed to be doing more for them as an organisation and for the incredible work they were doing, they needed to be appealing more to a western audience with their website in order to attract more volunteers as well as donations and grants, and this is what we were charged with.
As a freelance project for our client an information outreach refugee charity Asylum Links, we were charged with the challenge of redesigning their website intended for a western audience
The Team:
Scope: 2 Weeks
The website they had previously been updating through Wordpress was outdated and was in serious need of an updated design to help them with their primary business objectives of the time — to gain more volunteers to join their cause and to gain donations and grants — in order to achieve this they needed a website that made them look far more legitimate and would incite confidence in both potential volunteers and potential donors within the cause.
One of the biggest issues that were prevalent within the previous website was the fact that what the charity actually did was vague and unclear, and we knew we would have to sort this out first.
Business Goals
1. Get Volunteers
2. Get Donations
3. Appeal to western Audience
4. Social media ecosystem
5. Be inspired
We began our research by analysing the current website for its strengths and faults so that we could have a better idea of our starting point, and therefore created a site map and customer journey map.
Existing Site Map:
Customer Journey Map of Existing Site:
We tested the original Asylum Links website to see how a user might experience it, so we could learn the negative and positive points of the website.
Competitor Customer Journey Map:
We tested one of our competitor’s website, to learn about what worked and did not work for the users experience.
User Research
We interviewed a mixture of potential users and existing users, as well as people that were already deeply involved or members of the organisation. Within our interviews we focused particularly on the aspects of the website that we already knew were problematic as well as attempting to understand some of the core underlying elements that would attract people to donating or becoming volunteers.
Affinity Diagram
Results:
There were several points that were prevalent throughout our interviews -
From this, we constructed the user goals with potential features that acknowledged these goals.
We did comparative competitive research in order to gage how other websites were going about getting volunteers and donations — interestingly (or perhaps, obviously) many of the features and design values of the websites we looked into were in keeping with the user research we conducted — transparency was an important theme that was ongoing through our process.
We constructed design values in order to guide our process.
An important thing that we had to keep in mind how the organisation functioned on a practical level — the work that they were doing was done predominantly online and they connected to their clients through their Facebook page, which was a process they were happy with and were adamant about keeping intact.
Because of this we understood that we didn’t necessarily have to focus on their clients themselves as a key persona on the website but did have to acknowledge the fact that they may be guided towards the website, and needed to create an ‘ecosystem’ in which they would intuitively be guided back to the Facebook page if they came to the website for help.
As we began the planning stage we constructed strategy sheets for the business goals in order to ensure that we were on the right track in acknowledging them, so we began with these sheets in order to create more succinct feature lists.
We constructed a persona based on the volunteers that we had talked to.
Based on a lot of the contextual research that we had done into charity based websites we came across studies that concluded that the biggest problems that arose with the information architecture within charity websites were that they had to split focus into three different persons — the clients being helped, the donors, and the potential volunteers, and because of this many of them had a cluttered and unfocused website that we really wanted to avoid with Asylum Links.
Because of this we decided that the smartest path to take was to focus on one persona and encapsulate certain elements of the other persona (being the doner) and then have some clear calls to action throughout the site that would guide potential clients back to the Facebook page, in this way being able to focus our information architecture and have a clear vision for the site that wouldn’t make it cluttered or unfocused.
This is the persona we constructed:
Translating to Design
MVP
Site Map (New)
User Flow
From this we headed into the design phase.
We started to plan out our designs through sketching, the results are shown below.
From this we moved into mid fidelity — keeping in mind that we had to create a responsive website and so therefore had to design for both web and mobile.
In testing, we found that some of the issues arose were mostly centred around the clarity of what the organisation did in the first place so we knew that we had to make it much clearer to the user from the moment they arrived on the homepage.
Many of the issues that arose were also specifically to do with the copy and labelling — which we later spent some time developing for the sake of clarity.
Calls to action and the prioritisation of these were also a factor — we moved the call to action to volunteer from the hero image at the top of the page and changed it to ‘About Us’ — it was incredibly important from our design specifications that the organisation was humanised and that the user felt an affinity to the people behind the project and not only the cause itself.
Branding — Logo
We redesigned their logo in order to give them a better appearance and better sense of legitimacy as a whole, which also encapsulated more of the brand identity that we tried to infuse into the site itself — minimalist but exceedingly clear in what they do. We took away the word ‘refugee’ from the title — which was something that the client was extremely happy about as it was a generalist term that didn’t encapsulate all they did as an organisation. We gave them two options for colour schemes for the logo in case they wanted to add a bit more colour to the branding.
High Fidelity Prototype
Click here for the InVision prototype of the high fidelity version of the website:
Upon reflection of the project I believe that we did a successful job in following the processes we needed to in order to implement the features that were best suited for what the organisation is trying to achieve.
In terms of further development there were one or two areas that we could see ourselves were perhaps more suited to them as they developed as an organisation and had more team members to support the website, such as other fundraising options, a video section, and a more specific breakdown of the allocation of funds — such as we’d seen on competitors websites.
The client was pleased with the final product and we’re confident that it’ll be a fundamental element in the progression of the organisation’s amazing work. As a team we were incredibly humbled and impressed with the work that they undertake and the positive attitude that they encompass as a team.
In fact, if you’ve checked out our prototype and were just as inspired as we were by this great organisation please do head on over to their current website (if ours has not been implemented yet) and please make a donation.
Thanks for checking out my case study, please do have a look at my other ones, and take a peek at my portfolio (my dog makes a cameo!)
www.siobhanweber.com
UX/UI Designer
