• LinkedIn
Logo.png
ALTERED. logo-2.png

I took it from poor accessibility, to bold contrast with color.  All the while, keeping in mind that these colors should still feel welcoming.

Mockup

With a style guide built for branding, and wireframes establishing a foundation, I began implementing color.

Who Are the Users?

Primary Users

Members of the LGBTQ+ and BIPOC community: black, queer, female-identified or non-gender conforming people are frustrated with lack of alternative therapy for and served by members of the community.  So they're looking for safe-space that connects them with resources and practitioners.

Secondary Users

May be allies and are generally seeking resources to help those in the LGBTQ+ community.

VISUAL DESIGN

Branding

After building out the wireframes it was time for me to put some past skills to use, and create a style guide for Altered branding.  The stakeholders provided a "text logo" but wanted us to come up with something else.

Working within platform constraints

One of the challenges we faced with the visual design of the site was the constraints of the development platform. The stakeholders informed us that they'd be developing the website themselves, using Squarespace. So, we had to be mindful that while most anything can be done in Squarespace, it requires a considerable bit of knowledge in coding , as well as additional funds for plugins. 

Altered Case Study V2 (7).png

I researched various templates, as well as tested some of the limits with customization in Squarespace to mitigate potential issues in development, and adhered to those constraints in the design process.  

REFLECTION

Our client was looking to develop a platform that was very personal to them.  Off the bat, they put a lot of trust in us to develop a website that would best serve their community.  We did that to the best of our ability given the constraints we had, by focusing our energy on research within the communities they aimed to serve. 

PROJECT OVERVIEW

Web Design

We branded & designed a website and newsletter tailored for BIPOC and LGBTQ+ communities.  Our clean design, using calming colors and easy navigation mak4es the site a great place to want to connect and gain access to healing information and resources for people within the community.

My Role: UX Researcher, UI & Visual Designer

Team: 3 UX Researchers, 2 UI Designers

Tools: Figma, Zoom, Miro, Maze, Adobe Illustrator, Google, docs, Squarespace

Stakeholders: 2

Timeline: 2.5 Weeks

The Goal

We would explore branding, and conduct research that informs a website design suiting the need of healing services tailored to the BIPOC & LGBTQ community; in turn, highlighting relative content based on expressed user needs.

The founders of Altered have spent the better part of a decade serving their community through spiritual guidance and career services.  The mission for Altered is to further extend services of self care for the LBTQ+ community, and highlight those resources through a newsletter. 

DISCOVERY

Competitive Analysis • Surveys • User Interviews 

After meeting with the stakeholders to hear their vision, we had a good idea of what they wanted.  To kick off our research we were able to tap some of their resources, including competitor sites, and other websites that help the communities they aim to serve.

Competitive Analysis

Our client provided a list potential competitors to better understand what trauma-informed care is, and what it looks like for the BIPOC & LGBTQ+ community. Paying close attention to usability, content, branding, we looked for opportunities to emulate and improve upon some of these existing platforms, paying special care of the messages being sent, and consistency between messaging and branding.

Copy of Altered Case Study.png

THE PROBLEM

Members of the BIPOC & LGBTQ+ community encounter a lack of resources and support from relatable, reliable service providers who can sympathize with their unique set of struggles. In turn, this can exacerbate mental health issues and feelings of isolation.

ALTERED

A space for transformative healing.

Some of the competitors exhibit inefficient use of space.

BEAM.JPG

High cognitive load is counter-intuitive for good user experience, especially of those who are seeking help.

TENDING THE GARDEN.JPG

Poor use of visual space and bandwidth: e.g. Events calendar is empty on most monthly pages.

Surveying the Community

Wanting to reach as many in the community as possible to better understand their needs, we opted to conduct surveys within the BIPOC & LGBTQ+ communities.  Our questions revolved around both, healing services and the use of newsletters.

Altered Case Study V2 (3).png
Altered Case Study V2 (4).png

The majority of users feel comfortable seeking service providers online, but prefer those who are part of the BIPOC or LGBTQ+, being more familiar with their unique struggles.

