lgbt community network
Helping to connect LGBTQ+ communities in Central California
spacer - ignore this
team
Aivy Phan - Design Lead
Stephanie Mendoza - PM
Mari Woodworth - Designer
Lara Canonizado - Designer
tools
Figma / Adobe Illustrator
Wordpress / Elementor / CSS
Optimal Workshop
timeframe
July 2021
7 weeks
at a glance
Founded in 2000, the LGBT Community Network (LGBTCN) was one of the first LGBTQ+ safe organizations created in Central California. Twenty one years later, this non-profit had expanded beyond their original organizational structure. Our team was tasked with creating a redesign of their outdated website to better connect with new members and reflect their growth as an organization.
my contributions
Throughout the project I worked closely with my teammates to research, ideate, and design the end web experience that the LGBTCN team envisioned for their users.
research + testing
I contributed throughout the entire research process including primary research, competitive analysis, and interpreting previous site analytics. I also developed part of the prototype and conducted usability testing.
interface design + visual design
During this project I ideated and designed the layout and content for many of the crucial web pages such as the landing page, resource directory, and the events calendar. I also gave a refresh to the organization's logo, and brand identity.
preliminary research
The LGBTCN team's intent when requesting a website redesign was to create a website that helped to better connect new user's with resources related to the organization, as well as get them involved in their local LGBTCN Chapter. After discussion with the LGBTCN Team, we decided to host five usability tests for front end user's of the current website.
our findings
- Poor first impression. User's found the website outdated, and unwelcoming due to visual and content design.
- No clear call to actions. User's noted few call to action buttons, and links that were available were often broken.
- Poor information architecture. User's found content frustrating to navigate, and hard to understand.
information architecture
Using our findings during the preliminary user testing, we created a sitemap of the website to plan out the placement of some of the new features that will help resolve some of our findings.
spacer - ignore this
ideation +
low fidelity prototype
Using the sitemap, we created different concepts for our site format. We narrowed down these concepts to our main formats after discussion regarding problem solving, relevant user flow, and client preferences. We then created a low fidelity prototype of our website using Figma.
usability testing
We hosted usability tests with three potential users. During these tests we noticed that all three user's still struggled to quickly understand the goals of the organization. We also noted that two of the three users were still struggling with finding information on the website because the design of the drop down menu on the top navigation. In addition, all users mentioned that the transition between the LGBTCN website, and its various chapter websites were unexpected and disliked how it took you to a different page.
card sorting
Due to repeated problems using the top navigation bar during usability testing, we also asked nine potential user's to participate in a card sorting activity using Optimal Workshop, in order to better understand how user's group and label various categories of information featured on the website.
our solution
Using this information, we redesigned our current website format in order to address these issues, such as:
- Optimizing our landing page for skimming, and showing examples of the organizations past work.
- Getting rid of the drop down chevron on the top navigation bar.
- Using insights from our card sorting activity to better label and group information in the top nav bar.
- Changing the link to take user's to the LGBTCN chapter's website to better visualize to users that they are leaving the LGBTCN website.
high fidelity mockups
After redesigning the site to better adjust to previous usability issues, we created a high fidelity mockup of the site to plan out our visual identity and UX writing.
inclusivity + accessibility
During this process we also took the opportunity to double check the inclusivity and accessibility of the website by taking into consideration inclusive imagery + language, informative headings, color contrast, interactions not dependent on color, and much more.
implementation
After gaining approval from the LGBTCN team regarding our high fidelity mockups, we researched and discussed with the team possible implementation methods based on price, ease of use, content management, and dependability. At the end, the LGBTCN team agreed to move forward with Wordpress. We then used the drag and drop page builder plugin, Elementor + custom CSS, to implement the website.
my takeaways
Creating a website from scratch, and seeing my designs being launched and utilized has been an extremely educating and fulfilling experience for me. During this process I learned a lot about using user research to optimize user's understanding behind an organizations story. Designing, while also taking into consideration technology limitations, as well as balancing the needs of the user and the organization behind the product has been a new and gratifying experience for me. Overall, I'm delighted that the work I've created will help to support a worthwhile cause, and have become a better designer for it.
next steps
Moving forward, I will be creating a personalized document on how the organization can maintain and edit various aspects of the website. In addition, further user research on specific areas fo the page will be recommended, as well as discussion on the implementation of a merchandise shop.
final product
spacer-ignore this
