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
User Interviews
Number of participants: 5
Demographics: 23 to 35 years old
Find full interview report
hereInterview 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
hereKey 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
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
hereTesting 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
hereLanding 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