Pacific Northwest Black Pride

Developed and designed marketing website to promote the inaugural festival of PNW Black Pride in Seattle. 

 

CLIENT

People of Color Against Aids Network (POCAAN) 

PROJECT

Responsive Website, Mobile Priority

TIMELINE

3 week sprint

TEAM

Serrah Sawers: Visual Designer, Site Developer and Implementer
Vanessa Ng: Interaction Designer
Yichu Wang: Content Strategist, Information Architect

TOOLS

Sketch
Squarespace
Pen
Paper

METHODS

User Research Analysis
Competitive + Comparative Analysis
Visual & Graphic Design
HTML + CSS

 

 

Summary

Seattle-based nonprofit POCAAN (People of Color Against Aids Network) was launching an event for the first Black Pride week in Seattle for the LGBTQ Black community and their allies. POCAAN had already completed research and began to build out their press partners and marketing strategy, and schedule the events but they didn't have a website and the festival was quickly approaching in less than 2 months. I needed to help build a website to act as a main landing pad for event information and to attract and connect with interested sponsors, vendors, and recruit volunteers and attendees. 

"Working within a 3 week sprint, I set out to design a beautiful marketing website that encompassed all necessary details for this inaugural event for Seattle's Black LGBTQ community."

 

DISCOVER


Stakeholder Interviews

POCAAN had already conducted their own user research so my team needed to learn more about their goals and user needs. 

We conducted phone calls and in person interviews with POCAAN's Executive Director and Project Manager. Here were our top findings:

Event is the first of its kind in Seattle

Event taking place 4 days in August 2018

Target Attendees are Millennials

LGBTQAI and Black community + their allies

Limited Budget

Event funded by grant for health and wellness

Goal: Attendees, Passes and Volunteers

Attract attendees, sell passes and recruit volunteers was the priority.

Site should be transferrable 

Once sustainable, the site will be passed on to be managed by community. 

Squarespace was looking to be the perfect fit for this client as it fits within a limited budget, our team's limited coding experience and the need for the site to be continually updated and eventually passed forward to new management. 

 

Background Research

Without a researcher, our team took on research together, collaboratively. 

To begin the project, we got on the same page with our vision for the project by researching websites for Pride Festivals, both new and established, broad and specific and then sharing our findings with each other. Our team's culture of collaboration and communication lended itself to a cohesive vision throughout the project.

 

User Survey

 

"Through the survey we learned we needed to build our site with a preference for mobile design as that's where our users were spending their time."

Our first step in research was to discover what our user wanted. Our team sent out our Google Survey to various social networks and posted to local LGBTQ community group boards. We received 10 responses, with the majority being from participants under 35 years old.

Screen Shot 2018-06-13 at 12.41.21 PM.png

Here were our key findings:  

Mobile Devices

9 of 11 users use mobile devices to find out event info

Events

8 of 11 users say events are top priority when it comes to festival

 

DEFINE 


Comparative Analysis
 

As Visual Designer, I began researching the visual design of LGBTQ and millennial-focused brands and companies, focusing on their typography and colors and the meaning behind these choices. NYC PrideIndyPride, and Seattle Pride provided great sources of design inspiration.

Here's what I uncovered and used to guide my future visual design:

 

Digestible Text Content 

If our user's choose mobile as their main device, I need to make sure that text and content was spaced out and presented to feel engaging on a small screen.

 

Text Coded on Images

This was a common finding that made sense when seeking to quickly communicate the essence of the event, especially on mobile. 

 

Color added through Gradient

Vibrant colors - bold and yet softened through the fluid gradient were a common theme. 

 

Through continued research, I gained insight into how to design for millennials specifically using:

  • Clean, Minimalist Design

  • Vibrant Colors

  • Unique Typography

  • Preference for Mobile

Millennial Research

 

DEVELOP 


 

Our team was now at a place to start implementing the site. We had the first draft of content and images from Yichu and sketches of the site layout from Vanessa and together as a team we selected our template for Squarespace based on the need to express multiple events, a preference for mobile for our user, and a plan to present image with coded text overlay. 

As I began to put the content into the site, I began to learn what we could and couldn't do which helped to refine our Interaction Designer's wireframes and user testing, in return her usability testing provided interesting feedback that I could then take and add into the final site development.

Implementation

 

Color Psychology

 
 I began my color work by pulling together a color palette mood board and  gathered a batch of images, like the ones above to help me narrow down the vision for the site.  Photo credit include artists Shikeith and Shawn Alexander 

I began my color work by pulling together a color palette mood board and  gathered a batch of images, like the ones above to help me narrow down the vision for the site.

Photo credit include artists Shikeith and Shawn Alexander 

 

"The color palette needed to be strong, yet soft, youthful and celebratory and to represent the LGBTQ and Black Pride Community."

 
 

