Back to Work

Redesign NGO website

UX & UI Design

Introduction

To broaden my international experience, I chose to undertake a short internship abroad in Indonesia. During this time, I connected with a volunteer organization in need of a new website. Together with an English team, I redesigned an entirely new website to raise awareness of their NGO. Throughout this internship, I independently managed the project and assembled the website based on thorough research. It was built using a CMS system, allowing NGO members to add content and easily modify the design.

The website was completed within two weeks, during which my team member and I underwent an entire design process of three months. All communication was conducted in English. Working in a different context and culture was incredibly educational.

Design challenge

The main design challenge was to redesign & further develop the Think Volunteer website. In addition, the assignment included setting up a strategy (campaign) to attract future volunteers to Indonesia, raising awareness of and driving engagement with the Think Academy. All of this was aimed at helping volunteers make a positive impact on the local community in Indonesia.

Results overview

Results in numbers.

  • 2 weeks: Time to build the full website;
  • 3 months: Duration of the complete design process;
  • 1-3 clicks: For volunteers to find essential information;
  • WCAG 2.1 Level AA: Basic accessibility standard met;
  • 4 prototypes: Paper, LoFi, MeFi, HiFi, and final WordPress implementation;
  • €0,00 No costs: We worked with what was possible;
  • 1 fully functional website: Completed for the NGO.

Research

We investigated how Think Volunteer can inform and motivate (prospective) volunteers to engage in responsible volunteering. This included:

  • Exploring volunteers’ needs, motivations, and expectations.
  • Determining how content can be presented effectively.
  • Identifying the best website format and structure.
  • Examining the connection between the website, Think Academy, and social media.
  • Evaluating how interaction and interface design can enhance the user experience,
  • Ensuring the website is inclusive, accessible, and sustainable so all target audiences can fully utilize its features.

Methods

To conduct research, my team and I used several methods, including:

  • Benchmarking: investigating what other similar organizations are doing.
  • Best, good, and bad practices: analyzing what other websites do well.
  • Literature research: studying responsible volunteering.
  • Expert interviews: discussions with the organization about responsible volunteering.
  • User interviews: conversations with former volunteers about their experiences.

Based on these results, I created various outputs to draw conclusions.

Research results

Persona

The persona is a (prospective) volunteer who is not yet confident in how to make a positive impact without proper preparation. She encounters the Think Volunteer website to learn how to get started.

Persona

Empathy map

Based on our persona, I created an empathy map to better visualize our target audience and quickly access its characteristics and traits. We mapped out what 'Lilian' says, does, thinks, and feels regarding finding an organization that can train her to become a responsible volunteer.

Empathy map

Requirements specification

  • The (prospective) volunteer must be able to find essential information about starting volunteer work within a maximum of three clicks.
  • The website must be structured so that users understand where they are and how to continue navigating within 30 seconds, as measured through usability testing.
  • Users must be able to access at least three testimonials or reviews on the website to build trust in the services provided.
  • Information about courses and the Think Volunteer Academy must be accessible from every page of the website through a consistent navigation structure.
  • The website must comply with WCAG 2.1 Level AA, ensuring that all content is accessible without technical barriers.
  • The website should evoke the feeling that the Think Volunteer Academy supports personal goals (exploring the world, gaining experience, and self-development) as well as responsible volunteering, validated through positive user feedback in user research.

Ideation

Brainstorming

We conducted several brainstorming sessions to generate ideas. Since we worked with team members located in different parts of Indonesia, these sessions were held online. The following brainstorming methods were used:

  • Crazy 8: generating eight ideas in eight minutes, focusing on layout, features, and information structure.
  • Round Robin: collaboratively developing and refining ideas based on project requirements.
  • Image-ination: creating associations between visual references and the website’s goals.
  • Flower Association: expanding and combining keywords to generate new concepts.
Online Miro brainstorm

Sketches

After the brainstorming sessions, we visualized the ideas in a morphological chart, where we created sketches for each functional requirement. This allowed us to explore and combine different solutions across the various functions.

Morphological chart with different functions.

Conceptualization

Once we decided on a concept, we combined all functions into a single paper design.

Paper protoype

All functions sketched into one flow.

LoFi prototype

Prototype into basic blocks.

Sitemap

Website pages required to fulfill the user goals.

Prototyping

We had to work quickly with the clients and had little opportunity to test with users at this stage. User testing could only be done later. Although we had already planned research sessions with users, we had to continue with the design process for now.

MeFi prototype

Look & feel

The Think Volunteer website did not have a style guide, so we had to develop one ourselves. To do this, we conducted brainstorming sessions, created a framework to test ideas, and eventually finalized the style guide. We also conducted additional desk research on Millennials and Gen Z to understand what appeals to these audiences.

Miro boards to explore and brainstorm the website’s look and feel.
A control panel to test whether elements fit our look and feel for the final design.

Style Guide

Light mode
Dark mode

HiFi protoype

Building in Wordpress

After several feedback rounds with the client, we were ready to start. At the end of my internship, I had two weeks to build the entire website. We created the designs in Figma, but we could not directly implement them in the final website. Since we were designing for an NGO, WordPress was the only feasible option to work with certain blocks. Due to time and budget constraints, the design had to be kept as simple as possible. Additionally, it needed to remain usable for volunteers after we left the organization.

Homepage

Navigation

Footer

Volunteer Guidelines

Validation

After my internship it wasn't possible to further test it, because it was already time to end the project. Although we didn't test it, my UX coach and the co-founder of the NGO we're super happy.

Final judgement in words

Nikki is an ambitious, proactive, and independent team player. Even in the second year of her study, she finished an internship with Think Volunteer as if it were a graduation project, very impressive! I highly recommend Nikki! - UX coach, Rikje Sendeza Huber
I met Nikki in Indonesia, where she immediately stood out as an incredibly eager-to-learn, enthusiastic, and creative professional.

She not only demonstrated that she can work independently and with clear focus, but her empathy and spontaneity also made her a valuable team player

.From the very beginning, Nikki took initiative and developed her own approach, including a well-structured plan and timeline.

She proactively responded to the needs and questions within the organization, striking a strong balance between independence and collaboration within the team.

At the start of the project, Nikki conducted thorough research into our target audiences and the topic at hand. She drew clear conclusions and used the right methods to define solid requirements.

Together with Brianne, she then worked efficiently on developing a prototype for our academy/learning platform.

The result: a professional and impressive prototype that we still use to this day.I look back on our collaboration with great appreciation and am convinced that, with her skills and mindset, Nikki is a valuable asset to any organization. - Co-founder, Mirte Kroeze

Results

Summary of results.

  • Successfully redesigned the Think Volunteer website in collaboration with an English-speaking team, creating a user-friendly platform for prospective volunteers.
  • Managed the project independently, including research, ideation, brainstorming, prototyping, and final implementation in WordPress.
  • Developed a style guide and responsive design suitable for Millennials and Gen Z volunteers.
  • Ensured accessibility and inclusivity according to WCAG 2.1 Level AA.
  • Produced a functional HiFi prototype and a fully built website within two weeks of development, after three months of design and research.
  • Established a strategy to attract volunteers, raise awareness of the Think Academy, and enhance engagement with responsible volunteering.
  • The website was designed to be easily maintainable by volunteers, ensuring they could update and manage content independently after our departure.

Disclaimer: At the moment, thinkvolunteer.com does not reflect our original design, as other interns made changes to it after we completed our version.

client
Think Volunteer
Project type
UX & UI Design
Project year
2023

Examples

No items found.

Other work