AboutResumeExtras :)Work

Central Valley Scholars

A user-centered webpage redesign for a non-profit organization based in the Central Valley of California

Project Overview

Educational resources and scholarship programs aid students in attaining higher education and beyond. Such programs and resources play a critical role in the education and success of students, however, in the Central Valley there is a lack of knowledge being passed down to students accessibly. Central Valley Scholars is a non-profit organization that aims to assist historically underserved students in the Central Valley to attain access to higher education. They provide a variety of free college workshops, mentorship programs, research programs, and scholarships - all under a safe and welcoming environment for all students.

In a month-long final project for my product design studio class at the Berkeley School of Information, I partnered with Central Valley Scholars and worked as the solo UX designer and researcher to help redesign their resources page, a hub for academic support and opportunities that they and their partners have to offer.
Tools
Figma
Timeline
One month contract (5 weeks)
Role
(Solo) Research, Design, User Testing
Skills
Comparative Analysis, Synthesis, Prototyping, Empathy Mapping

The Problem

While initially meeting with my client, we discussed the resources page in its original form. In its original state, the resource page was structured in a way where there is a search bar at the very top of the page. Underneath this search bar, resources are linked through containers that are given a category name. Once you click the link in each container, you are guided to a page with links to multiple resources such as organization websites, links to past webinars, and much more.

While this seems like a functional resources page, upon using the site for myself, I ran into some problems that called for a more streamlined experience. While conducting a thorough run through of the current resources page, I found that there were multiple steps we had to take to access specific resources. For example, if I wanted to look for mental health resources for POC folks, I would have to click "Black Student Resources" and then scroll through the entire page to find mental health related resources. On the other hand, if I were to use the search bar, the results would be site wide which would require me to do more digging to find what I was actually looking for. Once I had finished conducting an audit of the existing page, I synthesized my findings into three main pain points that would help me define my design goal:

Initial Pain Points

Search

There isn’t an adequate search system on their current site. The search bar on the resource page is sitewide.

Visual

Missing visual cues to direct users. Resources are not organized in an attention-grabbing way.

Organization

The resource page in its current form lacks organization. Resources would be piled on top of each other as they are added.

Primary Design Goal

With the aforementioned pain points in mind, I identified a design goal that would help address a problem statement of how the Central Valley Scholars page might be altered to increase usability and functionality. My primary goal was to design a new and easy-to-use system that offers a personalized experience for those seeking the resources Central Valley Scholars has to offer.

Constrains

While working with Central Valley scholars, I was working with a few design constraints. Other than the constraint of time, one of the biggest constraints was that I was designing with the limitations of Wix in mind. Because the website was built by my client themselves on Wix, they wanted a design that would easily be transferable to the current site and platform if they were to implement the changes themselves. They wanted a design that was straightforward and easy to understand, yet proposes a solution to the problems at hand.

However, upon further exploration it was apparent that Wix had more limitations than anticipated. Other than the basic layout changes that Wix had to offer, this wasn't enough to implement a substantial solution to the problems with the site without embedding custom code. With this road block in mind, I made the executive decision as a designer to pose a compromise. My proposal was that I design a prototype of a system that addresses the project's goals. Thus, this deliverable would be something that is presentable and ready to hand off to the developers on the team, or future stakeholders.

My Design Process

I decided to split my design process into four stages: research, ideation, prototyping, and testing. My prototyping and testing phases heavily built off of each other as I used my testing insights to inform my design decisions and iterate.

My outlined approach includes conducting research on existing education non-profit organizations based in the Central Valley as well as conducting semistructured interviews on current users as my primary method of data collection. These steps would help me discover the unexpected and gain deeper context to first-hand issues experienced through the current interface.

Research

Given the tight timeline of the project, I first started my research by understanding how other scholarship programs structured their resources pages. In addition to conducting an extensive analysis of existing programs, I took the time to dive deeper into the Central Valley Scholars user base, solidifying my target users and their needs. I would then synthesize my findings to move onto the next stage of my design process.

