top of page

Roots of South LA

For this project, I worked in a group of three and we were  given two weeks to overhaul the user experience and design of a non-profit's website.

After our initial brain storm we landed on the non-profit, Roots of South LA Wellness center; an organization focused on the healing of Black, Indigenous, and People of Color in South Los Angeles. 

Problem Statment

After assessing the mission and goals of Roots of South LA Wellness Center, and exploring their website's design and user experience this was the problem we identified.

 

Roots of South LA Wellness Center is an organization striving to encourage Holistic Healing amongst the BIPOC Community of South LA.

 

Their website is hindering their goal to provide a brave and inclusive space to mobilize community empowerment through wellness, education and advocacy.

 

By reorganizing and rebranding their website to make a more clear, efficient,  and visibly engaging online space,  they will be able to better reach more people in their community, as well as spread awareness for holistic medicine and BIPOC cultural traditions. 

Proto Persona

Once we had a clear understanding of the current state of the website and the potential changes we could make, we set out to create a proto persona and hypothesize who our user is and what they likely enjoy.  

Gender: Female

Age: 24

Education: College Graduate

Occupation: Counselor 

Relationship Status: In a Relationship

Location: South Los Angeles 

Personality:

- responsible, optimistic, extroverted, community-oriented

Hobbies: 

- plants, crocheting, small-business

Seeking: 

-community and local events

image.png

User Research

For the User Research segment of this project we decided the most effective and insightful data we could collect would be to run user tests of the current website and see how the current user experience is received and where the biggest pain points existed.

User Insight

Asia Thompson is looking for community and alternative ways to heal her systemic trauma amongst peers. She is passionate about the benefits of holistic healing alongside modern medicine and is looking for ways to engage in her community that align with her interests. She enjoys attending local events and meeting new people and is looking for an organization that can connect her to a community where she feels seen quickly & easily.

User Interview Key-Points

My team and I conducted three in depth user interviews in which we had users attempt to complete key tasks on the website in order to measure ease of use and also general enjoyment of the site to see where change would be the most impactful. Below are the key take-aways from those interviews. 

Interview 1
  • Website is awkward

  • Couldn’t find organizations social media 

  • Found events easily

  • Looks unprofessional

Interview 2
  • Hates the font

  • Feels informative

  • Chaotic neutral vibe

  • Newsletter should be updated

  • High quality photos

Interview 3
  • Font hard to read

  • Straight forward

  • Upcoming events not clear

  • Simple menu bar

  • Photos unclear as links

Affinity Diagram

Once we had gathered all our data we created an Affinity Diagram to see where the natural groups of interests and concerns fell. We ended up breaking our data into four main categories: functions that work, functions that aren't working, aesthetic compliments, and aesthetic issues. 

Functions That Work

- A good amount of information featured

- Feels informative

- Straightforward menu bar

- Can easily sign up for the newsletter

- The site feels organized overall

Aesthetic Compliments

- Font is hard to read

- Weird spacing on pages 

- Weird logo

- Plain/boring design

- Looks unprofessional

- Feels chaotic and awkward

- Resources and services tabs are vague

Functions That Don't Work

- Hard to find sign up page

- Photo unclear as link

- Could not find instagram link

- Home button awkwardly placed

- Hates how photos are mystery buttons

- Wishes upcoming events were more updated

Aesthetic Issues

- Navigation bar looks fine

- Likes the colors

- Likes the earthy vibes

- Enjoys the high quality photos

- appreciates the straightforwardness of the site's organization

Ideation Phase

Once all our User Research was complete organized we felt prepared to move on to the ideation phase of the process.

UX Scenario

In order to start brainstorming what web features our User would like to see changed or benefit from we engaged in a UX Scenario exercise to find the gaps our user was experiencing that we could fill. We wanted to outline what the ideal User Experience would be so we had a goal to move toward and a North Star to point toward when considering changes within the User Flow. 

User/Persona

Asia Thompson
Age: 24
Education: BA
Occupation: Counselor
Personality: Responsible, Optimistic, Extroverted, Community-Oriented

User Scenario

Asia has lived in South LA for some time now and is looking for ways to more deeply connect with people in her community. She is checking online for different resources and comes across the Roots of South LA Wellness Center.

Goals
  • To find community

  • To discover new local events

  • To grow in her holistic practice

Risks & Emotions

Step (1) wishful, wanting, stressed, ready for a break Step (2) determined, persistent, research gal

Step (3) excited, optimistic, hopeful Step (4) triumphant, satisfied

1.

Asia is seeking new friends and events in her area

She begins scouring the internet for possible groups.

2.

Asia finds Roots of South LA and notices their values align with her own.

3.

She signs up to attend the Womxn's Healing Circle next Wednesday

4.

Prototypes

After completing the ideation portion of the process we moved on to prototyping. 

Since we knew most of the feedback we had received during our initial user interviews was around features and function and not the actual layout of the site we elected to keep the original wireframe structure of the website and iterate how to make the user flow more intuitive. 

Since this was the approach we chose we elected not to create a User Flow Diagram or Sketches and jump into our first iteration of the site, focusing on layout and usability.

The link to our first iteration can be found here.

First Iteration

Style Tile

Once we had a strong foundation for the layout and structure of the website we began creating a style tile for the website so we could begin to incorporate Interface Design into our prototype.

 

While our major goal was to make the site more user friendly and bring modern design to the website, we wanted our proposed revamp to still feel authentic to the non-profit's original branding and mission.

 

With this in mind we chose colors that echoed the original branding just with more contrast between the two primary colors of the site and a more cohesive color pallet overall. We selected fonts that had the same sophisticated feeling but would be easier to read for the user, created buttons that would clearly indicate their specific use cases, and modern consistent headers and footers to give the site a more polished look. 

Second Iteration

We then implemented this style tile to our second iteration of the site. 

At this stage we also incorporated their Instagram Feed as well as some working buttons and menu selections.

The link to our first iteration can be found here.

Once we were happy with the iteration we did a quick round of guerrilla testing and this was the feedback we received: 

 

  • Likes the colors, but could be more consistent with design 

  • Search bar doesn’t close

  • The font is more readable, but there are problems with the hover feature

  • Overall the web flow is straightforward and working well

Final Iteration

We took the feedback from our testing and iterated on our prototype once more to fix any bugs and add a few additional features to give the prototype a finished look 

The link to our first iteration can be found here.

Client Reveal and Final Thoughts

Once we were satisfied with our prototype it was time to show it to our client. We set up a meeting with one of the founders of the non-profit to show her our work. She was blown away with what we had accomplished in such a short timeframe and very thankful that we had taken the time to show her our process and data behind the choices we made. We gave her full access to our prototype, style tile, an organized file of all the data we had collected, and our recommendations on how to implement some of our suggestions easily into any web building tool so if they wanted they could make impactful changes in a short amount of time. 

Overall, I really enjoyed the process of this project. Being able to work on a team to maximize our impact in our short two week sprint as well as working for a cause that means so much to me was both a challenging and rewarding experinece.

bottom of page