QWELL is a nonprofit based in Austin seeking to improve the quality of life for LGBTQIA+ people

QWELL Portal - HiFidelity Mockup

Designing a Community That Cares

“One of the people you interviewed called me crying. She just burst out in tears because she loved what you all were building so much!”


- Clayton, Our Client

Overview

Austin is the 3rd largest LGBTQIA+ city, but much of the community feels isolated and ignored because only mainstream LGBTQIA+ causes are supported.

We had two primary users with different needs: community organizers and business representatives. We tested 4 concepts and iterated on a design that combined the best of each. This final concept allowed both target audiences to post their needs so they could find each other. The client was so impressed with our work, he resolved to come back to Flatiron. One of our test participants even cried because she loved what she saw so much!

During the course of this project, I learned the importance of presenting design decisions over results, when to leave off features that are out of scope, and what it really means to be a team player beyond just collaboration.

Team:

We were a team of three UX Designers working remotely. Our instructor only provided feedback and did not make design decisions.
I was the team lead through most of the project. Everything shown below details my own contributions.

Tools:

Figma for remote collaboration while designing, as well as the final prototype
Invision for clickable prototypes
Miro for remote workshops with the client
Google Docs, Sheets, and Slides for deliverables and remote collaboration
Zoom for remote meetings and interviews
Otter.io for interview transcriptions
Storyboard That for storyboarding
Slack for team communications

Timeline:

3 two-week sprints each focused on a different phase of the design process. We met with the client once per sprint, with an additional kickoff meeting during the first week.
- Note: Due to the COVID-19 pandemic, some deliverables were cut and our team was impacted throughout the project.

Project Brief

This was a real-world project for a client as the final team phase of the Flatiron School UX Design course. Our client, Clayton, created QWELLAustin.org (as well as AustinOutpost.org and CityPride.org) to strengthen Austin’s LGBTQIA+ community. He wanted us to create a hub that connected affirming businesses with organizers to support initiatives for the community, heavily inspired by Unilever’s Take Action site.

Our scope was to deliver mid-fidelity designs for desktop and mobile that he would later get UI designers, and eventually developers, to implement.

Identifying the Problem

A community that feels unacknowledged and under-resourced

Despite Austin being the 3rd largest LGBTQIA+ city in America, many people felt isolated from the community. Clayton carried out a survey that showed how most LGBTQIA+ people felt like their needs were unmet or ignored professionally as well as personally. Through domain research and user interviews, we discovered:

😔

30% of LGBTQIA+ individuals working at a nonprofit report that they experience depression as a result of an “unwelcoming work environment.” (Nonprofit Times, 2018)

😕

Community organizers found it very difficult to get enough support for specialized, meaningful causes beyond parties and parades for white gay men.

😶

Business representatives did not know how to influence funding decisions, or even get supervisors to care about supporting causes that did not have an obvious impact or relevance to the company.

These are the top findings from the first round of our user interviews that lead us to this problem

During our first two meetings, we simply wanted to present our findings and ask the client for what he wanted to do. But we realized that it was better to tell him what we thought should be done next. This made it easy for him to say yes or no and provide useful feedback.

See the top findings from the first round of our user interviews that lead us to this problem

Decision Making Process

Our strategy was to empower the community

We conducted four client workshops, facilitated three rounds of user interviews, and designed several iterations of wireframes and prototypes before we delivered the final solution. During each client meeting, we presented our findings and deliverables, then ran a workshop with our client to extract his ideas and critique.

Proto-Persona Workshop

During the kickoff meeting, I chose to utilize a proto-persona workshop to learn what the client knew about his target audience. He outlined two types of users:

Community Organizers

Creates events and initiatives. They are LGBTQIA+ people or allies who want to directly champion a specific cause for their community.

Business Representatives

Supports causes through their company. They work at mid-large companies and are allies or members of their company's LGBTQIA+ affinity group.

User Research Methodology

We chose the following research artifacts to inform our decisions throughout the design process. Each round used the same pool of interview participants:

🎯 Competitive Analysis and domain research to learn more about the marketplace and find out where the community was being underserved with current solutions

🎯 (Round 1 ) User interviews & Subject Matter Expert interviews to gather qualitative insights about the problem

🎯 (Round 2) Comparative usability testing to contrast our divergent concepts

🎯 (Round 3) Semi-structured, task-based usability testing to test key features in the converged design

These are the specific questions I asked for each round.

User Research Artifact - Design Principles

Based on our round 1 research findings, we also created design principles that specifically addressed our interview participants’ biggest worries around authenticity, inclusion, and recognition.

🌈  A place for everyone 🌈
🛠  Resourceful 🛠
🌟  More than rainbow stickers 🌟
💸  Economically sustainable 💸
💖  Meaningful 💖
🎯  Relevance beyond mission statements 🎯
🔗  Connecting should be easy 🔗

