I took it from poor accessibility, to bold contrast with color. All the while, keeping in mind that these colors should still feel welcoming.
With a style guide built for branding, and wireframes establishing a foundation, I began implementing color.
Who Are the 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.
May be allies and are generally seeking resources to help those in the LGBTQ+ community.
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.
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.
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.
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
Timeline: 2.5 Weeks
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.
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.
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.
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.
A space for transformative healing.
Some of the competitors exhibit inefficient use of space.
High cognitive load is counter-intuitive for good user experience, especially of those who are seeking help.
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.
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.
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.
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.
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.
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
“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”
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.
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!