Kickoff - Meeting the Client

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.

Round 1 - Exploratory Research

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:

There was no single directory of services, organizations, or vetted safe spaces
There are very few mixed-use facilities where organizations expose people to resources beyond the organization's specific services
Most other organizations don't have a virtual community center where members can get connected with resources without having to come into a physical building

‍

User Research

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:

How did you find or hear about these events? [related to events they previously stated they were involved in]
How did you organize that event? [for those who organized an event]
What frustrates you about these events? [related to their least favorite events]
What are the most important services you feel like are not adequately addressed?
How do you find [businesses that are] community allies?

‍

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.”

~ Naomi S.

‍

“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.”

~ Jessica S.

‍

“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.”

~ Sara M.

‍

"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.”

~ Sage W.

‍

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.

Additional findings

Key Takeaways:

Community organizers found it very difficult to get enough support for specialized, meaningful causes beyond parties 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

Community Organizer/SME Findings:

Our SMEs prioritize inclusion and representation. They want their events to reach as many people as possible, regardless of who they are.
Our SMEs are busy multitaskers. These individuals often take on multiple projects and initiatives, in addition to their “day jobs.” They are frequently strapped for time and energy, no matter how much passion they have for a project.
Our SMEs hold strong convictions that inform their daily lives and experiences. This may mean avoiding anti-LGBTQIA+ businesses or rejecting corporate sponsorships; in any case, these personal values are tremendously important and not to be violated.
Our SMEs feel that their organizations are often missing resources that they truly need. Even for organizations that enjoy monetary support from many channels, there is a desire for other types of support, e.g. giving venue space, offering manpower, etc.
Our SMEs value “realness.” These individuals are wary of resources from businesses that come with stipulations or with an artificial or pandering feeling. They only want support from those who truly want to honor and affirm the LGBTQIA+ community.

Business Ally/Representative/End User Findings

Our users feel good about working at LGBTQIA+ affirming businesses. These individuals describe a sense of pride or warmth when they think of the good work their employer has done in the LGBTQIA+ community.
Our users don’t have much knowledge regarding their companies’ charitable giving programs. They expressed that they often didn’t know where money was coming from, how an organization was selected to be the recipient of charity, or what the company would “get out of” the giving.
Our users feel that inclusive hiring practices and support/affirmation of LGBTQIA+ employees boosts morale. These users said that these practices made their company a better place to work for overall.

Both SME and User Findings

Both groups rely on who they know to get work done. When searching for resources or potential organizations to support, they turn to their connections, made either in person or through social media.
Both groups have a strong preference for supporting LGBTQIA+ affirming establishments. When looking for a place to get a drink or go out to eat, for example, both groups are more likely to patronize businesses that welcome the LGBTQIA+ community. They also reject, when possible, anti-LGBTQIA+ establishments.
Both groups are highly visual observers. When looking for evidence of a business’s support of the LGBTQIA+ community, both groups first look for clear visual indicators of support, such as rainbow/safe space stickers, rainbow flags, openly queer employees of a business, etc.
Both groups are frustrated by the current process of finding and making mutually beneficial connections. These individuals want to be able to quickly find the resources they need, get in touch with the right people, and build the needed connections. The current process of relying on social media, networking, and email is too ineffective or too arduous for our groups.

Updated Personas

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
‍

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.

Business Representatives
‍

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.

User Research Artifacts

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.
‍
🔗 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.

Storyboard

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.

🌈 A place for everyone 🌈

🛠 Resourceful 🛠

🌟 More than rainbow stickers 🌟

💸 Economically sustainable 💸

💖 Meaningful 💖

🎯 Relevance beyond mission statements 🎯

🔗 Connecting should be easy 🔗

Round 2 - Divergent Designs

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:

My map directory addressed user concerns of not knowing what was close enough to access

‍

Making it easy to find everything going on in the community.

Location-relevant discoverability
Use filter chips to quickly find specific events
Fit more initiatives on screen at one time

‍

Simplifying the process of requesting and giving financial donations.

No need to search or call to get basic information
Effortless, transparent donations for any resource
Use of tags and related initiatives and businesses for further discoverability

‍

These profiles tried to solve user's problems of finding information about donations and figuring out who to contact

This Level Up page addressed user needs around education, measurable impact, and meaningful achievement

‍

Rewarding and vetting the most impactful organizations with meaningful gamification

Define and educate on unique needs of each group
Measure meaningful impact
Provide a sense of security and achievement

‍

Comparative Usability Testing

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):

Task 1: Interact with the map to connect with an organization -
Only 1 direct success

However, I realized my scenario was flawed, as at least 3 of the 5 knew how to use every feature of the map, but did not want to do so for this scenario.

‍

Task 2: Request or offer support for an LGBTQIA+ cause -
All 5 succeeded
But... 4 of the 5 thought this was over-simplified. They wanted to see more details before requesting or offering support. They also didn't want to check yet another app for messages.

‍

Task 3: Recognize how community support works -
All 5 failed
Nobody understood the connection between leveling up and the shopping center, or how to read a spider graph (and I doubt I made it correctly either). They loved the idea of providing safety and community recognition, but there was a lot that needed to be done to get there.

‍

Key insights from all three divergent concepts:

The Successes

We had a lot of useful features they have not seen done elsewhere (a map, project management, requesting non-financial features, etc)
They loved having highly personalized dashboards and accounts that made them feel seen and heard
Granular search and filter options were great for finding specific parts of the community important to them

