PROJECT OVERVIEW

A responsive website design for millennials and focused on inclusion and activism.

PROJECT SCOPE

POCAAN is a Seattle based non-profit focused on aiding marginalized communities and in August 2018, they are launching their inaugural PNW Black Pride event.

Our assignment: create a website that is both a marketing tool and information hub for attendees, volunteers, sponsors, and vendors.  

Our audience: millennials are the core target for attendees (per the client's request), but the website would also be accessed by volunteers, sponsors, and vendors.

Due to the short timeline of the project and our limited coding skills as a team, we built the website on Squarespace which allowed us to create a functioning website in the timeframe and provide the client with analytics for future use.  It also allows the non-profit group to maintain and update the website with their own content.

ROLE

Interaction Designer

THE TEAM

Serrah Russell - Visual Designer and Project Manager
Yichu Wang - Content Strategist and Information Architect

DURATION

3 Weeks

TOOLS

Pen, Paper, Google Docs, Sketch, InVision

THE CHALLENGE

Currently, our millennial-aged users are unable to find out when, where, or what is going on for PNW Black Pride because there is no functioning website. 

THE SOLUTION

We believe that by creating a mobile friendly website that allows users to easily access the list of events and provides clarity on the logistics of the event itself, it will lead to a substantial turnout for Seattle's inaugural PNW Black Pride.

RESEARCH

USER SURVEY

Our team did not include a dedicated UX Researcher, so we took on the role together as a team and shared our research so that we would have a cohesive vision.  In order to understand the needs of the target audience and to format the hierarchy of the homepage and website pages in an orderly fashion, I surveyed those of the LGBTQ+ community and their allies who would attend a pride event. 

AFFINITY MAP FINDINGS

Based on this overview, we would prioritize events and volunteering on the homepage and navigation bar.  Additionally, we would have to make the site mobile friendly - since we were building the website on Squarespace, I looked at templates that would involve less scrolling.  I chose Maple for its simple, clean layout that allows for text to be overlays on images (to reduce the amount of scrolling).

COMPARATIVE ANALYSIS

I shared my research findings with my team members so that our individual work within the project scope would be created in the same direction.  To maintain this cohesion, we also shared links and looked at pride websites taking place around the United States to see if there were any common themes as a team. 

These included sites suggested by the client as well as those found by our team during our group research.  A few of the main sites I looked at included Seattle Pridefest, Seattle Pride, NYC Pride, Capitol Pride, and Indy Pride, where I made note of some common themes:

PRIORITIES

• Dates are clearly displayed on the homepage
• Events are prominently displayed on the homepage
  • Included upcoming / highlighted events

EASY NAVIGATION

• Multiple points of navigating through the website on the homepage
• Individual pages offer paths to navigate to other areas of the site
  • EX: NYC Pride's event detail page links to the volunteer page

DEVELOP

SITE MAP

Working with Yichu Wang, the information architect and content strategist for the project, I shared my research findings with her.  She utilized this information, along with her own comparative research on site structures to create the site map for the website.  

From her site map, I based my wireframe designs around six main pages on the site:

SKETCHES

Taking into account my research, the site map, and the constraints of the Squarespace template, I began to sketch and create paper prototypes.  

Using these rough paper prototypes, I conducted initial usability testing to see if the overall layout was intuitive and could accomplish our persona’s series of tasks.

WIREFRAMES

Building off of the paper prototypes and the feedback, I began creating my initial wireframes to create more detailed screens that would address the steps that needed to be completed in the task scenario.

Although I was designing with mobile in mind, the initial layouts were designed for desktop since that is how Squarespace operates (designing for desktop, then adapting and reacting for the site to fit on a mobile screen).  

HOMEPAGE OVERVIEW

A. Volunteers / Sponsors / Vendors consolidated into one category "GET INVOLVED"
B. Dates prominently displayed
C. Top 3 actions easily accessible
D. Event details clearly listed
E/F. Lower priorities, lower page hierarchy
G. Contact information

EVENTS SCHEDULE OVERVIEW

A. List of day passes
B. Link for more information on day passes
C. List of events
D. Event details with logistical information

EVENT DETAIL PAGE OVERVIEW

A. Link to get back to all events
B. Link to Eventbrite to purchase tickets
C. Link to volunteer sign up
D. Link to list of accommodations

On the events schedule, I wanted to make the event name, location, date/time, and cost were clearly marked.  I also included links to volunteer and accommodations on the events detail page, so that the user could have visual cues to prompt them into taking any additional action.

VOLUNTEER SIGNUP OVERVIEW

A. List of volunteer benefits as incentive for user to sign up
B/C. List of volunteer roles / time availability as checkboxes - to easily click and choose
D. Room for additional comments and clarification

USABILITY TESTING

Using these wireframes, I created a clickable prototype and tested with 4 users to see if there were any issues with user flow and if users could complete the necessary tasks.  

POSITIVE POINTS

• Users were able to navigate the site easily and accomplish the tasks 
• Positive response to prominent date / tagline on the hero image
• Volunteer / Accommodations links on the events detail page were "pretty neat" 

PAIN POINTS

• Day passes blended into rest of events - difficult to differentiate the two
• Ambiguity of "About" - not sure what to expect
• Revolved around information details - needed more clarity
  • EX: Confusion on Volunteer page with time availability and volunteer roles

DAY PASSES

I separated the event day passes from the events schedule - users mentioned confusion since it blended in with the list of the events. 

The new "Passes" page will link users directly to Eventbrite (where the client is hosting their ticket sales), where users can choose one day or three day passes.

VOLUNTEER SIGNUP

I also clarified the volunteer details - after speaking with the client to update / remove confusing volunteer roles and make time availability less specific and more flexible for our users.

DESIGN ADAPTIONS

During our implementation of the layouts into Squarespace, our visual designer (who was formatting the website on Squarespace) ran into some design limitations.  We discussed the best possible options to adapt without compromising the overall design.

EVENTS SCHEDULE

The main issue was the events schedule - Squarespace only allowed a calendar view or a list view for their events settings.  Since we did not have the time or the skill level to write the code to create the three column layout of my wireframes, we moved forward with the list view since it would mimic how it would look on mobile.

This updated format includes room for the event description - we streamlined the events pages by removing the events detail page, since the events schedule now included a description of each event.  Users will now be able to RSVP or purchase tickets from the schedule rather than clicking through to another page.

VOLUNTEER LINK

We still wanted to keep the ability to volunteer since users responded well to this option during testing.  To prevent the volunteer option from distracting from the primary action, we made this a secondary link instead of a button.

VISUAL DESIGN

I handed off my wireframes to our visual designer, Serrah Sawers, who then implemented them into Squarespace. We worked together to ensure that the mobile adaptation functioned as we had hoped. 

REFLECTIONS

RESULTS

By the end of the 3 week sprint, we were able to hand off a functioning website to the client with placeholder images and copy to give them an idea of what the website should include.

LESSONS LEARNED

Review with other team members early and often - the project looked cohesive because my team members and I would share our findings and work with each other daily and would ask each other for input.