Comparative Analysis

My plan for research started by conducting an analysis of existing scholarship programs. I encountered two similar programs, both of which were based in the Central Valley with a similar mission to CVS.  I ran through both experiences and analyzed these platforms as a whole and also looked at them against my defined pain points for the Central Valley Scholars’ current resource page.

Observations from Analysis

In my analysis, I found that these programs strongly favored organization. Even though both platforms had a different way of structuring their pages, it seems they were thoughtful in how they wanted their users to interact with their resources pages, For example, one site assigned all their resources to a "resource type/topic". Their users would then have the option of filtering their searches according to these topics. While using this for myself, I found that I was able to narrow down my searches more efficiently.

Opportunity for Central Valley Scholars: Since a lot of the CVS resources fall into different categories themselves, their page could benefit from the use of a filtering system by relevant metadata to help their users more effectively get to whatever need in less steps.

Target Users and Interviews

I divided my target users into two groups according to the frequency of use for the site. The primary target users are middle and high school students who typically come from low-income and underserved communities in the central valley. Other users to keep in mind were donors and advisors who visit the page hoping to either sponsor the program or pass along academic resources to students.

So with my target users in mind, I conducted semi-structured interviews with four students from the Central Valley who have attended CVS events and workshops in the past.

The high-level questions I hoped to answer through these interviews were as follows:

- How do students navigate higher education scholarship programs and the resources they offer? (How do they navigate existing sites to find different resources that fit their individual needs?)
- What makes existing scholarship programs (such as CVS) attractive to students? Why?

Empathy Mapping

For each participant, once I was done interviewing and gathering their input, I created empathy maps to help articulate their needs and aid my decision-making process. This helped me efficiently organize my findings to draw upon later in the design process.

Key User Insights

Organization and simplicity are crucial in a student’s experience navigating higher educational resources
“I like that CVS has all of their links on one page”
“I need a site that’s easy for me to find everything I need”
"I couldn't find the LGBTQ+ scholarship because it wasn't listed in the LGBTQ+ tab
"I don't know how to use this search bar"

Opportunity:
Design an easy to use system that offers immediate access to user-specific resources and services

Students have a strong priority for inclusivity and representation in their search for higher education resources and opportunities
“It’s nice to see people like me on the cover of this page”
“It would be nice if I can find opportunities specifically for Latinx students to find community”

Opportunity:
Develop features that increase personalization, allowing users to gain full reign of their experience on the Central Valley Scholars resource page

User Pain Points:
- Users felt the current resources page was superfluous, having to scroll through each sub category to find a specific resource
- Users felt frustrated having to use their web browser's back button to navigate back between the different resource types

User Personas

After taking into consideration the interviews I conducted and the key needs that I identified, I was able to create 3 distinct personas that encompass a variety of site uses and personalities.

Now, since I was designing a new system for my client to present to developers and future stakeholders, I created these personas to help demonstrate realistic representations of the Central Valley Scholars user base for reference.

Ideation

Low-Fidelity Sketching

After synthesizing the insights gained from user interviews and adjacency analysis of similar programs, I went on to free brainstorming and made some low-fidelity sketches to help me understand the structure and visual hierarchy I wanted to pursue as well as elements I thought would make this page more practical.

I used my interviews to identify common gaps in the user journey, and I used elements from my comparative analysis in my drawings to help visualize the overall experience and check the flow.

My initial ideas:
- Incorporate tags to help filter search results
- creating an affordance to sort the resources/search results
- have everything in one view to avoid superfluous scrolling
A sketch of a flow in which all information about the page and organization would be displayed up top, and on the bottom users would be able to sort by resource types/topics
A sketch of a flow in which everything is one view: the search functionality would remain static on the left, and resources would appear on the right according the user's actions
Mobile sketch of the above flow
Mobile sketch of the above flow

Mid-Fidelity Prototyping

