19°_International_Jazz_Festival_of_Punta_del_Este_-_150111-2052-jikatu_16077813707.jpeg

How I redesigned Austin Jazz Society's website.

Austin Jazz Society consistently presents jazz music and musicians who entertain and inspire.

The redesigned website becomes more accessible and easy-to-use for the general public.

Dot Grid.png
responsive-mockup-of-an-imac-with-a-white-ipad-and-iphone-a11896.png
Dot Grid_edited.png

Overview

My Roles and Responsibilities

UIUX Designer & Front-end Developer

  • At the beginning of the project, I demonstrated the importance of following a user-centered design process to the stakeholders with my team members, and facilitated a kick-off session to set goals and expectations for the summer.

  • For the research phase, I conducted user interviews with end users, led competitive analysis and organized the result from both.

  • For the design phase, I took the lead to analyze the information architecture, defined the style guide, and created wireframes & prototypes. I then developed the website by using HTML / CSS / Javascript. I also made a tutorial document for explaining the front-end development for our client.

Team Members

Charizma Gupta, Hira Jamshed, Junjie Tang, Iris Xu

Timeline

February 2022 - July 2022 (6 months)

#Introduction

Austin Jazz Society

The Austin Jazz Society (AJS) is a 501 (c) (3) nonprofit music and service organization formed to support all jazz genres and increase awareness, appreciation and participation in the community. AJS presents educational programs, assists jazz artists, and promotes performances. 

Project Background

The Austin Jazz Society wanted to  increase their social media presence and outreach. One of their plans is to redesign the official website since it was launched a long time ago and the membership database had not been renewed. For every event, they always used the most traditional way to remember the attendees -- writing down the names on the paper and input into the excel. Therefore, they wanted to rebuild the database to organize the membership data and create a more accessible and intuitive user interface for the general public.
 

Dot Grid_edited.png

Group photo with my team & Austin Jazz Society (2022.03)

#scope

System Redesign

Context of use

Analyzing the pain point that current users are facing, concurrently trying to figure out the best solutions with the minimum changes.

ShareImage 2.jpg
spot.png

Visuals

We saw that there was potential with a visual upgrade of the system. Creating a design system for main actions gives a clear message to users, allowing them to use the website efficiently.

Information Architecture

Observing the existing information architecture, we had to redesign the structure and the flow for the better user experience.

Screen Shot 2022-10-19 at 16.31.55.png
flow.png

Research 

To better understand the problem space, we started with the user interview, then looked into the market, trying to find the inspirations and gaps among existing platforms.

1. User Research

How did they know the Austin Jazz Society?
What are the pain points when they use the website/buy the concert ticket?
What's the payment method they use for the jazz concert ticket?
How did they tackle with the problems?
What are the things they always do on the website?
How can we help tackle these pain points or improve their experience?
Our main take-aways include: 
  1. People always use the website to find concert information.

  2. People always get lost on the website, the navigations are not clear on the page.

  3. Some of the design on pages lacks consistency. The color can be reorganized.

  4. Most of them felt the information member page is confusing because of information overload, so they often ignored the membership page and directly purchased the ticket. 

  5. Most people have never renewed their membership (They did not know where they can see the membership information).

 

I then summarized the research and created the following personas to guide my design process.

male.png

Peter Smith

65 years old, married, has 3 children and 3 grandchildren.

A regular member of Austin Jazz Society

He enjoy his retirement time by filling with watching TV and listening to music/ going to the concert with spouse.

Need

  • To be more independent

  • To get more familiar with technology and the devices.

  • Wants to spend as much time with family

Frustrations

  • Has a slight eyesight problems.

  • Early stages of dementia.

  • Has limited knowledge of technology.

  • Doesn't want to ask for help.

female.png

Margaret Knight

40 years old, married, has 2 children. 

Just moved to Austin because of job so she does not know many people here.

Used to be quite active in her social circles.

Need

  • To know more people and get in community in Austin.

  • To get more information about local activities / events.

  • Wants to be both a good enough mother & a good employee.

Frustrations

  • Doesn't know how to connect more people in Austin. 

  • Doesn't know the information of local events.

  • Too busy to take care of herself.

2. Research the market

The main purpose was to understand the information architecture and content they include in their website, and how they organize them. The websites we’ve researched include:

We found that:

  • The color contrast ratio for graphics , texts and user interface components met WCAG 2.1 guideline.

  • A clear and consistent style tile helps users read the website and makes better user experience.

  • The concert information and ticket purchasing flow of the AJS site wasn't intuitive.

  • The Donation page has potential to be improved.

  • There can be some more introduction of AJS history and Jazz performance.

  • The type of membership is confusing, and there was no renewal information.

Information Architecture

Original Site Structure

Highlighting observed pain points

  • Homepage didn't include clear value proposition and intuitive navigation. 

  • The place of donate page is not clear, and it's not easy for user to find the page.

  • The place of the next event page and the event list page is confusing. The 2 pages should be switched.

  • The Education page can be combined with Project Safety Net page.

  • On Hall of Fame page, some users have expectations to see the Honorees directly.

After multiple brainstorming sessions with the client product team...

We came up with a proposed solution !

Visual Scheme

Colors

Typography

Components

Layout

Screen Shot 2022-10-26 at 01.09.35.png

Wireframe

We created the following mid-fi wireframes to make our ideas more concrete, and to make sure that the page structure, layout, information architecture, user flow, and functionality we derived make sense.

WF.png
WF2.png
Purple Object

Latest Design

angled-macbook-pro-mockup-floating-on-a-flat-surface-22364 (1).png
Frame 101.png
about us.png
hall of fame.png
screencapture-austinjazzsociety-org-content-aspx-2022-10-26-02_49_08.png

My Learning

When your client is a nonprofit, there are no sales, only effectiveness.

When the client is a business, almost any shortcoming in the design solution can be forgiven if the end result makes money since there are more aspects, for instance, customer engagement, marketing traction, growth, and profitability. Yet, designing for nonprofits we have to focus more on impact and human-centered design. We need to have an understanding of what kind of people make up your audience, appeal to emotion and emphasize the best parts of your non-profit. Therefore, beginning with a cohesive brand strategy and good storytelling are crucial. I also practiced the design system a lot in the project. This project is so meaningful because I feel I helped Austin Jazz Society advancing their mission in the process.

See my other projects