NB Rock

Project Case Study

This is a case study exploring and deep-diving into the intricacies of UI/UX design, and capabilities of Figma. The project involved creating a dedicated mobile app and a responsive website for fans of a music group. The design framework focused on empathy, defining user needs, ideation, prototyping, and testing.

USER: 18 and older.
NEED: an app to connect fans to the music group. Users can engage with the group by registering for events, purchasing ticket concerts, pre-ordering/purchasing albums and interacting with the group. This is an app that caters to all fans regardless of age, race, socioeconomic status, geographic location or ability.
IDEATE: make the user journey simple, friendly, accessible, seamless and inclusive. Conduct competitive audits on the competition to refine designs.
PROTOTYPE:
- Sitemap & user flow
- Sketch & Wireframe
- Prototype (low fidelity and high fidelity): pages, micro-interactions, animation, checkout, carousels
- A scalable and adaptable design system was created with tokenized colors, sizes, and fonts, and components (with variants for breakpoints, states, modes, etc.).
TEST: unmoderated usability studies in design and functionality were performed at every stage, ensuring a user-friendly and functional final product, iterating to perfection.

Goal

• Broaden UI/UX understanding, and brush up on user research skills.
• Develop advance skills in Figma, and troubleshoot prototyping challenges.

Role

User experience research | UI/UX designer | Visual/Brand designer

Process

• Empathize, define, ideate, prototype and test to create the final product.

• Design: using Figma as a design tool to its fullest potential.
• Animation: Onboarding, search, card hover effects.
• Design System: Advance system with tokenization of colors, fonts, units, and variables.
• Prototyping: Conditional prototyping, overlays / popup modal, animations, and videos.

Challenges

• Learning while creating this project pushed me to act, think and see beyond.
• Most research and testing were limited to what was within my capabilities.

Dedicated Mobile App

Goal of app

Our music app enhances fan engagement by connecting users with the band, providing song previews, promoting events, and enabling album purchases. Users can socialize with band members, pre-order albums, and join fan meets. Key metrics include interactions with band members, app usage, album pre-orders, and event registrations.

Value proposition

i. Product feature:

• Connecting the fans with the music group
• Offering a preview of their songs, promoting concerts & free fan meet events
• Sales of albums (and pre-orders of new albums)
• The ability to socialize with team members

ii. Benefits: One-stop shop for connecting, previewing, and purchasing.
iii. It’s features and benefits will be further tuned to hone in on specific user needs:

• Option for local pickup at a predetermined store for pre-order sales, or pay for expedited shipping.
• Clear communication that pre-registering for free fan meets does not guarantee a spot at the meet. It is a random draw.
• Additional tips for users who need extra help is available in settings.

1. User Persona

#1: Bora Van is a recent art school graduate.

She is interning at a small design studio. To save money, she still lives with her parents. She is a long time fan of the music group since their debut. She supports the members and their message, by purchasing their albums, and dreams of attending their in-person events.

#2: Hipora Kim is a recently retired seamstress.

She has been working tirelessly all her life to raise her three children. She is eager to embrace new experiences and connect with her grandchildren through this inspiring music group. To fully immerse herself in this journey, she finds herself needing to learn “new technology.” She hopes that the app design will be user-friendly, accessible and inclusive for seniors like her.

2a. User Story

#1: Bora. As a long-time fan, I want to receive instant notification for events and album pre-releases, to secure a spot at upcoming events and be the first to receive pre-ordered albums.

#2: Hipora. As a new fan with little tech knowledge, I want to easily navigate the music app to stay updated on news, and enjoy their music with my grandchildren.

2b. Problem Statement

#1: Bora is a dedicated fan who seek fairness in pre-registered events to ensure she snags a spot at the events. She also wants timely album deliveries for release date enjoyment.

#2: Hipora is a new fan eager to stay updated on her favorite music group. She’s looking for a simple app experience to share the experience with her grandchildren. Tips to use the app would be helpful.

3a. User flow

