MetalSink App+Website

Band App + Website using Figma and Adobe XD

Prachi Ijner

The product: Metalsink is a rock metal band from Italy.

The band regularly hosts tours as it has a growing fanbase internationally. The app is launched to let the lisners connect with the community through merch and other resourches on the app.

Project duration: September - November 2022

The problem:

The goal:

As the band is growing, it needs a common platform to

To make a single platform that provides all services

connect with their listeners internationally. The app will

related to the band.

help listeners connect with the band by purchasing merch, and getting tour and event updates on the app.

My role:

Responsibilities:

UX designer and UX researcher

Designing, user research, wireframing, prototyping, creating mockups and final designs.

●

User research

●

Personas

●

Problem statements

●

User journey maps

User interviews and created empathy maps are conducted to understand the users. A primary user group identified through research was active listeners of the band.

The user group selected confirmed initial assumptions that the active listeners would use the app frequently, but the research also revealed that the people who gift the merch to their friends and family will also use the app.

1

2

3

Time and accessiblity

Options

Location

Most users don’t have the time or physical ability to visit stores and wait in lines to purchase new merch.

Stores run out of certain merch options very quickly, and the customers have to wait until they restock it.

Stores are only located in certain cities. Listiners who live in different locations are unable to purchase merch from stores.

Problem statement: Mikhail is a Businessman who needs a way to support his kids in developing their interests

because he wants to motivate his kids to develop their creative individual personalities.

Mappoing Mikhail’s user journer revealed how helpgil would it be to provide an app with simple design with easy navigations.

Image of user journey map

●

Paper wireframes

●

Digital wireframes

●

Low-fidelity prototype

●

Usability studies

Multiple iterations of all pages were designed to come up with the best layouts for users. For home page I prioritized main actions like merch and concert ticket buying options.

Refined Wireframe

The home page focusses on the primary purposes of the app,

A cariousel of whats hapenning recently to quickly give the information to the user.

All the information is laid out as per priority.

This feature provides a quick way to go directly to most used pages

The design is focussed on

Sort and filter options for ease of browsing

making browsing easy. Add to cart option is provided up front for easy navigation.

Up front option to add product to cart

https://www.figma.com/proto/L53kts58n3Hv1NbHsx2tNq/Band-App?nodeid=2%3A5&scaling=scale-down&page-id=0%3A1&starting-point-node-id=2%3A5

Round 1 findings

Round 2 findings

1

Users want easily recognizable icons

1

User want a simpler colour scheme that’s easy on the eyes

2

Users want quick checkout

2

Users want way to find buttons

3 Users want an option to pickup products instore

3 Insert finding

●

Mockups

●

High-fidelity prototype

●

Accessibility

Before usability study

The app is designed as per user needs.

After usability study

Before usability study

The design is refined as per user reviews.

After usability study

https://www.figma.com/proto/L53kts58n3Hv1NbHsx2tNq/Band-App?nodeid=155%3A123&scaling=min-zoom&page-id=155%3A3&starting-point-node-id=155%3A123

https://xd.adobe.com/view/ba4af145-67ae-4dc3-8fe1-371a9a76dabd-ef19/

1

2

3

Used a color scheme that is easily percivable to users with visual weaknesses.

Alt text for users who are unable to read.

Large buttons for ease of use for people with physical weakness.

●

Takeaways

●

Next steps

Impact:

What I learned:

The app lets users use all the services provided by the

Throughout the process, I learned that feedback is

band on a single platform.

extremely necessary in building good designs. It is interesting to study how different users percieve the

A quote from peer feedback : “I really love that the app gives options to explore the band in multiple ways. I love the look of the app, it’s on theme.”

designs and the overall experience.

1

2

3

Conduct another round od usability studies to check if the pain points have been addressed.

Update design based on reviews of real users.

Add more features if necessary

Thank you for reviewing my work. If you want to see my other works or get in touch, feel free to use the links below.

Email: prachiijner16@gmail.com | Portfolio: https://issuu.com/prachiijner