Tools
Figma, Principle, Otter, Zoom, Mural
Collaborators
Brian Diaz
Dimitri Andros
Agency
QWELL Community Foundation
Nina Barnett
Product Designer
Supporting
the LGBTQIA+
community to feel
safe and included
A new web design to engage members and allies
About the Project
Challenge
To create a web-based portal that integrates with CityPride.org, in order to make it easier to refer businesses and services that are safe, affirming, and friendly to people who identify as LGBTQIA+.
Deliverables
• Exploratory Research
• User Interviews / User Testing Report
• Affinity Diagramming
• Information Architecture
• Interaction Design
• Mood Boards / Style Tiles
• High-fidelity Screens
• Prototype
• Design System
My Role
UI Designer
Timeframe
4 weeks
15
Interviews
3
Usability Tests
4
Iterations
3
Sprints
CHALLENGE
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
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
Wireframes
The wireframes we received came from another student team,
and I made decisions to reformat the pages shown.
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
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
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.
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
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.
“I like the pops of color, and it’s not overwhelming
with the rainbow.”
with the rainbow.”
SOLUTION
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.
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.
FINAL PRODUCT
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
Validate
After four weeks of research, analysis and design, I was able to validate the assumptions and changes that were made. I did this by testing my prototype with six users.
The results are:
Onboarding: 5 out of 6 users were able
to complete the task easily.
Locating OutYouth Prom: 6 out of 6 users
were able to complete the task easily.
Supporting OutYouth: 6 out of 6 users
were able to complete the task easily.
Dashboard: 6 out of 6 users were able
to complete the task easily.
WHAT I LEARNED
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.