Discovering Authenticity

They wanted meaningful and authentic resources for their specific needs

During the process of creating a site map, I realized how important the Dashboard feature would be for this product. Initially, we thought about it as a typical account settings page. But mapping out how the site would work to this detail showed me a major value-add that we nearly missed:

💡 Both organizers and businesses alike needed a way to organize all of their activity, to manage the contacts they make and the initiatives they support.

Because right now, all people have is a digital pile of text messages, emails, spreadsheets, and google docs.

A major insight we learned from user interviews was the need to easily show the 💖 meaningful💖  impact an initiative would have for both businesses and organizers.

Another insight was the inclusion of more 🛠️ resourceful🛠️  ways to contribute to a cause other than monetary donations (a highly regulated and onerous process).

A Powerful Solution

A content-first, dashboard-centric portal to post affirming business and community initiatives

Our converged design took the best parts of each of our divergent concepts.


Participants loved having a homepage that allowed them to see everything that was available without having to search the site for it. I thought this meant creating a page where people instantly could see the full scope of the site: content, filters, features, navigation, and any other options.

QWELL Portal Homepage, V1

Looking back, I can certainly understand why this was bad, but in the moment, I thought I was giving the users everything they said they wanted from the interviews…

The client and most test participants thought my design was very useful... but it was too busy, confusing, and cluttered. 😰

It took them too long to figure out how to use it.

Version 2 - Simplicity and Guidance

Using feedback from our usability testing, I implemented the following:

1) onboarding to funnel people to the relevant filters

2) a streamlined homepage that focused on the content

3) a standard sidebar for advanced filters

QWELL Portal Convergent Design, V2

(Full clickable prototype available on Figma)
Lo-and-behold, I came right back around to almost copying Unilever’s design! In our version, I standardized the card sizes, tying each to activity level. This served the purpose of rewarding the more active and trusted community members with  🌟 recognition🌟  beyond just badges. This focus also allowed me to create a more detailed yet simple filter system.

There was an even split between those that wanted to see a list vs a map view, plus the client’s preference for a grid view, so we made it  🌈  a place for everyone 🌈  and designed a homepage with multiple ways to explore the community.



Evocative Outcomes

So delightful it drew tears of joy!

During our meetings, the client was excited to see the evolution of how our concepts solved his user’s problems. Clayton was so impressed with our deliverables that he repeatedly mentioned wanting to come back to Flatiron so that a team of UI designers could continue our work.

Best of all, one of the people we interviewed loved these concepts so much that she called Clayton and cried about what we were designing, excited to see this get made.

Here are a few of the many kind words our interview participants said about the designs:

“I would love to see my affinity group have access to this (dashboard) so they can see all of it on their page”
“I love that this is … the only one of its kind, you know, like a home base for for this work that feels like it’s pretty kind of like spread out throughout Austin and there’s not really a good grounding home base for it.”
“The dashboard to me is what makes it different from just a searchable database. It makes it much more of a marketing tool. And that I think, is what makes it … the most valuable.”

QWELL Portal Favorites

QWELL Portal Admin Data Dashboard

Dashboard for QWELL admins to easily see important data measuring the impact of the overall portal.

Lessons Learned

Though I worked remotely for years before COVID, having to manage my mental health, energy levels, and time during this crisis was a new experience in and of itself. Here are my key takeaways:

Working with a client sometimes requires a focus on insights and decision-making above talking about process and presenting options.

During our first two meetings, we simply wanted to present our findings and ask the client for what he wanted to do. But we realized that it was better to tell him what we thought should be done next. This made it easy for him to say yes or no and provide useful feedback.

Sometimes it’s better to leave a feature off if the process for that feature is far more complicated than the scope of the project.

The donations feature mentioned above was not the only complicated function we wanted to include. We attempted to include educational resources, a community store, and even talked about an IoT device for a while as well.

Being a ‘team player’ is not just about collaborating, but also communicating.

When times get hard and your team is struggling with deadlines, it is critical to reach out and see how everyone is doing. We did not communicate very well during Sprint 2 and our divergent concepts suffered for it. During Sprint 3, I made sure to check availability and was thus able to adjust timeline and deliverable expectations with the client proactively.

More Case Studies

Dewey

School Project - UX Design

We designed a website helping job seekers utilize their local library to prepare for a new career.

iSimu VR

Work - Service Design

I lead the development of an operations manual to codify standards, improve service, and increase productivity of a VR arcade.

About Me

My Story - TechnoWizard Origins

I want to massively change the world for the better with magical technology and ambitious empathy.

OverviewProblemProcessDiscoveriesSolutionsOutcomes