WWF website redesigned to better aid users in
becoming more eco-friendly

WWF-SG wants to inspire their website visitors to be more committed in helping the environment, as individuals and as part of a community of eco-volunteers, but a confusing navigation system and a lack of useful content is getting in the way of that. My team and I redesigned their website to provide users with a way to reach relevant content in an easier and quicker way.

My responsibilities

Conducted heuristic evaluation
Developed personas
Wireframing and visual direction
Prototyping

Duration

2 sleepless weeks

Problems with the current site

At a glance, we can see that the site is saturated with content, which is often quite lengthy. This poses a problem for users as it would be difficult for users to quickly locate the content that they are most interested in. Also, it would take a considerable amount of time and effort for users to learn how to comfortably use the site, not to mention be able to take away some practical knowledge with them so they can reach their goal of being more environmentally friendly (don't worry, this statement is validated by research!).
What the site currently looks like

Discover

We started off the project by conducting user interviews (remotely, because of COVID-19). We did this in teams of two; one person to conduct the interview and another to take down notes. We did this to make our interviewees feel like they were having a conversation with someone instead of being interviewed.

A total of 12 users were interviewed. We designed our questions to help us gain clarity on how users currently find and receive their environmental information, how aware they are of WWF's mission and efforts, and what were their impressions of NGOs like WWF.

Below are 3 of our key insights. We also asked our interviewees to visit the WWF.SG website and then asked them which device they used.

"I expect to see tips and info on how to help regarding different topics"

"I hope to be more actively involved in being eco-friendly in the future"

"I want to know more about volunteering programmes in my local community"

8/12

Eight out of twelve users chose to visit WWF.SG on their phones

"What if there are existing usability issues with the current site?? 🤔🤔🤔🤔"

Someone in the team then brought something up that inspired our next move.  We conducted a heuristic evaluation based off of Jakob Nielsen's 10 Usability Heuristics to help us spot any potential areas for improvement based on our personas' goals. We discovered that the navigation used words that were ambiguous and hard to understand and that several pages on the site had a different visual design and layout.
Navigational labels are phrased ambiguously; a new user would not know what to anticipate from tapping through
The site displays certain pages in a different visual design with a different navigational layout
Home page is cluttered with content that is hard to make sense of and the vertical carousel is distorted

Define

As UX designers, we need to constantly make sure we are able to step outside of ourselves and stay focused on designing for our users based on their needs.

To help us do that, we created an affinity map (a tool that allows us to visualise and organise user behaviours into groups and patterns) from which two personas were made; these two personas are a representation of our users and they really helped the team stay focused on designing with our users' needs and goals in mind.
How the current site fails Penny:
- Site does not offer a starting point for people like Penny who are new to being environmentally friendly

- Penny has difficulty finding content that she is most interested in as the navigation is confusing

- Lengthy content pages are difficult to scan and they don't offer any practical takeaways for Penny
How the current site fails Amon:
- Amon has no way of finding out what volunteering with WWF will be like

- There is no information concerning the different volunteering activities that WWF has lined up
Based on what we've gathered from our user interviews, our personas, and their customer journey maps (where our personas bring us on their journey in trying to use the website to achieve their goals and we take note of their thoughts and feelings along the way), we constructed a problem statement to help us stay aligned on what exactly is the problem we are trying to solve as well as for whom.

Here's The problem statement

"Users need a better way to access relevant information on environmental issues that they care about, so that they can make better decisions that aligns with their personal growth."

Develop

With everything we've gathered thus far - our key insights, our personas, and the problem statement - we felt we were ready to tackle ideation. We knew we needed to look into how our personas would want to navigate through the site (based on their needs of course!) so we conducted design studios focused on site maps, userflows, and wireframes for our solution.
Users like Penny need a quick and easy way to locate content that is relevant to them, which is why we needed to take a look at revising the site navigation. After a few attempts at redesigning the navigation together, we managed to whittle down the menu from 9 top level items, to just 5! It was a priority for us to use language that someone like Penny our persona would understand.
With the help of our new proposed sitemap and without losing focus of Penny and Amon's goals and needs, we worked together to come up with some proposed userflows for our design solution. These are the ideal paths our personas would take in order to reach their respective goals.
We came up with many sketches to help give ourselves an idea of how our personas might use the redesigned website. Working on this together gave us an opportunity to come up with many different concepts in a short amount of time. Thanks to these sketches we were able to proceed forward with the next step of the project.

Our Solution

For Penny, we

For Amon, we
Feeling confident in our proposed solutions, we quickly moved to digitize our wireframe sketches in Figma and turned them into lo-fidelity mockups. I helped guide the team in creating screens that were as consistent as possible; when you have 4 designers working at the same time on making wireframes in Figma, you need to make sure some standards are immediately set so that the experience achieved can be as seamless as possible from one screen to the next.

We then made a clickable (or is the word "tappable"? 🤔) prototype from our hi-fidelity mockups.
Over time we increased Our wireframes' level of detail

Deliver

After creating the prototype, we needed to validate our design decisions and see if there was anything we needed to do to help make the solution a more useable one.

We did so by doing two rounds of usability testing (my team calls it 'UT' for short!) with 5 users for each UT and we took note of what our users struggled to use or to understand. With the test results, we learned what changes had to be made moving from prototype #1 to prototype #2. We did this a second time and this is how we landed on the final version of our solution! 🤩

Usabilty Test #1 Results

  • 3/5 users had difficulty differentiating the two call-to-action (CTA) buttons on the landing page
  • 2/5 users expected information on WWF and what they stand for immediately on the landing page
  • 1/5 users felt overwhelmed by the amount of content on the Sustainable Seafood pledge page

UT #2 Test Results

  • 2/5 users were put off seeing volunteer and donation CTAs so high up on the home page; both CTAs came off as too pushy
  • 1/5 users felt that the "Volunteer" buttons needed to be renamed as it was not intuitive enough that tapping on it would lead to more information about that volunteer activity
  • 2/5 users felt that content flow for individual news page was unpredictable and did not support a smooth article-reading experience
~*~Try out our final prototype here~*~

Outcomes & Lessons

Overall, I believe the project was a success; we designed a solution that solved the users' problem of not being able to find relevant information in a quick and easy manner. By restructuring and revising the site navigation, we provided users like Penny a way to reach informative pages quickly. And by expanding on the site's volunteer page, we have allowed for users like Amon to learn more about what to expect from volunteering with WWF-SG.

Something I've learned is the importance of staying aligned as a team, and that team alignment isn't some magical thing that just happens, you need to actively champion it as a pillar of your process. All the hours spent into making sure the team was on the same page proved to have paid off in a great way; we learned to stay focused on the task at hand while at the same time offer support to one another.

And a special shoutout to Sheralyn for handling Project Manager duties on top of her UX tasks. Truly a rockstar!

Special thanks

To our wonderful mentors Pieter, Stefanie, and Valerie:
Literally could not have done this without you and your immense pools of UX knowledge. Thanks for letting us swim in it!

To our interviewees, usability testers, and friends and family:
Thanks for helping us and supporting us. I am eternally grateful!

To our personas Penny and Amon:
I keep forgetting you guys aren't actual people!

And finally to my team:
I literally could NOT have asked for a better team. You are all so special to me and it was an absolute joy to have worked on this website redesign together with you three!

Other projects