Client:
BAPS Charities
Role:
Solo UX designer
working with 2 stakeholders
Duration:
2 Months
January - February 2017
Tools Used:
Adobe XD, Balsamiq,
Photoshop, OmniGraffle
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...
The main problem within the BAPS Charities website was first, what does this non-profit do? Users were having problems with the following areas:
I tackled the project in three phases: Discovery, Ideation and Design.
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.
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
Top needs for new users included
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.
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)
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.
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.
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.
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.
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.
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.
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.
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 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).
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.
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
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© Urvesh Patel 2021. All Rights Reserved.