The Failures

It was not clear whether this was for the general public, donators, or organizers. We needed to clarify who this was for and what they can do
Each concept felt like it was either missing features or oversimplified the process. We needed more depth
Account profiles and activity recognition needed to be more 'up front' to show what was available to them

‍

I would want more of the ‘let's connect you to the places that already exist.’

~ Naomi S.

‍

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

The designs helped our participants find relevant information and details about what help they can get or provide in the community
Most participants said they would recommend the concepts we tested
Our user base wants to reach someone or be reached quickly and that can sometimes happen by directing them outside of the site
Highly personalized profiles allow organizations to display as much or as little as they need to
A community map feature within the larger site can provide a useful way for displaying resources in Austin
Clarifying the verbiage used across the site and can create a welcoming environment and make the site more effective

Round 3 - Convergent Design

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

Version 1 - Giving them everything they wanted

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.

This homepage was Very busy... cluttered... I knew it even then, but I persisted because I figured our customers would prioritize utility over streamlined experiences...

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.

This Level Up page addressed user needs around education, measurable impact, and meaningful achievement

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.

The dashboards were inspired by one of my teammate's divergent designs.

I created dashboards for each user type. They all shared project management tools, impact stories, and support metrics.

‍

See the other dashboard pages

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.

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.

Usability Testing

I conducted 3 of the 6 scenario-based tests myself. Here are the key results:

Task 1: Find an organization to connect with from the Homepage -
Only 1 direct success... again.
Participants said that the page was too busy and cluttered. There was a lot going on and they did not know where to go or what to do first. They loved the granular filters and search options, but they wanted to be able to be guided more, and wanted to see the List and Map views (that I did not build out).
‍
Task 2: Request or offer support for an LGBTQIA+ cause -
All 6 succeeded
The profile pages (build my teammate) were very clear and straightforward. Participants liked having all the information we were missing in the last concepts. The forms could be more spaced out.
‍
Task 3: Manage initiatives and supporters using the Dashboard -
All 6 succeeded
Every participant loved the utility and ease of use of the dashboard. Still, there were some missing or unclear features they wanted to see such as notes, sharing, and a more detailed 'lives changed' section.
‍
Task 4: Receive/grant recognition with the Level Up feature -
5 out 6 succeeded
This leveling system was far more understandable and straightforward. Everyone understood it and gave great suggestions on what could be offered for each level. However, it would have been better if this was more upfront and not 'hidden away' so people knew what the levels were earlier on.
‍

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!

More glowing remarks:

“I would love to see my affinity group have access to this (dashboard) so they can see all of it on their page”

~ Sage W.

‍

“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.”

~ Naomi S.

‍

“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.”

~ Adan

‍

Final Handoff - Future Recommendations

Version 2 - More simplicity, more depth

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.

Full-page grid view guides the user to focus completely on the community initiatives. However, I now see why even this 'simplified' version would likely not have tested well...

Grid View

Non-standard grid to account for dynamic content
Filters hidden in a sidesheet for less clutter & more options
The simple overlay only shows Favorites and Views

List view allows users to quickly scan and compare initiatives

List View

This is the only view where it made sense to add filter chips at the top
Each column highlighted the top things users wanted to know

‍

Map view enables location-based search and discovery

Map View

Location-based searching
Quickly toggle types of resources outside of filters

‍

Building out a comprehensive dashboard - Additional changes

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.

See full annotated wireframe PDF here

Finally, I put together a Future Recommendations document to outline everything that should be further developed, tested, and added.

‍

Lessons Learned

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.

Final Thoughts

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.

Menu

Overview

‍

Team:

Tools:

Timeline:

Project Brief

Kickoff - Meeting the Client

Round 1 - Exploratory Research

User Research

~ Naomi S.

~ Jessica S.

~ Sara M.

~ Sage W.

Updated Personas

Community Organizers
‍

Business Representatives
‍

User Research Artifacts

Round 2 - Divergent Designs

Comparative Usability Testing

~ Naomi S.

Round 3 - Convergent Design

Version 1 - Giving them everything they wanted

Usability Testing

More glowing remarks:

~ Sage W.

~ Naomi S.

~ Adan

Final Handoff - Future Recommendations

Version 2 - More simplicity, more depth

Building out a comprehensive dashboard - Additional changes

Lessons Learned

Final Thoughts

More Case Studies

TechnoWizard

Delta CX

iSimu VR

Overview

‍

Team:

Tools:

Timeline:

Project Brief

Kickoff - Meeting the Client

Round 1 - Exploratory Research

User Research

~ Naomi S.

~ Jessica S.

~ Sara M.

~ Sage W.

Updated Personas

Community Organizers‍

Business Representatives‍

User Research Artifacts

Round 2 - Divergent Designs

Comparative Usability Testing

~ Naomi S.

Round 3 - Convergent Design

Version 1 - Giving them everything they wanted

Usability Testing

More glowing remarks:

~ Sage W.

~ Naomi S.

~ Adan

Final Handoff - Future Recommendations

Version 2 - More simplicity, more depth

Building out a comprehensive dashboard - Additional changes

Lessons Learned

Final Thoughts

More Case Studies

TechnoWizard

Delta CX

iSimu VR

Community Organizers
‍

Business Representatives
‍