Zero Waste SG web app
A case-study project that involve user experience design on a responsive web application
UX techniques used in this project:
Content Audit
Contextual Inquiry
Feature Prioritisation
Heuristic Evaluation
High-Fidelity Prototyping
Information Architecture analysis and reconstruction
Organisation Analysis
Persona Crafting
Service Design Blueprint
Tree Jack Test
User flow mapping
User Interview
Usability Testing
Wire-framing
Project Brief
The students of UXDI were to utilise the knowledge of an UX designer to redesign the website for an NGO, keeping in mind the target audience and purpose of the website.
Disclaimer: The brief for this project was created by the teaching assistants at General Assembly (GA), Singapore to imitate a real-life experience. The contents and author of this article is not affiliated with the company/organisation mentioned.
And the NGO assigned was
Background information about the NGO
Zero Waste SG first started in year 2008 as a website providing tips and resources regarding to waste minimisation and recycling. In year 2015, it was officially registered as a non-governmental organisation in Singapore. Zero Waste SG aims to promote education and engagement on the 3Rs (Reduce, Reuse and Recycle) among individuals and households; increase waste minimisation and recycling among businesses and organisations; and reduce specific waste.
UX Research
1) Organisation Analysis
An NGO is very different from a business organisation. So as to understand Zero Waste SG, a framework adapted from the Golden Circle by Simon Sinek was used.
To determine how successful ZWSG is in achieveing their goals, many articles were looked through, mainly from the government sources. From the resources gathered, ZWSG is found to be still far from reaching its goal of creating a circular Singapore economy.
2) Content Audit
In 10 years, Zero Waste SG had grew from solely a website providing waste minimisation tips and resources to pushing various initiatives in Singapore. But, the design of their website is too dated which can affect the usability and functionality of their digital platform. And, it was hypothesised that this is a big reason for Zero Waste SG falling way short of their goals. Hence, a content audit exercise was done to map out the different pages of the existing website. And the following are what was found:
Large amount of content on the landing page is asign of poor content hierarchy and first-time users might get overwhelmed with the number of content.
Every page on the Navigation Bar has a comment section. Which was found to be unnecessary as it leads to cluttered features on each page.
3) Heuristic Evaluation
To further analyse the website’s usability in greater detail, a heuristic evaluation exercise using the LEMERS framework was done.
Learnability
Mystery meat links found on the landing page
Poor content hierachy in the landing page as articles of Recycle are below the other 2Rs
Efficiency
Unconventional location of search bar at the bottom of the pages
Location of comment textfields is not intuitive to users as it is under a long list of comments
Memorability
The oldest comments are displayed first in the comments section
The same textfields are used for both replying to existing comments and adding new ones
Error Management
Input of forms on this website do not come with placeholder hints
Satisfaction
Copy used for the headers on the navigation bar are very misleading
4) Contextual Inquiry
To prove the hypothesis, a contextual inquiry test was conducted with 4 different individuals (pictorial response in the same order as the following):
An individual who practices waste minimisation at home
A full-time staff of Zero Waste SG
A managerial-level personnel in a business organisation
A volunteer at the grassroot level
5) User Interview
Zero Waste SG’s goal of bringing about a circular economy in Singapore requires the collective effort of the people in Singapore to realise. Hence, to understand why ZWSG is still far from reaching its goal despite an existence period of 10 years, the responses from the public was needed.
After gathering all the research findings, an affinity mapping was done to organise the users’ responses. And the following were insights from the affinity map:
6) Synthesis
Up to this point, the research findings had shown both the user needs and organisational goals. The following problem statements are what had been synthesised from the research.
Users
Users who care for the environment learn more about Waste Minimisation (WM) through multiple sources of information which may not always relate to the local context.
Users are not aware of WM processes and campaigns taking place around them. They need a local platform which easily provides credible, relevant, and comprehensive information about the processes and campaigns they can participate in.
NGO - ZWSG
People who care for the environment already practise Waste Minimisation at the individual level. However, their efforts alone are insufficient to bring about a Circular Economy in Singapore.
Zero Waste SG needs a way for people to come together as a community because a collective effort leads to a bigger impact.
Conceptualisation
1) Solution
The balance between users’ needs and organisation’s goal is where the value of user experience design is found and this is also where UX designers comes into picture.
Solution Statement
By designing a better service that Zero Waste SG provides — through clarifying a more personable branding made evident on a user-centric digital platform — people can trust Zero Waste SG to foster and lead a community who cares for the environment through education and engagement.
Both problems can be addressed through a redesigned user-centric website whereby
Users can easily locate and digest relevant information about Waste Minimisation
Zero Waste SG would be able to foster a community through education and engagement
2) User Personas
As the site’s main purpose is to provide a digital touchpoint to educate users on waste minimisation, before engaging them in a community to participate in and propose initiatives together. 3 user personas are crafted, with Eric as the main persona.
3) Service Design Blueprint
As Zero Waste SG’s main target audience are the individuals who are interested in waste minimisation, the service design blueprint for ZWSG was created with the primary persona’s user flow in mind. With this blueprint designed, opportunities whereby ZWSG can improve its service could be determined.
Such oppourtunites includes:
Providing a platform on the website for users to propose campaign ideas to engage the public in waste minimisation
Organise meet-up sessions for information sharing to better foster a community for those who cares for the environment
4) Information Architecture
With all the information gathered through the research, the design of the new site’s IA with the following changes was proceeded:
The full navigation bar was not shown in the navigation headers of the current website
This is not user-friendly since users prefer to see all their options at one glance. Hence, for the new site, the full navigation bar will be shown.
The landing page is very content-heavy and looks messy
Turns users off and defeats the purpose of educating and engaging users from this digital touchpoint. Changes to the content and content hierarchy were made so users will be intrigued to stay on the website longer.
A comment section on every webpage can be confusing
Users do not know which webpage to leave their comment on. A “Community” navigation category, will be dedicating to this particular need.
5) Wireframes
Based on the research synthesis, wireframes were created to translate the solution to the website’s design. A total of 6 wireframes were created for the following webpages, as these are the pages were needed for the primary persona’s user flows:
Website’s landing page
Webpage that displays general information about ZWSG
List of articles for educating users on the 3Rs
Discussion platform for information sharing
Webpage showing all local waste minimisation initiatives
Contact details webpage
Evaluation
1) Tree Jack Test
To test if the IA design works, the participants were given 6 tasks. 13 participants of different demographics were recruited to help with the organisation of website content.
The tree jack test seems fine since users are able to get by with the tasks easily. And the overall tree jack test results seems fine with most tasks having a success rate above 50%.
Except for task 2: “ I have an idea for a new campaign. And I wish to propose it to others. “
The initial IA design idea was to have a webpage each dedicated to discussion platforms for comments, new campaign proposals and hosting of meet-ups. However, 86% of the tree test participants found it more intuitive to propose new ideas in a discussion platform. So, the “Community” navigation tab, will have 1 webpage dedicated for all 3 features.
2) Usability Testing
23 users participated in a round of usability testing with the use of the low-fidelity wireframes. Their feedbacks were noted on post-its, and found at the side of each page and element.
Some of their feedback includes:
Not understanding the large real estate given to the Instagram content on the landing page
Needing the headers on the articles and initiatives listing webpage to be more prominent
Preferred to have some form of navigation breadcrumbs
3) Feature Prioritisation
With the feedbacks received during the usability testing with the low-fidelity wireframes, the responses were curated. And after curation, the main responses were plotted on a 2x2 matrix. This matrix was used to evaluated the impact each feedback had against its time-cost.
The whole project duration was only 2 weeks long. Considering the limited amount of time given, there is only a limited amount of changes that can be implemented. As there was no sufficient time to implement changes for a perfect responsive web prototype. Hence, time was invested mainly on implementing only the changes that had a high impact. And the rest of the time was spent on the high-fidelity prototype.