Learning how to massively change the world for the better with magical technology.
Austin is the 3rd largest LGBTQIA+ city, but much of the community feels isolated and ignored because only mainstream LGBTQIA+ causes are supported.
3 UX Designers.
I was the team lead through most of the project.
Everything shown below details my own contributions.
Figma | Invision | Miro | Otter.io | Storyboard That | Google Suite
3 two-week ‘sprints’ each focused on a different phase of the design process. We met with the client once per sprint.
- Note: Due to the pandemic, our team was reduced throughout the project. I had to finish much of the final prototype myself.
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.
The following features were highlighted in the brief:
We started with a kickoff meeting to get to know the client and align with his goals.
Flatiron asked Clayton to source the interview participants that we would use throughout the entire project. He found 12 interview participants that we'd interview remotely. Four were categorized as 'Subject Matter Experts' (community organizers) and the rest as 'end users' (business partners).
We wanted to understand what his definition of both of these were, and why.
Who are we building this for?
What are their pain points?
What are the client's expectations for this project?
Here's what we learned:
Community organizers were nonprofit employees who did not feel supported at their job. They often organized LGBTQIA+ initiatives that their organization did not want to prioritize due to lack of funding, relevance, or perceived impact.
Business partners were corporate employees who wanted to utilize their company's resources to support meaningful causes, but didn't know how. They needed to show why supporting these initiatives would help them feel more supported.
There were an overwhelming amount of events, but most were surface-level (such as parties and parades). The community wanted more meaningful initiatives such as support groups and access to resources.
Clayton wanted to be a 'light on the hill' for Austin's LGBTQIA+ community. Which to him meant something that would be highly impactful, unique, comprehensive, and engaging.
After the kickoff meeting, we did some exploratory research to get more context about Austin's LGBTQIA+ community.
This included a competitive analysis where we unearthed the following:
I created a competitive analysis that showed us how organizations compared to QWELL's planned features
We did semi-structured user interviews with 9 of Clayton's participants to learn about their experiences and processes for supporting or organizing initiatives. (I interviewed 3 myself.)
Here are some example questions we asked from our user interview guide:
Allow me to share some of these great quotes from our user interviews rather than typical 'key findings':
“I'd like to think that we could connect with corporations who would want to sponsor us in some way, but I haven't ... figured out how that would happen through an LGBTQ lens necessarily.”
“I want to see a public display of their commitment to trans and LGBTQIA people. I want to hear or I want to see the words HIV. I want to see a reference to being trans affirming. I want to see those things on the website, rather than having to call them and ask them if they suck or not.”
“Once aware of them, I think that work is really really important not only from a civic rights standpoint, but it makes sense economically; it makes sense… for businesses to understand the power of the LGBT dollar... it makes sense to have that community in mind.”
"But for a city that is so... queer friendly, as it were. It sure is hard on our community. It's hard to afford housing, there is no Community Center where you would find resources. So unless you know where to to look, it's incredibly hard to find resources. Because there's no centralized information really. There are lists compiled by places, but you would have to know where to find those people to tell you, or where to find those. Like if you just move here and you don't have any ties to the community, you're out of luck.”
Though we failed to record this in the summary, there were quite a few stories of people experiencing, witnessing, or fearing acts of violence as well.
This was an important context I kept in mind.
Community Organizer/SME Findings:
Business Ally/Representative/End User Findings
Both SME and User Findings
During this process, we realized that the 'subject matter experts' had just as much stake, if not more, in this problem.
We could not build something for businesses, without meeting the needs of community organizers as well. Furthermore, they didn't consider themselves 'SMEs' either. They were all users, but with specific needs and tasks.
We created Problem Statements to summarize these distinct needs succinctly:
Community organizers need an easier way to connect with local businesses, corporations, and other organizers, beyond personal networking, to access resources (such as space, services, and awareness) in order to execute impactful, meaningful initiatives that increase the quality of life for members of the LGBTQIA+ community.
Businesses need a way to show their support for the LGBTQIA+ community by sharing a range of resources in order to increase public awareness of the diverse and affirming culture they are creating for LGBTQIA+ individuals.
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.
🔗 Connecting should be easy, not a chore - Take the hassle, time commitment, and expense out of networking. Make it simple and straightforward to find an ally and make an introduction.
💖 Meaningful - Engage with organizations, events, and other initiatives with the purpose of making a measurable, positive impact in the LGBTQIA+ community.
🌈 A place for everyone - No one group should be the center of the LGBTQIA+ community. Give equal space, time, and resources for all groups, with special attention paid to frequently underrepresented groups.
💸 Sustainable - Strive for stability and self sustainability through involvement that empowers the LGBTQIA+ community to own their resources.
🛠️ Resourceful - Money is not the only, or most important, resource that should be highlighted. Make space for all types of resources that can be offered by different groups and organizations.
🎯 Relevance beyond mission statements - Help organizations see how their mission aligns with the needs of the LGBTQIA+ community and how getting involved will be mutually beneficial.
🤩 More than rainbow stickers - Offer recognition in genuine forms for businesses and community members who are meaningfully serving the LGBTQIA+ community.
I created a storyboard as a 'research artifact' to visualize our findings. This allowed us to see how the customers might accomplish their goals, and what their experience might be, based on what we learned so far.
After getting all of these insights, it was time to figure out how we would solve these problems.
We did divergent prototypes where each team member designed a separate mobile website.
My concept was built with what I saw as the biggest problems uncovered in round 1:
Making it easy to find everything going on in the community.
Simplifying the process of requesting and giving financial donations.
Rewarding and vetting the most impactful organizations with meaningful gamification
I tested this wireframe alongside the team's via a comparative usability test. We interviewed 5 people, switching up the order that we showed each concept to counteract recency and primacy bias.
See my Test Plan here
Here are the results for my concept (I personally interviewed 2 participants):
Key insights from all three divergent concepts:
I would want more of the ‘let's connect you to the places that already exist.’
Honestly, even though the participants had a lot to say, they weren't especially critical. There was simply no singular tool they could use for this work right now.
They were desperate for anything to come along and get them out of having to juggle dozens of spreadsheets, documents, emails, event pages, contact notes, and so on.
See a few more insights from our tests
Finally, we took those insights and came together to decide on a converged design solution.
But how do we use all of that research to develop our information architecture? Ideally, we'd do card sorts and tree testing... but we didn't have the time or resources.
Therefore, I put together a 'priority matrix' where I analyzed our research to reassess our goals, then organized the desired features that would help the users achieve those goals.
From this, I was able to put together a quick and dirty, internal-only outline to organize our design and delegate who would be building what pages.
Expose yourself to my barebones site map at your own risk
I was responsible for the Homepage, Leveling System, and the Dashboards (For QWELL team Admins, Community Organizers, and Business Representatives).
Users said they wanted a centralized directory to find any and everything going on in the community.
So I built a homepage where you could quickly see what was available with granular tags and multiple views for findability and discoverability.
Underneath this grid were buttons that lead to featured sites and (placeholder) cards for donations, shopping, and education.
Users said they wanted to see which organizations, events, or affirming businesses were actually contributing to the community, so they could give them more business accordingly.
I designed a leveling system that simplified my previous concept, clearly and simply showing how one could attain badges based on activity.
These badges could be shown on listings in the homepage and profile pages.
Users said they wanted an easier way to find, connect with, and manage their initiatives. They really needed to centralize all of their work.
I created dashboards for each user type. They all shared project management tools, impact stories, and support metrics.
See the other dashboard pages
Users would be able to keep track of everything from contact information, past work, to current day project status.
Seeing planned and future initiatives was almost directly translated from my teammates wonderful concept.
The QWELL team admins would need to be able to manage the platform. They should be able to see all the members, adjust levels according to safety needs, and see the contributions for each initiative.
Honestly, this admin panel came last and was a bit rushed. I know I shouldn't have tried to cram everything into one page, but did it anyways to try and meet our deadline. Ideally, the admins would be able to manually adjust all levels to ensure quality control, impact, and the sensitive nature of certain initiatives.
Unfortunately, life was getting really difficult for everyone. One of my teammates had to leave the program, so we had to drop some features we planned to build out. Luckily, our priority matrix and test results showed that the donation feature, community store, and educational resources could be left off.
I conducted 3 of the 6 scenario-based tests myself. Here are the key results:
Here is the full Usability Test Report
During our final client presentation, Clayton told us about how our participants have been calling him to share their excitement for this project.
One of my participants even cried because she loved it so much!
“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.”
To wrap this project up, we had to iterate on our designs based on the above user insights and client priorities.
We then had to create annotations so that a future UI team and eventually developers would be able to implement our designs.
It was clear I had to simplify the homepage. Furthermore, the participants really wanted to see the other views. Half of them preferred going through a list or map instead of a grid.
Wrapping up the final deliverables
By the end of this phase, I was the only one left with enough time to polish and deliver the final deliverables. In addition to the above changes, I also created a clickable prototype in Figma so that future teams could understand the flow more clearly.
I revamped and polished the (still untested) sitemap to reflect the new changes.
I created annotated wireframes with as much detail as I had the time and energy to create, with the hopes that future UI and developer teams could understand the user flows even without the user/task flow charts, or UI kit design system we neglected to do.
Finally, I put together a Future Recommendations document to outline everything that should be further developed, tested, and added.
Present insights over process.
Working with a client may require 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 understand what we learned, provide useful feedback, and say yes or no rather than play multiple choice.
Balance simplicity with scope.
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 from Round 2 was not the only complicated function we wanted to include but could not get right. We attempted to include educational resources, a community store, and even talked about an IoT device for a while as well.
Don't just talk about the work.
Being a ‘team player’ is not just about collaborating, but also communicating real life issues.
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 Round 2 and our divergent concepts suffered for it. We kept talking about what we wanted to do, only to apologize for not doing it due to the chaos of the pandemic. We didn't stop to discuss how this impacted the time and energy we could commit.
During Round 3, I made sure to check up on my team as they were dealing with other life issues. This allowed me to adjust the timeline and deliverable expectations with the client proactively.
Check your biases. Seriously.
Not only is 'delight' a constantly moving target... but it's also not something you can truly aim for. As it is too easy to slide into aesthetic bias and confirmation bias.
I stubbornly stuck with the grid-based design even though half of our testers didn't actually want to use it. I was too enamored with the idea of besting Unilever with a high-concept grid. I used cards and broke the grid where it would have been better to simply do a list or explore a more conventional directory.
I thought lists were boring, and spatially-mapped grids were oh-so-cool in my mind. Sure it looked eye-catching and the client liked that it was close to his vision, but our earlier testing hinted that users may not have known what they were looking at, even with a full-page grid.
I would have loved to test the final design, but I can only hope that we stuck close enough to our user research and client needs to have created something that solved the community's most important problems.
Clayton is a real client, with a real problem. The people we interviewed had real pain, and were so very hopeful for something (perhaps anything) to help solve that pain. Judging by how the client has still not changed his sites since then, I can only conclude that we were not successful. (Or maybe he didn't go back to Flatiron after all).
Either way, if/when I go back to work on this project. I would do far more interviews with different people in the community to really see what their most pressing needs are... and cast aside my own biases for 'new and unique' interfaces.
I would also challenge the assumption that being a 'light on the hill' necessarily means having a super high-concept homepage that is visually striking at the cost of usability.
What does it mean to be delightful? I am still learning that to this day.
Learning how to massively change the world for the better with magical technology.
Building a (stealth mode) SaaS platform to solve a critical problem for UX researchers.
Managed a virtual reality arcade to improve the customer service and store operations.