Map how users achieve a specific goal & interact with the system as they navigate through a product

Flow

Open the app and land on the Home screen.

• Read tips to navigate the app screen
• Browse Trending/Latest screen
• Browse Events on the Events screen. Browse event info details. Consider placing an order? Y/N …
• Browse Discography on the Albums screen. Browse pre-orders. Browse album details screen. Consider placing an order? Y/N…

3b. Sketch & Digital Wireframes

As the wireframes sketches were created, the order of items were finalized for simplicity.

Ideation

Bottom navigation bar: Home | Shop | DM-Social | Notifications | More

• Home: Latest albums/pre-orders, events & social
• Shop: Pre-orders | Events
• DM-Social: Communicate with band members and view their posts
• Notifications: Stay up-to-date with all the information here
• More / Settings: Acct info, navigation tips, orders, events, etc.

4. Prototype

Low fidelity prototype. Testing interaction on the wireframes, identifying screens for development, and ending the journey.

5. Test

User Research Study: Plan

Insights after first usability study

Users want a better categorized bottom navigation menu
Users want a better flow in the app
Users want to review and confirm their order before purchase

Recommendation after usability study

Bottom navigation menu (consolidate and add):
- Before: Home | New Releases | Events | Settings
- After: Home | Shop (New Albums | Events | Discography) | Social | Notifications | Settings
Better flow in the app
- Add back and redirect some pages that were confusing
Review order before purchase
- Add new page: Review/confirmation purchase page

BEFORE

Mockups, high fidelity prototype and final designs before the entire UX process was utilized (empathizing with user, defining user needs, and testing).

AFTER

Mockups, high fidelity prototype and final designs after the UX process was applied (user-centered: empathizing with user, defining user needs, testing, and thinking about accessibility).

Case study on NB Rock mobile app.

Responsive Web Design

1. Site Map

This site map helps users navigate pages, and streamlines content and information organization.

2. Sketch & Digital Wireframes

As the wireframes sketches were created, the different UI elements materialized.

Ideation

• Home: Albums, Events, & DMs
• Albums: Pre-orders/New releases | Discography
• Events: Concerts | Fan meets | Livestreams
• Social: DMs | Feed/Post
• Notifications: Up-to-date info on album releases, events, and social posts from band members will be available here
• User account: Acct info, Tips, Order history, Settings, etc.

3. Prototype

Low fidelity prototype of the website for desktop and mobile.

4. Test

Conducted a usability test, and iterated on findings to create high fidelity responsive prototypes of the website starting with the desktop. Added breakpoints to the design system components to expand the design system.

Case study on NB Rock responsive website (desktop & mobile).

Mockups, high fidelity prototype and final designs for mobile.

Mockups, high fidelity prototype and final designs for desktop.

Takeaways

Designed for Impact: Developed a dedicated mobile app and a responsive website, focusing on user-centric design and accessibility.
Empathy and Efficiency: Learned to balance user needs and challenges (marginalized, excluded) with company constraints (budget, time, goals), delivering practical solutions.
Skills Sharpened: Enhanced UX/UI design expertise, particularly in Figma, while prioritizing accessibility and inclusivity.
Social Impact: Applied skills to a second project for Animal Welfare, demonstrating commitment to positive change.

Certificates

Completed a 6-month (200+hours of videos, reading and designing) rigorous, extensive and hands-on program in 6 weeks (July-Aug. 2024).

Google UX Design Professional Certificate

Advanced Figma UI/UX Design.
Completed 20+hours of coursework (April 2024).

Disclosures

Leveraged AI Tools: Effectively utilized various GenAI tools
- Gemini to refine and edit written content
- tools in Figma to rewrite and trim content, and generate list content suggestions
- Freepik’s AI image generator to create a unique image of the band members.
Efficient Workflow: Incorporated AI into the design process to streamline content creation and improve overall efficiency.
Demonstrated Adaptability: Successfully integrated AI into the workflow to support creative and practical needs.