OVERVIEW

Problem
Sambhali US wanted a redesign of their exisiting website with focus on improving graphic design, user flow, and site layout. The purpose of this redesign was to improve the user experience for organization members, as well as donors.
Solution
The existing Sambhali US website was extremely text heavy, making it very difficult for users to skim and find the information they were looking for. To solve this, we added graphics to help break up the text as well as make it easier to find relevant information. The navigation bar of the original website was also overloaded and difficult to navigate. Through card sorting and creating personas, we were able to create a new site map and website navigation that makes it simpler for donors to find the page they need.
My Role
UX Designer, UX Researcher, PM
Timeline
Sep 2020 - Jan 2020
Team Members
Ana Maria Rodriguez, Connie Lam, Mandy He, Jenn Lee, Siri Nandam
Tools
Figma, UXTweak
Design Process
1. Research
Contextual Inquiry
Competitive Analysis
Card Sorting
Personas
2. Design
Lo-Fi Wireframes
Site Map
Usability Testing
Iterations
Hi-Fi Wireframes
Asset Creation
3. Retrospective
Future Steps
What I Learned
My Contribution
During the research phase, I conducted open and closed card sorts on participants and analyzed the results in order to create a new site navigation and site map. I also created wireframes from low fidelity to high fidelity for the Home, What We Do, Projects, and Who We Are pages through iterative feedback from usability testing.

Furthermore, I served as a Product Manager for the team, meaning I created a project timeline and served as the point person between the client and our team. I also acted as a design lead and was in charge of setting up all weekly meetings and communications with the client as well as within the team.
Design Outcome

RESEARCH

Competitive Analysis
I did a competitive analysis of four other similar or larger non-profits in the non-profit space including Charity Water, Acumen, Feeding America, and Save the Children.
I found that common strengths of non-profits include:
     •  Strong visual design/branding
     •  Image-heavy design
     •  Scannable text presented in chunks
     •  Key Statistics
     •  Subscription form on bottom of every page

I found that common weaknesses of non-profits include:
     •  No clear mission statement
     •  Information not well organized
     •  Too many pages/links

Therefore, I tried to focus on giving Sambhali US more visual design in order to make the pages more scannable and less text heavy.
Card Sorting
One of the client’s original concerns was that their navigation bar was too cluttered with drop-down options and it was difficult to navigate, especially for new users.
In order to get a better idea of how the navigation bar should be arranged, I decided to do an open card sort followed by a closed cart sort with three different participants.
I found that everyone thought ‘Projects’, ‘Stories’, and ‘What We Do’ were most important and should be on or accesible by the homepage. Everyone also thought that all the ‘Volunteer’ categories could be one ‘Volunteer’ section.  Most people were confused by Message from the President, COVID-19, and Newsletter and thought that the three should go together somehow. All participants also had difficulty placing ‘Board of Director’, ‘Financial Information’, and ‘Contact Us’, and in the open card sort they were grouped together as “logistics” or “boring admin info”.
Personas
One of the pain points I ran into after presenting the card sorting results to the client was that the client wanted to give emphasis to grant writers and how they would access information (i.e. grant writers need all the detailed information and text heavy pages). In order to make sure I was empathizing with all users, I created these personas.

DESIGN

Lo-Fi Wireframes and Site Map
Because we were a large group working remotely, we decided to create our Lo-Fi wireframes in Figma so that everyone would be able to access them. Unfortunately, we ended up directly iterating on those wireframes and turned them into our Hi-Fi wireframes so I no longer have images of them.
I created the first iteration of the new site map based on our card sorting results. I decided to create a ‘Take Action’ section under which you could find ‘Volunteer’ and ‘Donate’. I grouped ‘Newsletter’, ‘Message From the President’, and ‘COVID-19’ under a new section called ‘News’, and I put everything else under ‘About’ while retaining a stand alone ‘Donate’ button in the navigation bar.

After presenting this first iteration to the client, I decided to create a ‘Blog’ section where ‘Message from the President’ and ‘Stories’ could live because the client wants to keep these pages updated instead of stagnant. I also created a ‘Who We Are’ section for the logistic information so it would be easier for grant writers to find. For pages like ‘Projects’ and ‘Stories’ that have many different sections, I portioned each section into it’s own page instead of keeping all the information on one page which causes the pages to be text heavy and difficult to scan.
Hi-Fi Wireframes
I focused on taking text heavy pages and rearranging the information hierarchy based on importance, for example adding graphics to make information easier to find or breaking up sections and giving them their own pages so that users don’t need to scroll past all other sections to find what they’re looking for.

RETROSPECTIVE

Future Steps
Given the opportunity, I would engage in usability testing on the new website, especially with users who are grant writers because this is a very niche group that’s important to the nonprofit and we weren’t able to find any to test.
What I Learned
This was my first project where I worked with a team of five other designers rather than a product team consisting of a PM and developers where I was the sole designer. Furthermore, I served as a PM for the team as well as being a designer which taught me a lot about the importance of clear communication and taking responsibility for your work.

The client was also inexperienced in the UX design process as well as a bit stubborn about wanting to keep the website the same. Through these client meetings I learned to politely but firmly stand up for my designs and design decisions with the backing of research results.