In my research of color symbolism and colors closely tied to the communities of our target user (LGBTQ, Black, Millennial) I was led to a palette of lavender, pink, purple and blue. Specifically Royal Blue and Royal Purple seemed appropriate due to its reference to the royalty and strength that is found in both the Black and LGBTQ community.

I loved that these colors were strong and yet, also soft and referenced beauty and celebration. Lavender was recently named the next Millennial color, to replace Millennial Pink, and was the 2018 Pantone Color of the Year so I know it is on the radar of a youthful audience.

Additionally purple was the perfect choice since it merges blue and pink, calling to mind the blurring of gender lines, subverting and challenging stereotypes in a way that is beautiful and fluid.

 

"Purple was the perfect choice since it merges blue and pink, calling to mind the blurring of gender lines..."

 

Gradient

Screen Shot 2018-05-10 at 8.37.06 PM.png
 

The fluidity and energy of a gradient was the perfect way to incorporate multiple colors and personality throughout a site that was content heavy and maintained a neutral background so I set about figuring out what the gradient should look like and where it should be placed to best create personality and support the content rather than distract.

After testing the gradient multiple iterations as the background color, I found that with colorful and full event photos, it became distracting and hard to digest the content and the vibe of the festival. So in service of the events and to make it easier for future updates, I simplified and integrated the purple and blue gradient throughout the site as Call to Action buttons and in the Footer of the site. 

Screen Shot 2018-05-10 at 8.37.14 PM.png

Gradient Implementation:

 

 

Typography

 

For selecting the typography, I set out to select typefaces that were already available within the Squarespace site, in order to keep within our client's budget and keep it simple for transitioning the site in the future. 

I had some goals fo what I wanted the typeface to convey, especially for our millennial audience, who I had learned are discerning and looking for unique and modern use of typography. 

Typeface should be:

  • balanced + readable

  • soft + strong

  • modern + professional

 

Client Logo

 Logo provided by client POCAAN

Logo provided by client POCAAN

Another helpful element in continuing to narrow down the typeface options was the client's current logo for the PNW Black Pride festival.

I presented a few options of Sans-Serif and Serif pairings to the Stakeholders for feedback and continued moving forward in the direction they leaned towards.  

 

The final selection was Futura and Bodoni, a sans-serif and a serif, both available on Squarespace, complimentary to the PNW Black Pride log.  

 

As I determined the color palette, I considered that this would be used with event photography, currently selected by our team's Content Strategist, including a selection of  youthful, vibrant and colorful photos. I wanted to ensure that the colors selected as the final palette highlighted and allowed room for varying types of photos to represent the event.

Color Palette

 
PNWBP-Color.jpg
 

Web Development

 

I now came to a point in the project where I needed to insert all of the final wireframe designs from, Vanessa and the content and photos from Yichu and put it in the realm of our selected web-platform Squarespace. 

Using a website platform has details that make things easier at times and at times, more complicated.

 

I spent a good amount of the final days of this project, inputting the content and then conversing with my team to discuss accommodations we would have to make in order to By using Squarespace I was able to:

Quickly create a functioning website that could easily be passed on to the client and their team to be adjusted and updated over time and for upcoming events. 

Squarespace enabled us to keep most of our vision. There were a few times when our template, Maple, chosen for its clean and minimalist design and its ability to add text on top of images, had a few restrictions that caused us to renegotiate our designs. 

The events portion only allowed for a List or Calendar View rather than the proposed 3 events in a row as designed by Vanessa, Interaction Designer. I elected to go with List View to stay consistent with how it is shown on Mobile which was our highest importance. This also led to a removal of an extra step for the user, as we could then list all the events and their details on one page with a call to action to Tickets, RSVP and Volunteer.

 Wireframe by Vanessa Ng

Wireframe by Vanessa Ng

EventsScreenshot.jpg
 

DELIVER 


 

Gathering together all those elements, I created a Style Guide that is incorporated within the Squarespace site and that I will provide to you and your team for future usage within the site and within other coordinated communication. This was important to make sure there was an easy way to maintain consistency within the site and to also communicate that branding within Social Media, within Print perhaps and in coordinating future images and even signage within the actual Event

Style Guide

 
 
Screen Shot 2018-05-25 at 3.01.58 PM.png
 

Update Page Content

Authentic Images and Accurate Content for Events

Implement Style Guide

Within Marketing and Social Media

Monitor Analytics

Before, During and After Event

User Testing with Live Site

Seeking to understand flow, experience and emotional impact

Next Steps

 

 

Manage a team with a collaborative culture and then rely on them when life throws you curve balls. 

Continue to move forward within ambiguity when working with a busy client who can not always provide full details or feedback.

Adapt designs to the constraints of a web platform while still serving the user.

What I Learned