I led a website redesign project in which our team partnered with Cal Student Philanthropy, a UC Berkeley non-profit organization focused on spreading awareness of the importance of philanthropy to the student body & building a culture of giving.
The redesign focused on creating a more impactful brand identity and restructuring information architecture to promote a memorable and engaging user experience.
With the insights gathered from our meeting with Alex, we began our research process. Before we formally started on the quantitative & qualitative research, we wanted to analyze the existing website's UI among the team first.
A few things we observed include: too many primary navigation tabs that do not fully explain the content it contains, confusing icons, too much text all around the page that could overwhelm users.
After redlining the website's existing homepage, we started discussing what we thought the potential problems were going to be. What did we hypothesize would be common pain points experienced by users that would visit our website?
But would users actually feel this way, or were there completely new insights waiting to be discovered? Only one way to find out – jump into our research! 🕵️♀️
To kick off the research process, we sent out a Google Forms survey to friends, family, and the general public to gather information on how users generally feel about donating to causes/organizations, as well as how they feel about donating as alumni.
We found that 94% of users who responded have previously donated to a cause or organization, with 100% of users valuing the impact they are making with their donations. However, surprisingly, only 9% of users were involved in their alumni program.
It seemed from the data collected that users do donate, but donating to the alumni program is not their first choice. Furthermore, transparency was clearly valuable to all users.
Definitely some interesting insights, but our research didn't end there!
Data tells us one story, but we wanted to collect information from the source directly – our users. We conducted 6 semi-structured user interviews & usability tests. What better way to more intimately understand issues users may have while navigating the website than to have the users navigate the website right in front of us? 😜
Our users gave us a lot of great feedback – some users pointed out that they would not have even known this was a UC Berkeley affiliated website if we hadn't told them beforehand. Others mentioned that the text on the homepage felt random and they could not see a clear mission or purpose for the site.
With our goals in mind, we plotted the insights we gathered from our interviews and usability tests on a prioritization matrix to sort out what was low and high priority.
Many of our users had commented that the text on the homepage felt extremely random and that they valued trust when dealing with non-profit organizations, so we made sure to keep those as higher priorities 📈
The information architecture of the website was another area we wanted to tackle, and to help better inform us on what users thought of the existing site map of the website, we created a card sort using Optimal Workshop. We had 10 participants and 9 had graduated or enrolled in college in the last 5 years. We found that there were 4 main categories users were sorting the 25 cards into.
We took this data to craft a new site map that we felt showcased the important information a bit more clearly.
Next step – it was time to take all our ideas and bring them to life.
To get started on prototyping, we made paper sketches to quickly jot down how we envisioned the redesigned website to look like. As a team we voted on elements we collectively liked from the sketches and put it all together for the low-fidelity digital prototype.
We knew that one of the most important things we wanted to target was to ensure Cal Student Philanthropy's website looked like a UC Berkeley website, and it would be cohesive to the overall Berkeley "brand," so to speak.
Members of the team put together a mood board that helped inspire our style guide. Now, it was time to add visual design elements to our prototype! ✨
Starting with our mid-fidelity prototype, we conducted 2 rounds of usability testing. For both tests, we asked our users to complete 3 main tasks:
1) Find out the next upcoming event.
2) Navigate to the "Contact Us" page and submit a question using the contact form.
3) Find out the impact of donations.
We used the feedback we got from our testing to inform our iterations for the high-fidelity prototype.
During testing, there were users who commented that they enjoyed the icons we had included, as they added a friendly touch to the website. We made sure to keep these elements for our high-fidelity mock-up ✅
We also heard feedback that areas of the prototype looked a bit big & spaced out, causing the page to look somewhat less sophisticated. Our team quickly realized that working on Figma, where we could freely zoom in and out of the workspace, was making us think some elements were reasonably sized, when in reality they were actually quite large when the prototype was viewed on a default browser.
Another interesting insight we noted from conducting usability tests was that when users were asked to navigate to the "Contact Us" page to submit a question, every single user instinctively scrolled to the bottom of the page and found the "Contact Us" link in the footer. Although our team had also added a "Contact Us" link in the header to help users more easily access the page, this intuitive action performed by all our users confirmed that our decision to also include a link in the footer aligned with a common web pattern our team has observed from other websites.
Some super interesting stuff! 🧐
Take a look through our clickable high-fidelity prototype below!
Given the timeframe of the project, we were unable to implement all of the feedback we got from our users. There's still much more work to be done, and with more time we would conduct more user research & testing to guide our future developments.
One of my biggest takeaways from this website redesign was the importance of a brand's identity. I was initially quite surprised to hear from users that some didn't even recognize the original website as being part of UC Berkeley. If our team was going to successfully design the site to be memorable, engaging, and feel trustworthy for users, it was imperative to focus on creating cohesion between Cal Student Philanthropy's and the aesthetic of UC Berkeley as a whole.
Overall, this was an extremely rewarding project that taught me a lot about leadership & teamwork. I'm super proud of the work we were able to accomplish in such a short amount of time! 💪🏼