phatjazz

phatjazz is a Denver, Colorado based musician, DJ, and producer.

He releases a widely followed mixtape series, DJs venues around the US, and has begun to release original music.

View Website

My Role

UX/UI Designer

Timeline

2022, 2 Weeks

Team

Project Manager
Developer

Tools

Figma
Adobe Photoshop
Adobe Illustrator

Problem

phatjazz does not have a cohesive location to advertise their brand, display music, convey information about upcoming/past concerts, and attract promoters.

Solution

We created a responsive desktop and mobile website to allow him to market himself and his brand to fans and promoters. We aimed to capture the fun, creative ethos of his brand and channel that into a memorable, user friendly website.

Research & Design Approach

Design Thinking

We used the design thinking approach as our framework for phatjazz. This was the best option as we wanted to emphasize with the stakeholder and iterate with the problem as much as possible. We wanted to be able to continually define, ideate, prototype, and test until we arrived at an acceptable solution.

Research

Exploring the Scene

We wanted to evaluate how musicians display themselves online and what users looks for in those environments. To do this we ran a competitive analysis and conducted users interviews with the following goals.

• Understand what the client needs/wants are.
• Understand what the client is trying to solve by having a website.
• Understand the process of how people currently find/look-up musicians.
• Understand what people look for in a musician’s website.

Research

Competitive Analysis

After analyzing a range of musicians from similar in popularity to phatjazz to world famous - trends began to stand out. Find full report here

• Musicians with lower popularity had easy to navigate websites but lacked originality and functionality.
‍
• Musicians with high popularity had memorable, interesting websites but lacked usability and basic information.

Research

User Interviews

Number of participants: 5
Demographics: 23 to 35 years old
Find full interview report here

Interview Outcomes

After combing through the interview information and organizing them using an affinity map, a handful of common needs began to emerge. Find full affinity map here

Key points: Stakeholder
• Website to be a one-stop shop for all things related to phatjazz
• Look attractive for fans and look legitimate for potential promoters. Interesting and unique.
• Tried to make a website previously but gave up due to time and design constraints
• Use website as driver for future bookingsInclude bio, past shows, links to social media and streaming platforms, pictures, contact page
• Mainly uses Instagram to promote himself along with Linktree

Key points: Participants
• Finds concerts by Googling the artist and then usually going to their website
• Finds new music/musician’s via streaming services
• Websites make musicians look more legitimate
• Likes to typically read a musician’s biography
• Enjoys websites that are fun, interesting, and easy to navigate
• Would buy merchandise if available

Research

User Persona

To aide in understanding the potential user base, a user persona was created to synthesize the research findings.

Research

Finding the Problem

The research was boiled down into two main questions. These were the building blocks of our design.

Stakeholder
• How might we structure the website to be user friendly and informational?
• How might we help me synchronize the website’s design to match musician’s brand?
• How might we grow a new musician’s fan base via their website?
• How might we attract promoters and drive bookings for a new musician?

User
• How might we align musician and user goals/needs for a website?
• How might we create a user centric website design?
• How might we efficiently notify music fans about artist updates?
• How might we help users more effectively support new musicians?

Building the Solution

Ideation & Design

To assist in the website build out we utilized the following methods within our design thinking framework.

Sitemap

Through the sitemap we were able to have a straightforward view of the website. Our goal was to add value through convenience/ease of use. Find full report here

Task Flows

We created the following task flows to better validate/invalidate assumptions made during the research phase. The straightforward usability of the website can be seen through these flows. Find full report here

Building the Solution

Wireframes

Based on consultation with the stakeholder we decided to focus our attention on developing our minimum viable product with the following key screens. We approached these wireframes by trying to align the needs of the stakeholder with the needs of the user. We wanted to convey ease of use and simplicity, where the most important information is scrollable. Find complete wireframes here

Building the Solution

Initial Design

The design was conceived using the initial wireframes and assets from the stakeholder. Desktop and mobile were constructed during this phase. Full design here

Building the Solution

Design Feedback

Following consultation and feedback from the stakeholder, key outcomes were determined to assist in the refinement of the design. Full feedback report here

Key Outcomes
• Work towards a more memorable design that looks less like a pre-made template.
• Create pages for each section instead of continuous scrolling.
• Have the website appeal more to promoters and booking agents rather than casual fans.

Building the Solution

Design Iteration

Upon additional dialogue and feedback from the stakeholder, the design was reimagined. Desktop and mobile designs were revised into a more original and authentic design. Full design here

Building the Solution

Usability Testing

The goal of the usability testing was to determine the following:

• How the participants interacted with the desktop and mobile websites
• How long it takes the participants to perform the tasks
• Identify confusing areas or issues participants have while using the product

Type of test: Moderated usability test (in person and via Zoom)
Number of participants: 5
Demographics: 23 to 35 years old
Find full testing report here

Testing Outcomes

After analyzing the testing results, common issues began to emerge with the prototype.

Imperative to fix:

Users felt there was too much white space within the desktop ‘Bio’ section
• Adjust white space in ‘Bio’ section on desktop design

Users did not react favorably to the text menu button
• Replace text menu button with menu icon

Users struggled with figuring out how to close the mobile menu
• Add an exit icon on the mobile menu

Users were confused by the mobile hierarchy of the four main screens
• Add a separator between header and text/images

Important to fix:

Users had difficulty clicking the arrow icons when viewing images/music
• Increase the arrow icon size

Building the Solution

Final Design

Based on the testing outcomes a final design iteration was produced. We addressed the testing outcomes by completing the following revisions. Full revision report here

Landing Page

Bio

Music

Events

Contact

Revision 1: Adjust ‘Bio’ spacing and arrow icon size on desktop design

Users wanted the spacing to be more balanced and arrow icons easier to click.
‍
After the revision:
• Bio text was spaced to be in-line with images
• Icon arrow size was increased to improve usability

Revision 2: Replace menu text with icon on mobile design

Users wanted an easier to use menu icon
‍
After the revision:
• Menu icon was added across mobile designs

Revision 3: Improve mobile hierarchy

Users wanted the mobile screens to have a more defined hierarchy
‍
After the revision:
• Text spacing was adjusted between the text header and body sections
• Line separator was added for visual clarity

Revision 4: Improve mobile ‘Menu’ ease of use

Users wanted the mobile menu screen to be more intuitive

After the revision:
• Close icon was added to the menu screen
• Removed white space touch closure areas