Overview

Problem

  • Website had was not mobile friendly;
  • Site contained 328 pages;
  • Complex navigation made finding information difficult;
  • No analytics to track user activity or engagement

Solution

  • Create a mobile first, responsive design;
  • Design flows that help users with primary and secondary goals;
  • Create site architecture that reduces bloat;
  • Install analytics to track and improve customer conversion

Tasks

  • Conduct internal stakeholder interviews
  • Conduct 5 user interviews
  • Synthesize user and business needs
  • Create unique organizational branding
  • Refine user flows
  • Create wireframes
  • Launch website

Results

  • Website responsive on mobile
  • Tracking of conversion rates for new customers
  • Increase user engagement on website
  • Improved discoverability in website

Background

Gay City is a 25 year old LGBTQ organization within Seattle. They started as an organization designed to combat the AIDS crisis of the 80s and 90s but has since evolved to become the LGBTQ Center of Seattle. They now provide art shows, a community space, resource referrals for clients, while continuing to do their HIV testing and education work.

I was brought on to Gay City as their Digital Communications Designer, my first project was tackling their website that hadn't been updated since 2011. While there were many things that worked for the website, bloat had caused the website to become convoluted and difficult to navigate.

Over the course of 6 months I championing a user-first approach to the website which led to an entire sight revamp. Spearheading the revamp, I became responsible for crafting user research activities, creating user centric designs for mobile and desktop, and working with a distributed team of developers. I also acted as the project manager for this project, overseeing the UX writing for the website.

My role: Lead Designer

Working as the Lead Designer, I:

  • Conducted User Interviews
  • Consolated Business Objectives concerning our website
  • Worked with a distributed team of developers
  • Created A Style Guide for the Design Team
  • Created a Branding Guide for the Communications Team
  • Redesigned the organization's web information architecture
  • Created Layouts for the new website

Laying the Groundwork

User Research

General Survey

Before beginning the redesign, it was important to understand how people interacted with Gay City online in the first place. I crafted a survey that looked at general customer satisfaction and motivations for using the website. This survey was sent out via Gay City mailing lists and placed on the old site directly. We had over 100 respondents to the survey.

Upon analyzing the results of the survey we saw:

  • A majority of our customers (~70%) found out about Gay City through word of mouth;
  • 83% of customers reported visiting the website weekly;
  • Customer satisfaction rating with the website hovered around 6 on a scale from 1 - 10.

 

With customer satisfaction coming back so low, I wanted to dig nto the problem of what could help serve our users more on the website. Within the post survey, I asked if some respondents would be willing to share their experiences about using our website.  Following up with some potential users, I dug into what motivates people to engage with our website.

User Interview Insights

I interviewed five users to gain understanding of why people used our websites. These users varied across age, skewing younger, (18-34) but keeping in mind user that are outside of that age range as well.

There were three motivating reasons for people to visit the Gay City website:

  1. Sign up for HIV Testing (Gay City's primary provided service)
  2. To connect or find other people of the LGBTQ Community with whom to connect
  3. See the latest programming at Gay City

When probing users around the lack of engagement with the website overall, 3/5 interviews identified the lack of mobile responsiveness as a point of friction with engaging with the site's content.

 

Creating Site Architecture

One thing that stood out immediately from the initial assetment of the website, and the following user research, was that Gay City's website would need a new archetectural structure.

While interviewing users, I also took this opportunity to interview internal stakeholders about how they used the website and how they viewed their programming. I began identifying what programs needed pages for people to find on the website.

Working with the directors of each department, and then talking to managers and frontline workers, I created an archetecture that satiisfied the needs of each department. With this structure, the website's architecture reflected the needs of the organziation online.

Prototyping

Wireframing

Once I had insight from users, I began working with the Communications Director, and a team of developers, to creating the website. I was task with creating the wireframes for the website itself.

The developers had identified using a WordPress site and Divi template would best work for our organization's needs. While the developers worked on building specific requirements for our organization, I begun to check out various types of websites that were built with the Divi theme to understand what was possible. It was pretty flexible in terms of design. I began to get to work on crafting the flows, look and feel of the website.

Creating a Style Guide and Branding for Gay City

Once the black and white wireframes were done, I began creating a visual brand for Gay City's online presence. During the interviews with Gay City stakeholders, I took time to learn about each department within the organization and what they did. It was there I went about crafting the colors for each Gay City department.

Some colors for Gay City had already been established, (the "Gay City Green" #7a9f2e was the color used across the organization) but other departments had just organically grown from community need and had not had a chance to given their own distinctive identity. Particularly Gay City Arts was very popular in the community but didn't have it's won brand, look or feel.

I spent time with the Gay City Arts team to understand how they saw their work, and how it connected to Gay City's mission. Spending time with them it became clear that deep, crimson red for passion and boldness would be perfect for their brand color.

For Gay City's mainstay program, Wellness, I chose to deepen the green, making it a lush emerald. This connected to the health and wellness them, also signaled a deepning of Gay City's commitment to the health and wellness of the Gay Community.

Finally, for the resources program, I chose a deep navy blue to signal to people calmness, seriousness, and communication. The Resources Program of Gay City spent the most time connecting people in states of crisis with organizations that could help.

These three colors became reflected across the site in the banners ans buttons to give each section a unique feel.

Unifying the pages, we kept using the in house fonts (Rockwell and Roboto) across all the pages. This allowed for each department, while having its own distinctive colors, to still feel unified and part of the Gay City overall brand.

I found creating style guide became helpful in communicating with the Developers and making future design decisions.

Failure to Launch:

Unfortunately, due to several internal shifts within the organizaiton, the website redesign and launch was put on hold. Additionally, shifts within the organization caused me to recover of old ground with new staff. After checking in with new managers, I made sure that the functionality goals of their portion of the site still served their departments' and the users' needs.

During this time, our time with our contract developers came to an end. The developers were able to deliver a functional site but none of the styling.

Skill Up:

To help speed up the process of completing the website the Communications Director put me in charge of the project. Once I got the handoff from developers, I began working on putting stylings on the website.

It was also at this time that we began to change payment processing vendors. My role shifted again from researcher and designer, to project manager. I began to implement stylings and work on flows for our donation funnel.

The Finishing Touches

After coordinating the last bits with the payment processors, I tested the final design internally and with hallway testing.

The last touches on the site were to make sure that each area of the site (general, wellness, resources, and arts) felt cohesive yet distinct. To do this, we changed the nav bar color for each different section of the site, and had buttons correspond with the nav bar color.

After the last touches, the new design was launched.