User Interviews

Our team conducted 5 interviews with a combination of practitioners and users from the community.  We found that:

  • Users feel there are generally a lack of available services for their respective communities.

  • Users want to feel a sense of safety, compassion, and authenticity.

  • They want to support and be supported by others within the community.

  • Newsletters help users to keep up with resources and events.

  • They want to be able to engage, ask questions.

HOW DO WE SOLVE THE PROBLEM?

The biggest frustrations are that there are a lack of providers who specialize in alternative therapy, and even fewer to that are part of the BIPOC & LGBTQ+ communities. We needed to create a safe-space that connects users with access to practitioners, information, and events relative to healing.

Design Studio

After some brainstorming and creating some possible user flows, it was time to "put pen to paper"

We iterated our way to a good foundation for the design, keeping in mind that the following were necessities, in order to address our key findings:

  • A warm-comforting hero image - to help create a sense of safety, compassion, and authenticity.

  • Mission statement - showing intent to support those within the community.

  • Showcase: Resources, Events, Practitioners - to supplement the lack of available services.

  • Newsletter subscription - to keep subscribers in-the-know. 

  • Chat feature - to allow users to engage, and ask questions with prompt feedback.

Sketch to Mockup process-01.png
Home Page Hifi Full.png

Menu Bar on all pages for ease of navigation

Altered logo always takes user to the home page

Warm-comforting hero image and welcoming tagline helps create a sense of safety

Showcasing resources, events, and practitioners gives users immediate access to information they need

Newsletter Subscription keeps subscribers up to date

Other methods of contact are available for those not seeking prompt response

Users can get more information on the co-founders other sites

Chat feature allows users to engage with team Altered

Mission Statement gives clarity on who Altered serves and what the site provides

PROTOTYPE & USABILITY TESTING

Creating the Experience

After creating a Hi-fi prototype, we created three (3) tasks to help identify strengths and weaknesses of our design: Two (2) being the meat and potatoes of our gauge. The tasks were specifically geared toward making contact with the Altered team with the end goal of getting to the event sign up page, and exploring the site throughout the process.

Resources Heatmap.jpg

Iteration Before Presentation

Because there wasn't a whole lot of time for this project, we took the little that we had left and used it to address any glaring issues.

  • Make the “Welcome” text box clickable, navigating to the about page

 

  • Include clickable, live feedback-text that encourages/instructs users to engage with team Altered via the chat icon, on the home page (relative to task 1)

 

  • Make images above content descriptions clickable to relative content, as only the description was previously live

3

1

2

“Navigate to Black Remote She or Monty's Tarot Child”

“Now we invite you to explore the site…When you're done investigating, please find a future event to attend and select the event page for more info.”

“Reach out to the Altered team for immediate guidance in finding a practitioner”

100% Success

87.5% Success

42.8% Success

Approaching things differently

Looking back, there are still areas that we could improve upon, and if we were to have another go, or simply more time than the 2.5 weeks given to complete the project, these are some things I think we could have included in our process:

  • Conducting more user interviews

    • Conducting contextual inquiries on existing platforms to get verbal feedback on likes and dislikes

  • Conducting card sorts

    • To help discover what types of services fall under the given categories, and give further insight into prioritization of services

  • Conduct multiple usability test

    • We would have liked to create several rounds of grayscale usability tests before moving onto our high fi prototype

      • Would have helped identify IA issues, as well as enabled us to better check any assumptions and inferences made, and if they were supported by the research within the community.  

    • Conducting the usability tests in the form of Contextual interview, or at least having post-test interviews would have given greater insight on whether or not our design was meeting user needs.

  • Consolidating our questions into one survey could have benefited us in several ways: 

    • Getting more well-rounded idea of user expectations from the LGBTQ+ community

    • Making more efficient use of time when synthesizing.

Thank you!

For showing interest in this case study! I hope you learned a bit about my process, and how much I aim to grow as a UX/UI designer..  If you want to catch a glimpse of my mobile design, head over to the Corona Diaries study. Thanks again!

  • LinkedIn

©2022 Ronnie Barnett