Fremont Arts Council Website Redesign

Web Design | Strategy | Branding 

FAC-Homepage-Mockup

The Fremont Arts Council is a Seattle arts organization that promotes building a welcoming, inclusive space for all to come together and make art. They are 100% volunteer led and donation run hosting many of Seattle's unique and vibrant renowned arts and community events, like the Fremont Solstice Parade.

Course: Univeristy of Washington / Human-Centered Web Design

Client: Fremont Arts Council

Timeline: 3-months


 

Project Team: James Choi, Kelly Lin, Mofe Osanyintolu, Angel Vuong

Leading roles: branding, UX/UI design, web strategy 

Supporting roles: user research & information architecture

Problem

The Freemont Art Council's existing site does not highlight their commitment to the local community, showcase their events, or help site visitors understand event info.

Solution

We created a human centered website that showcased the Fremont Art Council's creative personality, met business goals, and supported user needs. 

We redesign the FAC’s website to better showcase the organization’s contributions to the Seattle community and to transform their existing site into an informational resource for the volunteers, local artists, and supporters of the organization.

Rectangle-2

Project Plan

Define Client Goals

We started the redesign working with our client to define their business, branding, usability, user objectives and aligned the design team with our client goals.  


Group-429

Increase volunteer sign-ups 
& promote donations and memberships. 

Group-430

Promote the diversity within the organization and showcase commitment to inclusivity. 

Group-432

Refine the information architecture of the homepage based on user top tasks. Highlight the visibility of the donations and simplify the process. 

Group-431

Become informed of events, workshops,volunteering opportunities.

Research Methods

Group-442
  • Analysis of website analytics and customer support data

  • Comparative analysis of website to social pages 

  • Heuristic evaluation of their preexisting site. 

  • Survey to Fremont Art Council participants 

  • Short remote usability test

Research findings

Website Analytics 

1. Site traffic is driven by Solstice events. Users visit site for event details, pictures, and participation info. 

2. News spikes web traffic. Highlight community news and workshops in off seasons. 

3. Common outside inquiries should be easy to navigate on the site. Make outside inquires surrounding events, volunteering and workshops highly visible. 

User Wants and Needs

1. An overall streamlined site driven by key information 

2. Concise and scannable event details 

4. More pictures and photo galleries

5. Clear calls to actions for involvement

6. Showcase organizations personality 

User Task Matrix

Based off website analytics and top user needs, we created a user task matrix to prioritize area’s of the website that were most critical based on user groups. This matrix helped to rank task based on overlapping need. We used this as the prioity list to begin our design work. 

Uster-Task-Matrix

User Personas

After determining our top users and their tasks we created three primary user personas: a volunteer, a donor, and a Seattle resident to represent the most important website users and their needs. Persona's helped our team to form a consensus on user goals, wants and painpoints.  It also helped us to stay focused on our their goals throughout the design process.  

FAC-Personas

Content Strategy & Wireframes

Card Sorting

Our team conducted a card sorting study to structure content  hierarchy. For the card sort, our team choose 40 content items and had 10 participants go about sorting content in a way that made sense to them. The goal of our card sort was to structure the site architecture in a way that best fits our participant's mental models. We conducted our study in Optimal Sort which was a useful tool for analyzing the results.  

Screen-Shot-2021-01-11-at-3.07.23-PM
Screen-Shot-2021-01-11-at-2.46.53-PM

Site Map

Using the results of our card sort study, our team collaborated on an site architecture in Miro Board. Our site map focused on information hierarchy, findability of related content and easy navigation across the site.

Screen-Shot-2021-01-11-at-3.17.58-PM

We prioritized volunteering, memberships, and donations as the top utility of the site. Since the Fremont Arts Council is 100% run on volunteers and donations its critical that the redesigned supported the navigation of these actions.

Our main navigation featured the organizations top focal areas: About, Fremont Solstice Parade, Events, Workshops, Get Involved, News, and Footer. 

Within each section of our main navigation we formed a page structure and priortizing the top actionable tasks within each section. 

Screen-Shot-2021-01-11-at-3.29.42-PM
Screen-Shot-2021-01-11-at-5.16.17-PM

Wireframes & Usability Testing

We created wireframes based off quick and dirty sketches and as a team we conducted a dot-voting session to vote for ideal UI

Using our wireframe our team conducted four  informal usability tests. The goal of the test was to see if participants could complete our top tasks  and understand the barriers that prevent task completion.  View our usability test scenarios and usability test outcomes

Screen-Shot-2021-02-10-at-7.04.32-PM
Homepage-wireframe-1
Volunteer-wireframe-1
Event_Solstice-Parade-wireframe-2

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Branding & Visual Language

Design Prinicples

Based on our clients and user needs we developed four key brand tenets to refine the final content and visual design of the  website. Using the brand principles we created mood board for inspiration leading into the creation of our mini design system.  

Group-433

Utilize page movement to encourage engagement. Imagery should inspire the inner artist and colors are upbeat.

Group-434

Visual design incorporates shapes, collage & texture but does not overwhelm or clutter important content.

Group-436

Visual language is warm, & friendly. Content embraces hierarchy & clarity. Easy navigation, only showing essentials.

Group-435

Visual imagery is inclusive
Site tone evokes collaboration.

Crafting the visual language 

To create the visual language our team pulled inspiration straight from FAC's event images. We created a visual language that highlights a warm and friend look and a mini-design system that embrace hierarchy, usability and clarity through type and layout. Bold colors, textures, and imagery emphasize the celebratory and DIY sprit of the organization. 

Typefaces-Colors
Buttons-Nav
Cards1
Textures1
LogoDesign

Final Outcomes 

Impact

We created a human centered website that showcased the Fremont Art Council's creative personality, met business goals, and supported user needs. 

We redesigned the FAC’s website to better showcase the organization’s contributions to the Seattle community and to transform their existing site into an informational resource for the volunteers, local artists, and supporters of the organization.

Homepage-1-1
Event-overview-1-1

A homepage that balances personality and usability  

We balanced color and texture with white space and usability to showcases our clients personality and created a functional navigation and site with clear calls-to-action. 

Showcasing top events with clear hierarchy and concise content 

Based on our user research we knew the Solstice Parade is the sites most frequently visited page and also their biggest event. We made critical content like time, location, parade map and how to watch clear and scannable since these details are crucial to success of the parade. 

All events lead to community support

We highlighted the events in a clear timeline including: a feature image, brief description, and date, leading to more details. We embedded donate and volunteer actions into event pages and top navigation to make sure that this 100% volunteer/donation run organization's needs are met. 

Community involvment with ease

We made registering for workshops a simple straightforward process for our users with several navigational path's throughout the site that lead to events, workshop sign-ups, and volunteer registration.

Event_Solstice-Parade
Be-in-the-Parade-v6

Thank you for visiting. Let's get in touch. ☺︎ 

© 2022 Shelby Zink. All rights reserved.