LGBT Community Network

Role: UX Designer
Timeline: 14 weeks
‍Team: 1 Product Manager, 1 Design Lead, 2 Designers
‍Tools: Figma, Wordpress

For 14 weeks, I worked with the LGBT Community Network (LGBTCN) through volunteer matching organization Develop for Good's summer project cycle.

LGBTCN previously participated in Develop for Good's spring project cycle, where the previous team began the first iteration of the website redesign, including conducting initial user testing. Our summer cycle work was from their first iteration.

The LGBTCN was founded nearly 21 years ago, and has expanded to include more chapters, events, and programs in Central California to support the LGBTQ+ community. In order to support this expansion, they tasked us with redesigning the website to improve the user experience and to support their growing organization.

I worked closely with my team to research, ideate, design, and implement changes and improvements to the LGBTCN website, specifically for their Get Involved page. In terms of research and testing, I conducted usability testing as well as competitive analysis throughout this project. In addition, as part of my work on the donation page, I also researched various donation plugins and discussed the pros and cons with our client and overall team.

We checked in with our client, the Executive Director at LGBTCN, frequently for feedback, and held design critiques and sometimes troubleshooting sessions every meeting with other designers, design lead, and our PM.

INITIAL PROBLEM STATEMENT

💁🏻‍♀️ How might we make our website more user-friendly?

USER RESEARCH‍

🤔 Users were confused and frustrated by some of the pages

Categorizing responses from our user interviews.

Since our audience would be mainly LGBTQ+ people looking for resources, we conducted user testing with three of our LGBTQ+ friends, having them go through the website while we asked questions. We then took insights from each interview and put them on a board to see trends in our observations. From our research, we found that:

  1. People are still having a hard time understanding the goal of the website because the starting information is not clear.
  2. Users were feeling confused by the dropdown experience, as the page shown by clicking on the name was different than the subtopics in the dropdown.
  3. Users were frustrated by the Get Involved page and the footer, so they need to be more consistent and easier to read.
  4. We need to change our language and layout of our Directory page to make it more specific and organized if the organization decides to expand further.

Unfortunately, we did not have the time to conduct more user testing. In the future, however, I would want to gather more feedback from LGBTQ+ individuals on the website to further improve our designs and gather more potential pain points from our users.

During this two-month span, I was only able to fully redesign one page of the website - we wanted to be more thorough in our redesign process and I wish I was able to work on more pages. Unfortunately, our client decided not to participate in a third project cycle, but I hope a deep dive into my redesign of a page provides some insight on my creative process.

IDEATION: GET INVOLVED PAGE

💭 Mitigating the confusion on the Get Involved page

Different versions of the page.

‍

The two final pages we were discussion between.

‍

"It feels hard to find different resources/get involved immediately" - User 1

For this page, we wanted to focus on reorganizing the information in a way that was 1) easy to understand, 2) making content more consistent across all pages, as that was also a source of confusion, and 3) making the design more mobile-friendly.

1) Easy to understand

We sorted the volunteer positions into three general categories, so that people can easily grasp what type of volunteer positions the organization offers and see if anything piques their interest.

We initially had this short blurb under volunteer, and had people view available positions in the listed locations. However, it didn't give much relevant information prospective volunteers would immediately be looking for, such as the kind of positions they would hold, the time commitment, etc.

Old design of the Get Involved Page.

I categorized the positions into Writing, Organizing, and Outreach categories to give users a sense of what types of volunteer opportunities the LGBTCN offers, along with icons and short descriptions, allowing users to skim the options quicker to find something they like.

My redesign of the Get Involved Page.

‍

2) Making the content more consistent across all pages‍

As we were redesigning it, we wanted to make sure the content fit with the designs of the other pages as well. we made sure to check in with one another when making larger design decisions, such as changing our accent colors and keeping the formats of the headers consistent.

In the initial website, there was a lot of card usage on the homepage as well as the get involved page, so we decided to remove both.

There was also a red accent color used for the website, which felt a bit more urgent than we intended, so we changed to a less intense color, such as orange.

"Red feels a bit harsh and redundant" - User 2
Old design of the top of the page.

Instead of the card format in the redesign, we changed it to having a hero image with text there to designate which page users are on, and to keep it consistent with other parts of the website that were also being changed to hero images with hero text formats.

My redesign of the top of the page.

‍

3) Making the design more mobile-friendly

The cards at the top were a known issue on mobile devices. They looked great on the desktop website, but were took up a lot of space on the mobile version, so we opted to go with the text on top of the hero image to simply label the webpage without listing everything out at the top.

FINAL REDESIGN

✅ Same page, cleaner layout and aesthetic

Volunteer Section

‍

Lead Section

‍

Donate Section

IMPLEMENTATION

👎🏻 Design constraints we faced

We implemented our website using Wordpress and the Elementor plugin, which allowed us to further customize our work and improved our website significantly. It was still a bit difficult, as customization was still limited, and we had to make sure to take into account what was feasible on Wordpress + Elementor before implementing our designs.

I also helped conduct research on the donation aspects of our website, which included researching the pros and cons of various external plugins that we could use to ease our donation process.

REFLECTION

👀 A finished prototype is never finished.

I had so much fun working on this project, and even more so because I felt like I was making a genuine impact on a community through this redesign. This was my first project where I created more data-driven designs, and I learned a lot throughout the process.
‍
I expanded my design skillset by pushing myself to make 3-4 ideations of each version of the screens I received feedback on. One of the other designers on my team was so dedicated to this project - she always came in so prepared with multiple ideations as well as doing extra research to back up her design decisions, and always wanted to improve her screens. Her work motivated me to create multiple ideations and encourage myself to keep iterating on them and improving them, and I'll continue to do that in future projects.

This was also my first time working on Wordpress, which was different for me since I now had to consider constraints for my designs and redesign as needed.

NEXT UP: SCAN Usability Study – conducting research on an at-home COVID test kit.