I drew upon my initial sketches to develop a few mid-fidelity screens in which I tested out different layouts and visual hierarchies.  Meeting with my classmates and interviewees helped me understand elements of the design that did and didn’t work. Peer feedback and initial usability testing helped me get on track to designing a solution that fit my objective.

Initial Feedback:
1. Thought the screens were clear and easy to follow along
2. Enjoyed having an about section at the forefront that explains the resources page - this gives users more context

A mockup of the resources page in which the flow is linear: search and filtering functionality are displayed above resources and results from a search

A mockup of the resources page in which the flow search and filtering functionality are displayed alongside resources and results from a search -- everything is viewable at one glance

Concept Testing and Solidifying Features

After creating my mid-fidelity mockups, I met with my initial interviewees to conduct some usability testing and gain some more feedback on the decisions I’ve made. In these tests, I asked the users to perform specific tasks on both pages to observe how well they interact with the different elements. I took notes of struggles that they had, what affordances made their navigation experience easier, as well as verbal feedback on things they liked or disliked.

Participant tasks:
1. Find all African American resources
2. Sort all resources by most recently added to the site
3. Revert the resources page to its original state (when first entered upon the site)

Findings:
1. Having the search and filtering functionality alongside the results in a fixed position was more successful due to less scrolling — all important information is in one place
2. A few testers confused about resetting the page: didn’t know whether to deselect the tags or look for a reset button  
3. Organization: there should be more organization and information within the resource listings themselves

I found that all users were able to successfully perform at least 2 of the 3 tasks which helped let me know that I was on the right track. Some key features to include were:

- Reset search button for users to clearly revert the resources page to its initial state and allow them to start their search from scratch
- Tags within the resource listings to help define search and inform users what type of resource is displayed

Final Deliverable

High Fidelity Prototype


Finally, after meeting with my interviewees and conducting usability tests on my mid-fidelity screens, I used the feedback to incorporate necessary changes to the experience and iterate up to a refined high-fidelity prototype. I sought to respond to the client’s and users’ constraints while keeping the design simple to allow for a smooth and comprehendible transition between prototyping and finalization.

Results

Organization

I decided to incorporate the use of tags and metadata to give resource listings specific properties that allow for the search functionality to take place. Tags are color coated based on similarity and subcategories with other resources. In addition, users have full authority over how resources are presented to them — they are able to sort the listings alphabetically or the date they were added, they can select and deselect tags according to their needs, etc.

In the final deliverable, having all the content in one place makes the experience more streamlined. Clear affordances guide users and make the resources page easy to use. Color coordination keeps the page cohesive and consistent.

Search and Inclusivity

To address one of my earlier pain points, the search functionality would no longer be site-wide and would be limited to the resources database specifically. Users would be allowed to have a personal experience and continue to have control of their experience. With the addition of a reset search & filers button, clearing complex combinations of filters is one click away.

The inclusion of tags that encapsulate different intersections of identities makes the resource page more inclusive and personal for users. Rather than generalized categories, the new designs aim to make users feel represented.

Final Reflections

As I reflect on my experience designing for Central Valley Scholars, I’m very appreciative of the opportunity I was given. As a first-generation BIPOC student who was born and raised in the Central Valley, I resonated a lot with the mission statement and business goal of Central Valley scholars. I really wish something like this existed when I was in high school seeking resources for higher education.

This project taught me how to effectively and proactively work under limited time constraints. Because the project was only a month long, there were ideas that had to be chopped and compromises that had to be made. Something that I was unable to get to was designing a mobile-optimized version of the site, as this would help account for users that might not have access to computers at home and rely on their mobile devices. Another thing I hoped to do but wasn't able to get to was conduct qualitative interviews with my secondary target users. This would have helped me identify common gaps in their journey.

Overall, I’m glad I was able to collaborate with Central Valley Scholars on a project that hits so close to home, working as the sole designer and researcher to conduct participatory research and need-find remotely under COVID circumstances. Thank you so much for reading!