Jamfizz Website

JamFizz

Desktop Prototype

A website designed for musicians of all genres, styles, and backgrounds to connect with each other.

PROJECT OVERVIEW

Business needs

Duration

10 weeks

Team

Group of 4

Role

Ux/Ui Designer

Tools

Figma, Miro, Zoom

Design Approach

In this case study we focused on the task of connecting musicians.
To improve the user experience we used these following strategies:

Designing a search engine based on location to help users find their Musician.

Organizing musician categories, filters and profile members information.

A website that facilitates easy connections for musicians, includes a secure messaging system, and offers a variety of job listings and rental studios.

DESIGN PROCESS

User Interview

Affinity Diagram

Competitive Analysis

Persona
User Flow
Site Map

Mid-fi Wireframe Usability & Iteration
Mood Board
UI Kit

Final Wireframe
Clickable Prototype

DISCOVER

We interviewed 14 potential users to find out what challenges musicians face when using an online platform to find other musicians and to determine what information or specific details are important on musicians' profiles

User Interview & Affinity Diagram

Key Takeaways

Ensure that key details such as genre, instrument, experience level and their work sample are displayed on the profile page.

Competitive Analysis

Through a detailed Analysis of these websites, we have designed a more effective information architecture and improved our website features.

DEFINE

Persona

Based on the information and researches we have created our persona.

User Flow

We designed and developed a User Flow Considering potential users' needs and the project goals that describes the pathways user might take.

Based on the results of competitive analysis and stakeholder needs, we designed our Sitemap. we've finalized an updated version according to usability tests that aligns with feedback.

Site Map

DEVELOP

Wireframes

Our research derived us into designing the first version of wireframes and we provided solutions for users challenges and stakeholder's needs:

1- We designed a search box in homepage so that users can search musicians based on categories and location.

2- Filtering options include important features like Skill level, music Genre and Language.
It is also possible to search profiles by their name or ID.

3- We've designed profiles to include a profile photo and demo video.

4- Connection Process starts by sending a request along with a message. Users can continue messaging only when their request is accepted.

5- Users can put their sample work including music audios or videos in their profile page to show their style and profession

Usability & Iterations

Phase 1

After designing the initial version and creating our UI kit, we developed a revised version for usability testing, which revealed two problems.

Having "Members" in the navigation bar was causing confusion during searches.

Mood Board

We collected some photos of musicians and concerts that were full of energy and lights. These photos inspired us to choose a color pallet for our website.

UI Kit

Phase 2

Users faced challenges finding potential collaborators as they had to search through all profiles without knowing who was open to working together.

We added a "Seeking for" section to the local filter and clickable tags on profile cards to allow users to find members who are seeking specific types of musicians.

Problem 1

Solution 1

Users seeking musicians had to navigate through a lengthy drop-down list to find a specific category.

To address this issue, we categorized musicians into three main groups: Instruments, Vocalists, and DJs, simplifying the selection process for users.

Problem 2

Solution 2

Problem 3

Solution 3

The initial layout prioritised the profile picture and general information, making it necessary to scroll to access key details like videos and audios.

Through design adjustments, we strategically positioned essential details in highly visible areas.

We designed a search engine in the hero area that includes Musicians, Bands and Search ID based on Location and Radius.

Problem 1

Solution 1

Problem 2

Solution 2

During searches, users frequently sought options for ID searches or searching by area, which were not readily available in the search engine. Placing these options in the local filters proved challenging for users.

To improve, we moved these options to the search box, making them easier to find. Since they were no longer in the local filters, users found it hard to adjust their searches. So, we added a search box to the result pages for easy modifications.

After applying changes based on usability tests and iterations in phase 1, we faced three problems during phase 2 of usability testing and iterations.