Arman Muhamad
← All work

Case study · Product Design

HIVI! Concert Merchandise App

An app for fans of the Indonesian band HIVI!, and for people buying merch on their behalf. During the project it grew from merchandise to tickets and bundles.

Five key screens of the HIVI! app: home, product detail, cart, order confirmation and payment
Role
UX designer, concept to delivery
Timeline
May 2021 – February 2022
Platform
Mobile app
Methods
Interviews, empathy maps, journey map, wireframes, lo- and hi-fi prototypes, two usability rounds, accessibility
Outcome
A familiar shop flow participants understood at once; scope grew from merch to tickets and bundles.

Problem

Official merch is expensive and hard to find online, and merch bundled with concert tickets is harder still.

Goal

Make buying official HIVI! merchandise easy, directly in the app.

01

Understanding the user

Interviews and empathy maps pointed to adults who want official merch without the hassle. Merch was expensive and hard to get, the buying process was unclear so people asked friends for help, and pre-orders and long product descriptions tripped them up.

  1. AccessibilityOfficial merch is expensive and difficult to get.
  2. ConfusionPeople ask others to explain how to buy.
  3. TimeSome items have to be pre-ordered.
  4. Error-proneProduct descriptions need careful reading to avoid mistakes.
Persona card for Annisa, a 25-year-old nursing student in Bogor, with her goals and frustrations

Persona · Annisa

A nursing student in training. She wants affordable official merch sold online, so she can buy it herself without asking others or using a jastip (personal shopper).

Annisa's journey map: tasks, feelings and improvement opportunities from browsing merchandise to receiving it

User journey

Mapping Annisa’s journey showed a dedicated HIVI! merch app would help.

02

Starting the design

Paper wireframes for home, bundles, product detail, cart, order confirmation and payment
Paper wireframes first, so every element carried into the digital wireframes answered a pain point.
Digital wireframe 01, home: new-merch carousel, recommendations and navigation bar
Digital wireframe 01, home continued: concert-ticket bundles and other merch
Digital wireframe 02, product detail: photo, name, price, description, buy now and add to cart
Digital wireframe 03, cart: select items, edit quantity, see shipping, discount and total
Digital wireframe 04, order confirmation: recipient, address, payment options and confirm button
Digital wireframes, based on what the research turned up: home, product detail, cart and order confirmation.
Low-fidelity prototype flow linking home, detail, cart, order confirmation and payment screens
Low-fidelity prototype of the browsing and ordering flow, for the usability study. [FIGMA LINK]

03

Usability study

Round 1

Moderated · remote · Indonesia
4 participants · 30–45 min

  • People needed to edit item quantities.
  • The order screen needed more detail.
  • Payment instructions needed clearer cues.

Round 2

Moderated · remote · Indonesia
3 participants · 30–45 min

  • Checkout needs an estimated delivery date before payment.

04

Refining the design

Product detail before and after the usability study: size selection, price and full description added

Product detail

Pick a size where one applies, alongside name, price and description.

Order confirmation before and after: address, delivery estimate, itemised order, discount and payment dropdown

Order information

A payment-method dropdown, contact and address combined, and every checked-out item listed.

Payment screen before and after: order progress, total due, BNI virtual account number and payment steps

Payment

A total amount and a virtual account to pay into.

Order confirmation before and after the second study: estimated arrival date and free-shipping note added

Shipping

An estimated arrival date and free-shipping text, from round 2.

Sticker sheet: Nunito Sans type scale, colours, buttons, navigation, accordions, buying-process stepper and product cards
Sticker sheet: the elements and components of the design system.
High-fidelity prototype flow across home, detail, cart, order confirmation variants and payment
High-fidelity prototype with fuller ordering and checkout flows. [FIGMA LINK]

05

Accessibility

A

Important text is bold and set in a different colour, for people with low vision.

B

Distinct primary and secondary button styles make navigation easier.

C

Product photo, name and price read clearly without the full description.

06

Going forward

“The looks is familiar like Tokopedia, so it is understandable.”

The layout follows common e-commerce apps, so it felt familiar (Jakob's Law).

“Because it is not a marketplace, there’s no need for reviews. I just want what my idol offers.”

Fans want a straight path to official merch and tickets.

What I learned

The first idea was only a starting point; usability feedback and peer input drove the iterations. The scope grew from concert merch to anything the band wants to offer its fans.

Next steps

  • Another usability round on the wider product range.
  • Research with HIVI! fans only, to find new needs.
  • Rebrand as TOKOHIVI!, in line with the band’s official store.