Architects of Life Site Redesign
Team
2 UX Designers: Aparna Kanawade and myself, supervised by our lecturer Mrs Elaine Lim
Tools
Figma
Adobe CC
Heuristic Evaluation
User Research
Information Architecture
Overview
We were tasked to research on Architects of Life, a social enterprise based in Singapore and come up with a design pitch and a redesigned final product based on our research.
Architects of Life is a social enterprise established in 2014 that specialises in developing the human potential of youth at risks / ex-offenders through outreach, developmental and intervention programmes.
The Problem
As a social enterprise, Architects of Life aims to reach out to ex-offenders and youths-at-risks through outreach programmes and increase public awareness of their organisation and the services they offer to the general public.
However, if users want to learn about social enterprise on their own, would their website contain the relevant information needed? How can we convince users that it is a credible organisation with a good track record?
The Solution
We redesigned the website with one goal in mind — making sure that the information about Architects of Life is detailed, yet easy to understand for all users.
By narrowing down the organization's focus to the public and ex-offenders, we aim to inspire confidence through a detailed breakdown of what the social enterprise does, and offering opportunities to engage with their services, so that it can leave a positive impact on their lives.
All New Landing Page
By using a light colour palette and positive imagery of ex-offenders, we aim to give the site a welcoming presence.
The site copy is mostly rewritten to better explain what the organisation does. Additional information is also added to give users better knowledge on how they achieve their mission.
A New Navigation Menu
The navigation menu is redesigned to give a clear separation between the services and programmes provided.
A Brand New Programmes Page
We reworked the "Academy" page into "Programmes" by removing volunteer training programmes. By focusing on ex-offender programmes, users will be able to better understand how Architects of Life can play a role in helping ex-offenders and seek for assistance if needed.
Emphasis on Credibility
A better sense of credibility on the site by placing an emphasis on showing the different collaborators and news media outlets that Architects of Life is featured in.
The Process
Double Diamond Process
We decided to use the Double Diamond process. We aim to incorporate the key phases of Discovery, Definition, Ideation and Implementation into this project.
Heuristic Evaluation
We began by conducting a heuristic evaluation of the current site in order to analyse its current usability. Our findings revealed the following factors, which we believe leads to a bad user experience.
Usability Testing
In order to prove our findings, we decided to do usability testing with users to see if our findings are accurate. Our testing revealed that users are unable to navigate to some of the services & products they offer and the comments received validated our findings.
Design Pitch
Using the data collected so far, we gave 3 design pitches that we thought best to be the solutions for the site.
Architects of Life will pick one design option to shortlist based on their preferences.
2. Ex-Offenders are just like us.
Revamping the site with a lighter colour palette.
Showing community spirit and focusing directly on the organization, its tours, and option to volunteer.
1. One site for two audiences.
Two Landing pages for different audience with different needs.
Simplified, larger fonts & buttons for technologically inept audience.
3. An App for those who needs it.
AOL iOS and Android app which contains entire AOL’s information.
In this app, users can use all the services provided and tap into an integrated system for volunteering and donations.
In the end, the second pitch was selected.
AOL felt the most satisfied with the second pitch as it resonated with what they aim to achieve. However, they noted that the navigation menu was still confusing, and the redesigned site looked no different than their current site. We took note of the feedbacks and proceeded onto our research.
In the end, the second pitch was selected.
AOL felt the most satisfied with the second pitch as it resonated with what they aim to achieve. However, they noted that the navigation menu was still confusing, and the redesigned site looked no different than their current site. We took note of the feedbacks and proceeded onto our research.
Stakeholder Interview
Interviewing the executive director of AOL.
We conducted an interview with Architects of Life's executive director to find out more about the organization and what issues they face. It was revealed that they use the site as a source of information for the general public instead of would-be volunteers. We also gathered more data about AOL that they wanted to put in but did not due to time constraints.
Stakeholder Interview
Interviewing the executive director of AOL.
We conducted an interview with Architects of Life's executive director to find out more about the organization and what issues they face. It was revealed that they use the site as a source of information for the general public instead of would-be volunteers. We also gathered more data about AOL that they wanted to put in but did not due to time constraints.
User Research
Conducting research and synthesizing data
Next, we interviewed 6 users of various backgrounds in order to understand the motivations and behaviours behind someone who might be interested in social enterprises. What do they know about social enterprise? Do they contribute to social enterprises, if so, how? Do they think they have been effective in what they set out to do? We gathered the 3 following insights after synthesising our findings with affinity mapping:
User Research
Conducting research and synthesizing data
Next, we interviewed 6 users of various backgrounds in order to understand the motivations and behaviours behind someone who might be interested in social enterprises. What do they know about social enterprise? Do they contribute to social enterprises, if so, how? Do they think they have been effective in what they set out to do? We gathered the 3 following insights after synthesising our findings with affinity mapping:
1.Readability
Site copy is hard to understand
Users do not know what the organisation’s vision stands for.
Users have difficulties understanding the navigation sometimes. Eg: XO Project.
2. Authenticity
Site look & feel is not what as expected of users.
Eg: Users said that it looks like an ad agency & drug rehabilitation site.
3. Motivation
Users prefer contributing through money than time.
2. Authenticity
Site look & feel is not what as expected of users.
Eg: Users said that it looks like an ad agency & drug rehabilitation site.
3. Motivation
Users prefer contributing through money than time.
1.Readability
Site copy is hard to understand
Users do not know what the organisation’s vision stands for.
Users have difficulties understanding the navigation sometimes. Eg: XO Project.
Persona
Using the insights found, we created a persona that represented the goals and behaviours of my target demographic in order to understand their motivations, goals, and pain points.
Bella, 30
Bella, 30
Goals
- Help ex-offenders without compromising her daily life
- Hear more about social enterprise news so she is kept in the loop
- Have a better understanding of ex-offenders through social enterprises
Challenges
- Finds social enterprises’ mission and goals hard to understand
- Does not understand terms used in social enterprises
- Social enterprise websites do not look like what they should be
Behaviour
- Busy with work and personal life. Unable to commit time to help
- Occasionally donates money for social cause.
- Very active on social media
Persona
Using the insights found, we created a persona that represented the goals and behaviours of my target demographic in order to understand their motivations, goals, and pain points.
Bella, 30
Goals
Help ex-offenders without compromising her daily life
Hear more about social enterprise news so she is kept in the loop
Have a better understanding of ex-offenders through social enterprises
Challenges
Finds social enterprises’ mission and goals hard to understand
Does not understand terms used in social enterprises
Social enterprise websites do not look like what they should be
Behaviour
Busy with work and personal life. Unable to commit time to help
Occasionally donates money for social cause.
Very active on social media
To summarize Bella's problem in a statement:
Bella, a 30 years old working in a Trading company, needs to find out more about the social enterprises’ goals and services, so that she can understand them better and make an informed decision to contribute to the organization.
Key Features
With 2 weeks remaining, we decided to narrow our focus on 3 key features we will have on the website. To do this, we did an analysis of our persona along with the executive director of AOL to find out what common goals they have, so that we can find the sweet spot between user-centric and business-centric design.
1. Make the copy easier to understand.
2. Flesh out about ex-offender training programmes on the website.
3. Provide clear landing page & better navigation.
Key Features
With 2 weeks remaining, we decided to narrow our focus on 3 key features we will have on the website. To do this, we did an analysis of our persona along with the executive director of AOL to find out what common goals they have, so that we can find the sweet spot between user-centric and business-centric design.
1. Make the copy easier to understand.
2. Flesh out about ex-offender training programmes on the website.
3. Provide clear landing page & better navigation.
User Flow
With Bella being our primary user persona, we drew up a user flow using a journey Bella would take as she interacts with the various touch-points.
Wireframes
In the interest of time, we skipped the sketching process and moved on to create low fidelity wireframes. Along the way we made iterations to our designs based on the feedbacks we received.
Information Architecture
Throughout the design process, we made 2 touch points — the first with AOL, the second with our mentor. We struggled to name our training and services categories for the longest time. Eventually, we decided that since our website will focus on ex-offenders and the general public, we will forgo the volunteers' training programmes entirely. This allowed us to arrive at our final navigation menu.
Style Guide
Our design pitch's style guide was not favourably received. The client felt that the colours being similar made the overall look of the site no different than what they had. We took the feedback in mind and decided to incorporate more accent and neutral colours into the style guide, while deciding not to stray too far from its original look by picking typefaces that were similar, yet less harsh on the eyes.
Hi-Fidelity Prototype
After finalising all the issues, we created a high fidelity prototype.
Information Architecture
Throughout the design process, we made 2 touch points — the first with AOL, the second with our mentor. We struggled to name our training and services categories for the longest time. Eventually, we decided that since our website will focus on ex-offenders and the general public, we will forgo the volunteers' training programmes entirely. This allowed us to arrive at our final navigation menu.
Style Guide
Our design pitch's style guide was not favourably received. The client felt that the colours being similar made the overall look of the site no different than what they had. We took the feedback in mind and decided to incorporate more accent and neutral colours into the style guide, while deciding not to stray too far from its original look by picking typefaces that were similar, yet less harsh on the eyes.
Hi-Fidelity Prototype
After finalising all the issues, we created a high fidelity prototype.
Usability Testing
With our prototype completed, we quickly moved on to usability testing to see if our users are able to complete the tasks given.
1. 5 out of 5 users were able to find out and accurately explain what AOL does and provides as an organisation.
However, 2 users avoided the home page entirely and went straight to “Who We Are”, which did not provided any information about AOL's services.
2. 4 out of 5 users were able to book a tour (named Triad Trails) using the site.
However, 1 user did not knew what Triad Trails was.
3. 5 out of 5 users were able to find out where to donate or volunteer. :)
4. 5 out of 5 users were able to find the ex-offender training programmes in order to refer to someone in need.
However, 2 users navigated to “Get In Touch”, as they explained that the ex-offenders probably need more urgent needs than to join a programme. 1 user also mentioned that the Programmes page is written in 1st person, which implies only ex-offenders will need to read through the page. 1 user also asked if there is any prerequisite for this program as well as cost.
Design Iterations
With the feedback received, we moved on to reiterate our design.
1. Giving more context
We included a “How We Help” section that mentions our programmes & tours in the "Who We Are" section, in case any users skip reading through the home page.
2. Being more elaborate.
We opt to put a subtle addition by including the word 'Tour' into Triad Trails as it gives better context on what it is.
3. Programmes
We opt to put a subtle addition by including the word 'Tour' into Triad Trails as it gives better context on what it is.
1. Giving more context
We included a “How We Help” section that mentions our programmes & tours in the "Who We Are" section, in case any users skip reading through the home page.
2. Being more elaborate.
We opt to put a subtle addition by including the word 'Tour' into Triad Trails as it gives better context on what it is.
3. Programmes
We rewrote the text to show that we are addressing the public. And included any prerequisite as well as cost for the programmes.
