Nina Barnett
UX/UI designer

Supporting
the LGBTQIA+
community to feel
safe and included

A new web design to engage members and allies

UX/UI
UX/UI

Overview

QWELL Community Foundation is an organization with the purpose of engaging, connecting, and supporting Austin’s LGBTQIA+ community to improve their well-being. 


Qwell created CityPride.org as a place for those in the community, along with allies and organizations, to build relationships and work together. Now, it was time to redesign their website, in order to make it easier to refer each other to businesses and services, that are safe, affirming, and friendly to people who identify as LGBTQIA+.

My Role UI DesignResearchInformation Architecture User InterviewsAffinity DiagrammingInteraction Design CollaboratorsBrian Diaz (upper left)Dimitri Andros (upper right)AgencyDesign System QWELL Community Foundation Completed in 4 weeksJuly 2020

My Role
UI Design
Research
Information Architecture
User Interviews
Affinity Diagramming
Interaction Design

Collaborators

Brian Diaz (upper left)

Dimitri Andros (upper right)

Agency
Design System QWELL Community Foundation

Completed in 4 weeks
July 2020

What we did

I worked on this client project with two other designers to create a web-based portal that integrates with their current overall site architecture.

In only four weeks, we conducted research, explored visual designs, and created a prototype to successfully create a design system in Figma for CityPride.org. This demonstrated our ability to synthesize and converge ideas to hand off to a developer, in order to build the final product. It helped us realize future opportunities to bring the LGBTQIA+ community together.

15
Interviews
3
Usability Tests
4
Iterations
3
Sprints
CHALLENGE
UX/UI
UX/UI

Goals

As the third largest LGBTQIA+ community in the
U.S., Austin, TX lacks a meaningful LGBTQIA+ experience where members of the local community and businesses can support LGBTQIA+ members by posting initiatives.
 

PROCESS
UX/UI

Competitive Analysis
& Site Map

We researched indirect competitors, and assessed color palettes, use of imagery, layout, call-to-action buttons, and various UI components and learned:

  • Use a lot of imagery, a top navigation, and clean, sans serif fonts

  • Use bright and bold colors

  • We were better able to understand what it means to be inclusive in the LGBTQIA+ community, and that this community truly needs a space where they can all come together in unity and peace

Site Map

Site Map

Wireframes

The wireframes we received came from another student team,
and I made decisions to reformat the pages shown.

UX/UI

Usability Testing

Due to COVID-19, three rounds of interviews were conducted and recorded remotely using Zoom video conferencing software. Two team members conducted each interview, with one as a facilitator, and one as a scribe.

INTERVIEWEES

  • General members of Austin’s LGBTQIA+ community who are trying to identify supportive businesses in Austin

  • LGBTQIA+ and ally employees or own a business in Austin

  • Are part of an organization that would post a need related to improving the well-being of Austin’s LGBTQIA+ community

4-6
Participants
3
Interview Rounds
25 - 70
Age of Participants
“My community is a place to give and receive love.”
Methodology

Methodology

Sprint 1


Desirability testing on our team’s style tiles gave us a clearer idea of what design direction to move forward with, based on what visual elements resonated most with our audience.


GOALS

  • Understand which design elements represent the intended set of attributes and emotions—feelings associated with connection, remarkability, motivation, and community

  • Find opportunities in our design direction based on what the user expects or wants

  • Explore the specific visual elements or overall designs that make the biggest first impression and are the most memorable

UX/UI

RESULTS

  • Inclusivity and Ethnic Diversity: Users want the designs to reflect the diversity of the LGBTQIA+ community. They want to feel represented and show a sense of belonging, and also preferred full-color photos.

  • Modern and fresh: The use of bright and fun colors was favored over traditional primary colors, for it’s modern take on the rainbow.

  • Connection with community: We learned of the importance of making our designs easy for community organizations and local businesses to navigate, in order to connect, find ways to get involved, and build the relationships they seek.

  • All visual elements are organized and balanced: Users prefer UI elements that are simple and easy to understand. They also want content that is quickly scannable, where the hierarchy is clear, and there is negative space to keep the design clean.

Design Principles

It was insightful to come together with my teammates after the first round of interviews to synthesize the data. This became the basis for creating the principles, so that good design decisions were made throughout the project and that we stayed on the same page with our client.

UX/UI
After the user did a qualitative word association using Microsoft’s Product Reaction cards to choose three to five words to describe their initial feelings, they were shown a series of three examples of the same screen to see which one they preferred.

After the user did a qualitative word association using Microsoft’s Product Reaction cards to choose three to five words to describe their initial feelings, they were shown a series of three examples of the same screen to see which one they preferred.

Sprint 2


In this round of desirability testing, we diverged to create high-fidelity web pages, and showed three different design directions.


This desirability test validated the chosen direction based on the users’ preferences of which elements best represent the goals for
this website. It also helped to see opportunities based on what
the user expected or wanted to see, and determined the best ways
to iterate.




RESULTS

  • Rounded corners and plenty of white space

  • Black background navigation was preferred

  • Come up with less distracting color scheme

  • Option to sign up later

Data Results

Data Results

Sprint 3


Our team converged the individual designs in order to show one cohesive prototype for this round, where we tested for desirability and usability.

METHODOLOGY

Quantitative Data

  • Difficulty Rating for each task (1= Very difficult; 5=Very easy)

  • Pass, Assisted Pass, Fail for each task



Qualitative Data

  • Were there any specific elements that you reacted to?

  • Describe moments during the task where you felt unsure of what to do

  • Overall thoughts on how this website looks and works

RESULTS

  • All users completed the tasks without assistance

  • Simplify the “Out Youth” page

  • Make icons look clickable

  • Rework the “Out Youth Prom” page hierarchy 

  • Use more people of color in the photography

50% of participants were able to complete this task, and also had some difficulty.

50% of participants were able to complete this task, and also had some difficulty.

“I like the pops of color, and it’s not overwhelming
with the rainbow.”
SOLUTION
UX/UI

Look & Feel


MOODBOARDS

Based on a conversation with the client around remarkability, I chose to focus on that attribute in this moodboard. Other explorations focused on feelings associated with connectivity, happiness, motivation, and community. Ultimately, the design solution would convey all of these.

UX/UI

STYLE TILES


The users preferred a Style Tile that looked the most straightforward and professional, but the client liked the energy of mine, which was more creative. The diagonals were a bit too much, but these brighter colors gave a fresh and modern approach to the rainbow.

The final style direction combines elements that stand out, along with those that are straightforward and balanced.I found it very interesting that over and over, users value predictability.

The final style direction combines elements that stand out, along with those that are straightforward and balanced.
I found it very interesting that over and over, users value predictability.

FINAL PRODUCT
UX/UI

Design System


As a team we each took on various pages of the Design System, which includes instructional information for the Typography, Color Palette, Feature Elements,  Iconography, and Navigation. 

Recommendations

UX/UI
WHAT I LEARNED
UX/UI

Diverging and Converging
in Figma

This project gave me the opportunity to work on a website, with a remote team. This collaboration process was very valuable, since we diverged and then converged on our designs, in order to deliver a single MVP for our client. Plus, it was fun to work on the same document at the same time.


Doing user interviews over Zoom worked out pretty well, since I was able to share my screen to show the work, and could also see the facial expressions while hearing the participants’ feedback.

Another thing that was reinforced with real users was the importance to test early and often, before getting hung up on any one design direction. It doesn't have to be perfect in order to test. You test so that your product can become the best it can be for the user.

To learn more about me, I can be reached at
nina@ninabarnettdesign.com or 206.679.2409.