Redesigning the web user experience of a global non-profit organization.

BAPS Charities

Solo UX designer
working with 2 stakeholders

2 Months
January - February 2017

Tools Used:
Adobe XD, Balsamiq,
Photoshop, OmniGraffle


About BAPS Charities

BAPS Charities is a global non-profit organization active in nine countries across five continents. It connects the efforts and collective spirit of volunteers around the world to serve individuals through...

  • Health & Wellness
  • Humanitarian Relief
  • Educational Services
  • Community Empowerment
  • Environmental Protection & Preservation


The main problem within the BAPS Charities website was first, what does this non-profit do? Users were having problems with the following areas:

  • Understanding the mission immediately.
  • Accessing high level user priorities more easily — donating, how to volunteer and upcoming events.
  • Providing easy navigation and understanding of content without information overload.

Design Process

I tackled the project in three phases: Discovery, Ideation and Design.

Discovery Phase

The research and discovery process for this project entailed user research, a heuristic analysis, usability testing, and stakeholder interviews. As the sole designer on the project I developed a research based approach that combined new and known approaches to practice and learn new skills.

Understanding the User Needs

In my initial research, I conducted an online user survey with 2 main groups of users: current users and new users. Around 25 people responded, giving me a more clear sense of their top needs when visiting the website. This helped to capture the users voice so that it can be used to inform the design process and strategy.

Top needs for returning users included

  • Checking announcements
  • Making a repeat donation
  • Upcoming events/activities
  • Photos from charity events/activities

Top needs for new users included

  • How to make a donation
  • Finding out how to volunteer
  • Learning about the organization
  • What opportunities are available

Heuristic Analysis

I decided to carry out a heuristic evaluation of the website to get an idea of the main areas for improvement. This was an important step in familiarizing myself with the website. In addition, the heuristic evaluation helped me frame better questions for the usability testing interviews. Below are all the key problems and pain points I noticed with each of the main pages of the site.


  • Homepage doesn’t use its full potential. (A lot of blank space that can be utilized for valuable information).
  • Navigation Tabs are hard to read. (Height of Buttons is too narrow, making it hard to read since it looks like everything is congested).
  • Donate Now button is at the bottom of the page. (The call to action is not very clear/ not correctly placed).
  • Hero Images- What do they mean? Do they clearly define the organizations goals?
  • Footer text is hard to read. (Solution: Better color palette/ visual design guidelines).

About Us Page

  • Information Overload on the number of tabs.
    (Solution: Break it down to 5 main features).
  • Not clear on what the mission is. Mixed messages everywhere. Need something short and simple.

Services Page

  • Information Overload- Shorten the Navigation Tabs. (Theres 5 more links that lead to more links).
  • Services (Wrong word usage- Change to What we do) because it confuses the user.

Media Center Page

  • Media Center doesn’t group the navigation well. Announcements and Reports/Documents are out of place. (Could be put in another location to provide better value/context of the organization). (Solution: Reports will have its own tab).

How to Help Page

  • Getting involved required too many steps from the user- downloading document, email, etc. (Solution: Onsite web form- short & concise).

Usability Testing

After performing the heuristic evaluation, I conducted contextual 1 hour observational sessions with 3 users to better understand the needs, pain points, and insights from task-based and contextual probes. Below are some of the findings from my interviews.

(Click to enlarge images)

Stakeholder Interviews

During the research phase I advocated for stakeholder interviews to gain a holistic view of the business side of the project goals. With the help of my manager I reached out to stakeholders in various departments and locations.

This was a great learning experience and gave me a better understanding of the difference between interviewing user vs. stakeholders.

Ideation Phase

After the discovery phase ended, I gathered all of the insights and leveraged them to define the approach for the design. This phase included turning insights into a business model canvas, and then laying the foundations for the redesign with sketches and a revised information architecture.

Business Model Canvas

After auditing the whole site, I got a good visual representation of important aspects of BAPS Charities and what it valued through Alexander Osterwalder's Business Model Canvas. This helped me to keep things in mind as I moved forward with the redesigning process.

Reorganizing the Architecture Hierarchy

Since the hierarchy of the old design had a co-existing hierarchy pattern with reiteration and partial reiteration of some sections all throughout the site, the information architecture was a little messy. I simplified this into the new design.

Low-Fidelity Sketches

The stakeholders had given me full control over the level of freedom in design since they were not particularly married to their existing designs. I immediately went into sketching ideas and then moved forward with turning those sketches to mid-fidelity wireframes.

Design Phase

After creating the sketches and establishing the vision for the project, I moved into the designing phase. The goal of this phase focused on creating wireframes, high fidelity screens, and visual design guidelines.

Wireframing Screens

After creating the low-fidelity sketches, I worked my way up to building mid-fidelity wireframes in Adobe XD which helped to map out the shell of the interface, its screens and basic information architecture. I got feedback along the way from the stakeholders and was given the thumbs up for developer handoff.

Defining Style Guidelines

To help design a standard and consistent experience throughout the website, I created a Visual Design Style Guide before moving to creating high-fidelity screens.

Home Page

Returning Users: They can check up on the latest announcements and news feed in the Featured News section. The Donation Button is also made more prominent and moved to the top of the page.

New Users: Are immediately hit with hero images that show different activities that BAPS Charities has made impact in. They can also find out more information if they choose and select a location that’s near them being a global organization.

What We Do Page

Users no longer have to click through 9 side navigation tabs to find out more information about the different activities that BAPS Charities does. It was broken down into 5 keys areas, which all have a short description and links to different things that fall under that if users choose.

Activities Page

Users can find out more information on current events and project that are in effect at moment the user is accessing the website at a location near them. They can also find out what projects BAPS Charities is supporting with charitable institutions around the world.

News Page

Users can find out the latest news on different events that took place in centers across the world as well as other Media Coverage, Newsletters, and Awards & Recognition that took place with the Global Partners.

Reports Page

Users can read the annual report of everything that BAPS Charities accomplished in its 5 keys areas that it serves. The reports are shown through beautiful infographics, stats, and visual images.

Get Involved Page

The getting involved page is much more minimal. Design improvements have reduced the number of steps in the donation process as well as cut down on the information overload. Everything the users need (donating, fund-raising, supporting) is shown in 1 page instead of different pages.

The Results

The redesigned platform increased conversion and return rates by 85% compared to 20% from previous years. More users were retained due to how the way information was portrayed (easily accessible and a pleasing interface).

Early Feedback is Key

It is important to seek feedback frequently. Fortunately, I was able to meet frequently with the stakeholders to discuss sketches, ideas, low-fi, hi-fi and kept them with me in the process.

Don’t be Afraid to Take the Initiative

I learned that the brief is composed of only the minimum requirements. As you move through the design process it is vital to address tasks that were originally not listed in the brief. Sometimes you will need to take the initiative and suggest deliverables that you know will benefit the project in the long run.


Modernizing the equipment rental and inventory management process at VCU Libraries.

View Case Study

Travelbud (Coming Soon)

Reimagining how solo travelers meet and have memorable moments.

View Case Study


A mobile app designed to help new international students transition to new environments.

View Case Study