Jamfizz is a student project designed for musicians of all genres, styles, and backgrounds to connect with each other.

Our focus is on facilitating connections between musicians based on their location.

About JamFizz

PROJECT OVERVIEW

Duration

10 Weeks

Team

group of 4

Role

UX/UI Designer

Tools

Figma, Miro, Maze

A website that helps musicians easily connect with each other or browse through a variety of job listing and rental studios.

• Musicians seeking opportunities to collaborate with other musicians

• Musicians looking for recording Studios

• Users looking to hire musicians and want to post a job offer

• Recording studios looking to rent out their space

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

Business Needs

Potential Users

Design Approach

DESIGN PROCESS

User Interview

Affinity Diagram

Competitive Analysis

Persona

User Flow

Site Map

Mid-Fi Wireframes

Mood Board

Style Guide

Iterations

Hi- Fi Wireframes

Clickable Prototype

DISCOVER

User Interviews and Affinity Diagram:

We interviewed with 14 potential users to get insight through the following main questions:

1- What challenges musicians face when using an online platform to make connections.
2- What information or specific details are important on musicians’ profile.

Top Takeaways

Instant visibility: Ensure that key details such as genre, instrument, and experience level on the profile card are immediately noticeable at first glance.

Video Samples: Users can view video sample on profile Card to quickly assess musicians' performances.

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 done, we created a persona to make sure we were designing for real users. The persona helped me understand users needs, motivations and pain points.

User Flow

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

Site Map

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.

Develope

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

1- We designed a search box in homepage so that users can search musicians based on categories and also 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.

Wireframing

At this stage we have defined all the main features for our website and we designed the mid-fi wireframes in Figma.

Desktop

Profile Cards

Members Profile

Usability Test

After designing the first version, we conducted a primary usability test that revealed us two problems:

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

The presence of the "Search ID" and "Search Area" sections in the local filter was complicating the search process.

We designed a search engine in the hero area that includes, Musicians, Bands and search ID based on location and radius.

Mood Board

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

Phase 1

Problem 2

Problem 1

Solution

UI Kit

Users seeking musical collaborations require a more streamlined and immediate way to connect with potential partners.

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

Problem 2

Users had difficulties finding their musician in a long list.

In order to solve this problem we categorized musicians into three categories : Instrument, Vocalist and DJ to make it easier for users to select the type of musician.

Solution 1

Problem 1

Solution 2

By changing the design we placed key details in high visibility locations.

Solution 3

Problem 3

Users couldn't find the important profile data at first glance.

Usability & Iterations

Phase 2

Deliver

Home Page

Search Results

Filters

Profile

Sign up

Connect Request

Invitation Sent

High Fidelity Prototypes

Reflections

What did I learn?

What can we do next?

• Effective communication and collaboration within the team.

• Task prioritization for efficient project progression.

• Integrating feedback from Users to evolve our project from concept to final design.

• The Impact of Storytelling to convey the value and intent of our design choices.

• Designing jobs and rental studio page.

• Working on the Jamfizz app, where users also can share Duets.