About
Contact
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
© 2023 Object.Yard