Lead with a session.
A visible date, open slot and expectations make a jam actionable. Musicians remain an alternative discovery route.
UI/UX design handout · Mobile app concept
Find your people.
Make some noise.
JAM helps musicians discover compatible people, turn “we should jam” into a specific session and keep playing together. This handout traces the decisions behind its midnight-blue, electric interface.
Session-first discoveryDeliberate confirmationShared planning
JAM · concept UI01 / Product decisions
Discovery only matters when people can play.
Three explicit choices connect finding a match to a plan that musicians understand and can commit to.
Confirm deliberately.
Pending, accepted and confirmed are separate states. A material change to time or place asks for renewed confirmation.
Put the venue in the plan.
Space suggestions appear inside discovery and session coordination, where equipment, price and booking status are meaningful.
02 / Visual foundations
A stage after dark.
Deep blues make music imagery feel immersive. Cyan, blue and a restrained magenta echo live performance without competing with session details.
Midnight
#0B1024Base canvasStage blue
#172342Cards and plansAction blue
#3158F8Primary actionsElectric cyan
#55D5FFAccent and focusDisplay / expressive but directDiscover.
Join. Play.
Join. Play.
Bold sans-serif typography makes the next invitation immediately scannable.
Interface / useful details firstSat 19 Sep · 5–7 pm
Date, distance, slot and estimated cost are easier to compare when labels and numerals are consistent.
Token accuracyThese colour values and Inter rendering are presentation references approximating the supplied screens. Confirm exact design tokens and font files in the source before production use.
03 / Typography
Energy with useful detail.
Bold sans-serif headlines give JAM its performance energy; compact interface text keeps time, place, cost and participation easy to compare.
Display / headingFind your people. Make some noise.
Body / instructionSaturday · 5–7 pm · three musicians going
Metadata / statusSession details · Join request · My Jams
Font referenceInter is used here as a presentation reference to the supplied boards. Confirm final font files, sizes and weights in the source before build.
04 / Layout patterns
A rhythm across discovery and planning.
Repeated spacing, rounded cards and predictable states help the energetic visual language remain usable through practical coordination.
Group, then separate.
Give session essentials their own scan path before secondary stories, tags and social context.
Repeat familiar shapes.
Repeat card and control shapes across discovery, session detail and My Jams.
Make changes legible.
Joining, pending, confirmed and cancelled need distinct labels as well as visual treatment.
Reference, not final tokensSpacing bars, radii and state samples illustrate the pattern. Exact values and accessibility behaviour need source-file and device-level verification.
05 / Reusable UI
Make a possible jam feel real.
Components pair the energy of discovery with practical details and unmistakable commitment states.
Start from availability.
SessionsMusicians
Availability · This weekend ⌄
People-first browsing remains available, but a session card reveals an immediate way to participate.
Show the commitment.
Indie after class · Drummer wantedSat 19 Sep · 5–7 pm · North CampusBeginner friendly · ₹200 est. / person
Location, time, style, open role and estimated cost belong in the decision, not hidden in chat.
Request, then confirm.
Request slot →Open group chat
Pending → Accepted → Confirmed
Host acceptance and musician attendance are not the same event. Material plan changes should be explicit.
06 / Information architecture
Four places, one shared intention.
Primary navigation separates finding a session, planning it, staying connected and handling direct messages.
Find a fit
Sessions first, with filters and musician discovery as an alternate path.
Make a plan
Track requests, confirmed attendance, time, venue and group context.
Keep playing
Stay connected after the first session without reducing the experience to a feed.
Coordinate
Messages support a specific plan; they do not replace its visible status.
07 / First-jam flow
From interest to attendance.
A host’s response is followed by a separate participant confirmation, so everyone can see what still needs action.
Find a session→Check the fit→Request a slot→Host accepts→Confirm attendance→Play
08 / UX process
Structure before spectacle.
Concept themes and alternate layouts were compared before the visual treatment made the app feel like a live music space.
Evidence notePersonas, affinity notes, session data and journeys in this case study are illustrative hypotheses. The proposed benefits still need testing with musicians.
09 / Screen families
Discover. Coordinate. Return.
The final boards show the discovery, session-detail and My Jams experience, plus the practical details needed to make participation feel intentional.
Find musicians and sessions by fit and locality.
Understand the music, people, timing and venue.
Make intent and participation status clear.
Coordinate time, place and availability.
Return to upcoming plans and past activity.
Keep permission explicit rather than implied.
10 / Visual direction
The feeling of a gig. The clarity of a plan.
The dark stage-like palette invites exploration, while the session flow needs quieter, more operational information.
Discovery / expressive
Deep blue and electric accents give artists, sessions and local music imagery an energetic setting.
Planning / practical
Dates, places, roles, expected costs and consent should remain legible and explicit before anyone commits.
Concept directionThis visual treatment has not been validated through user testing or accessibility evaluation.
11 / Validation & next steps
Test the handoff from match to plan.
These are reasoned design choices, not claims of measured success.
Can a newcomer find a suitable jam?
Observe whether session-first results expose the details needed to explain why a session fits.
Can members explain their status?
Test pending, accepted and confirmed states, including a revised plan that needs confirmation again.
Can a group plan responsibly?
Check whether equipment, cost, booking status and recording consent are understandable at the right moment.
