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 irchitecture

Problem

The organization’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. 

Our goal was to 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 aliged 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,voluneering opportunties. 

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

Executive Findings

Website Analysis 

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 Likes, 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 oraganization's personality 


User Task Matrix

Based off of our top website top and their most common tasks, we created a user task matrix to determine the what area’s of the website redesign were most critical for our users. This matrix helped to see where our user tasks overlapped and what area’s we should prioritize when we began designing.

Uster-Task-Matrix

Primary User Personas

After determing out 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 frustrations, it also helped us to stay focused on our thier goals throughout the design process. 

FAC-Personas

Content Strategy

Card Sorting

After revisiting the user goals determined by our client and auditing user tasks on the website, our team conducted a card sorting study to discover our visual 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 study was to structure our infromation architture 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

Information Architecture 

Using the results of our card sort study, our team collaborated on an information architecture in Miro Board. Our information architecture created a site hierarchy, improved the findability of content and eased navigation throughout 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.

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

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 hierarchy of each page's structure and noted the top actionable tasks on each page.

Wireframes & Usability Testing

We crated created wireframes based off our quick and dirty sketches and as a team we conducted a dot-voting session to vote for ideal page layout. 

Using our wireframe and information architecture our team conducted 4 informal usability tests. The goal of the test was to see if participants could complete our top task user flows and understand the barriers that prevent task completion.  View our usability test scenarios and usbility 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 conversations with our clients and user/wants we developed four key brand tenets to refine the final content and visual design of the Fremont Art Council's website. Using the brand principles we created moodboard for inspiration leading into the creation of our mini design system.  

Group-433

Utilize page movement to encourage engagement. Imagery should inspires 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 FAC's visual language our team pulled inspiration straight from FAC event images. We created a visual language that highlights a warm and friend look and feel abd and a a mini-design system that embrace hierarchy, usability and clarity through an easy-to-read typeface and intentional layouts. Bold colors, textures, and imagery emphasize the celebratory and DIY sprit of the organization. 

Typefaces-Colors
Buttons-Nav
Cards1
Textures1
LogoDesign

Design Outcomes 

Final Outcomes 

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

Our goal was to 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.

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 critial 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/dontation run organization's needs are met. 

More 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

Selected Works

M365 Admin ManagementDesigning tools for enterprise IT Admins

Facilitating Trust and Serendipity in Scientific CollaborationAddressing a complex sociotechnical problem through discursive design and video prototyping sponsored by Pacific Northwest National Laboratory & Pacific Marine Energy Center

Fremont Arts CouncilWebsite & brand redesign for Seattle arts organization