Ampli

Music store connecting artists, fans, fostering discovery and community.

Ampli

Music store connecting artists, fans, fostering discovery and community.

Ampli

Music store connecting artists, fans, fostering discovery and community.

Project

Mobile app UX/UI design

Duration

22 Aug 2023 - 31 Oct 2023 (10 weeks)

Course

Google UX Design Certificate

Category

Community-driven music commerce platform.

Project

Mobile app UX/UI design

Duration

22 Aug 2023 - 31 Oct 2023 (10 weeks)

Course

Google UX Design Certificate

Category

Community-driven music commerce platform.

Project

Mobile app UX/UI design

Duration

22 Aug 2023 - 31 Oct 2023 (10 weeks)

Course

Google UX Design Certificate

Category

Community-driven music commerce platform.

Skills

Researcher

Information Architect

Interaction Designer

Visual Designer

Prototyper

User Tester

Project Manager

Tools

Figma

Photoshop

Illustrator

Sketches Pro

Skills

Researcher

Information Architect

Interaction Designer

Visual Designer

Prototyper

User Tester

Project Manager

Tools

Figma

Photoshop

Illustrator

Sketches Pro

Skills

Researcher

Information Architect

Interaction Designer

Visual Designer

Prototyper

User Tester

Project Manager

Tools

Figma

Photoshop

Illustrator

Sketches Pro

Project Overview

Ampli is an online music store app that connects music lovers with artists and offers a wide range of physical albums in various genres. It's not just a store, but a vibrant community where like-minded people can share and discover music. With social features, events, and contests, Ampli aims to engage users and provide an excellent music experience worldwide.

"How might we enhance the accessibility of physical music in a digital age?"

Problem

Problem

Problem

The decline of physical music demand in some regions due to the rise of digital streaming and music piracy necessitates continued support for physical music sales.

The rise of digital streaming services has led to a decline in the demand for physical music in some areas of the world. This has made it difficult for people in those areas to obtain the music they love, as the number of physical music stores has decreased. Additionally, piracy has become a widespread problem, with people illegally downloading music and sharing it with others, leading to a decrease in sales of legitimate physical music. However, despite these challenges, some people still prefer physical music for its tangible qualities and unique experience, making it important to continue supporting legitimate physical music sales.

Research: Competitive & SWOT Analysis

Research: Competitive & SWOT Analysis

Research: Competitive & SWOT Analysis

I identified both direct and indirect competitors by analyzing the iTunes, Amazon Music, Target, Weverse Shop, and Shopee apps and websites for album purchases. This evaluation focused on user experience aspects, such as user interface, navigation, search functionality, album information, and customer reviews. By conducting this analysis, I gained valuable insights into areas of improvement for our platform and a better understanding of how competitors approach album sales.

iTunes

iTunes is a widely recognized digital media player and library, enabling users to manage and play various forms of digital music and videos. Although it boasts an extensive music collection and a user-friendly interface, it has faced criticism for its relatively higher prices and restrictive DRM policies. Furthermore, it has seen increased competition from various streaming services, impacting its market position. Despite its recognized strengths, iTunes needs to address these challenges to maintain its prominence in the digital music landscape.

Amazon

Amazon's physical music offerings boast a vast collection and seamless integration with the broader Amazon ecosystem, facilitating a convenient user experience. However, its interface may present challenges for new users, potentially hindering smooth navigation. Additionally, its limited personalization options and global availability could be areas for improvement. Despite these considerations, Amazon has the potential to reinforce its market presence through enhanced interface designs, expanded personalization capabilities, and improved global accessibility.

Target

Target, a prominent retail giant, has made a notable foray into the world of physical music, specifically through its vinyl edition offerings. While the brand boasts a diverse product range and a well-established reputation, its music selection might lack the depth and specialization found in dedicated music stores. Nevertheless, there is an opportunity for Target to further expand its music-related products and services, particularly in the thriving vinyl market. Collaboration with artists for exclusive merchandise and limited edition vinyl releases could potentially enhance its position in the music retail landscape.

Weverse Shop

Weverse Shop is a dynamic e-commerce platform catering to K-Pop enthusiasts, offering exclusive merchandise and fostering an engaged community for fans to connect and share their experiences. Although it excels in serving a niche market, potential challenges lie in its reliance on a specific genre and potential hurdles with international logistics. With opportunities to diversify its offerings and expand into a broader global market, Weverse Shop has the potential to establish a more comprehensive presence in the music industry e-commerce landscape.

Shopee

Shopee, a popular e-commerce platform, offers a diverse range of products, including music items, catering to a wide user base. While it provides a user-friendly interface and attractive deals, its limited focus on specific music-related features may pose challenges in meeting the unique demands of music enthusiasts seeking exclusive and niche products. However, there are significant opportunities for Shopee to expand its music category and enhance the user experience through curated playlists and exclusive releases, although it may face threats from specialized music e-commerce platforms and rising consumer expectations for tailored shopping experiences.

User Interviews

User Interviews

User Interviews

After conducting the competitive analysis, I moved into validating findings through user interviews.

I asked 5 of my music-lover friends between the age (19-25) for online interviews to understand their album purchasing behavior. Their diverse habits, from streaming to pre-ordering, offer valuable insights for tailoring our platform to music fans.

The participants had varying habits: one relied on Spotify's personalized playlists and occasionally purchased albums on Apple Music, two regularly pre-ordered K-Pop albums on Twitter for the deals and exclusive merchandise, one preferred streaming music on platforms like Spotify and YouTube due to the high cost of purchasing music, and the last one rarely purchased music but would buy from Shopee for special albums or artists. The research highlights the diverse preferences of consumers in purchasing music.

  • I regularly pre-order K-Pop albums through merchants on Twitter. They offer great deals and often come with exclusive merchandise.

    T.

    LGBTQIA+, 25

  • I don't buy music because it's expensive. I prefer to stream it on platforms like Spotify and YouTube instead.

    O.

    Male, 21

  • I rarely purchase music because I mostly listen to it through streaming services. But if there's a special album or artist I really love, I'll buy it on *Shopee.

    P.

    Female, 24

The interviews also reveal that 80% of the participants have had experience purchasing music, yet only 40% have bought physical albums. These insights shed light on the varied preferences and consumption habits within the music-purchasing demographic.

Participants who have purchased music

Participants who have never purchased music

Participants who have purchased physical music

Participants who have never purchased physical music

I then use the insights I gathered to helped me develop two personas:

"Naphat - The Music Enthusiast"

"Sirirat - The K-Pop Enthusiast"

Persona 1

Naphat Jirayus

The Music Enthusiast

  • Age: 22

  • Location: Chiang Mai, Thailand

  • Occupation: University student

Background

Naphat, a university student residing in Chiang Mai, Thailand, has a deep appreciation for music. He frequently explores new tracks on JOOX and is particularly drawn to Thai pop (T-Pop). Alongside his digital music consumption, Naphat occasionally purchases albums on Shopee to support his favorite artists and collect exclusive merchandise. He keeps track of artist announcements and updates through their Facebook pages.

Challenges

  • Discovering new music while staying true to preferred genres

  • Finding reliable sources for album purchases

  • Keeping up with favorite artists' updates and merchandise releases

Pain points

  • Limited access to new music that aligns with his taste.

  • Inconsistent availability of desired albums for purchase.

  • Difficulty staying updated on artist-related announcements and merchandise releases.

Opportunities for service

  • A platform that suggests new music in line with his preferences.

  • Wants reliable options for album purchases.

  • Desires a streamlined way to stay updated on artist news and merchandise drops.

Naphat's Storyboard

(1) Naphat is notified about the opportunity to pre-order the upcoming album from his favorite T-Pop band.

(2) After completing his studies, he heads to the sole music store in his vicinity, only to find it closed due to his late class schedule.

(3) He picks up his phone, opens the App Store, and proceeds to download the Ampli app, which was enthusiastically recommended to him by a friend within the fandom.

(4) Naphat is greeted by a prominent promotional banner for his favorite band's new album as soon as he accesses the home screen.

(5) He gently taps the banner, followed by a precise tap on the "Pre-Order" button. This action seamlessly guides him towards the streamlined and efficient purchase process.

(6) One month elapsed, and with eager anticipation, he joyfully received the album he had pre-ordered, delivered right to his doorstep.

Naphat's User Journey

Persona 2

Sirirat Suthipong

The K-Pop Enthusiast

  • Age: 25

  • Location: Bangkok, Thailand

  • Occupation: Office worker

Background

Sirirat, employed in an office in bustling Bangkok, Thailand, finds solace in the vibrant world of K-Pop. Her leisure time is often filled with Youtube music videos and the latest K-Pop tracks. She is an avid album collector and frequently pre-orders her favorite albums through Twitter merchants to secure exclusive merchandise and benefit from enticing deals.

In addition to her personal K-Pop journey, Sirirat enjoys connecting with fellow enthusiasts online, discussing theories, and sharing her excitement for upcoming releases.

Challenges

  • Keeping up with the latest K-Pop releases and news

  • Finding reliable sources for album pre-orders with exclusive merchandise

  • Staying connected with fellow K-Pop fans

Pain points

  • Difficulty staying updated on the latest K-Pop releases and news.

  • Limited access to reliable sources for album pre-orders with exclusive merchandise.

  • Desire for a stronger sense of community among fellow K-Pop fans.

Opportunities for service

  • A platform that curates and notifies about new K-Pop releases and news.

  • Desires trustworthy options for album pre-orders with exclusive merchandise.

  • Seeks an online community to connect with fellow K-Pop enthusiasts and share excitement.

Sirirat's Storyboard

(1) Sirirat sitting at her office desk with a laptop and headphones, immersed in watching a K-Pop music video on YouTube during her break.

(2) Close-up shot of Sirirat's laptop screen showing her receiving a notification from Twitter for the latest K-Pop album pre-orders.

(3) Close-up shot of Sirirat's laptop screen showing a tweet announcing the K-Pop album pre-order that Sirirat has been looking for.

(4) A depiction of Sirirat completing the pre-order process on her laptop.

(5) Sirirat interacting with a friend on an online K-Pop fan community, sharing her excitement about the pre-ordered album.

(6) A content Sirirat relaxing at home with her newly arrived K-Pop album, excited to open and see the exclusive merchandise she received with them.

Sirirat's User Journey

Based on the personas, I defined the target users for Ampli; a diverse group of music enthusiasts and casual listeners aged 13 and above. They are tech-savvy, have varied music tastes, and seek user-centered solutions to address pain points in the process of purchasing physical music. Convenience, authenticity, and cost-effectiveness are essential to them, as they value a seamless and enjoyable music purchasing experience.

Roles

  • Music Enthusiasts: These individuals have a profound passion for music and actively engage in activities such as seeking out new releases, collecting physical albums, and participating in music-related communities.

  • Casual Listeners: This group includes people who enjoy music but may not be as dedicated to physical purchases. They might rely more on streaming platforms for their music consumption.

Demographics

  • Age: The target audience includes individuals aged 13 and above, comprising teenagers (age 13-17), young adults, and millennials (age 18-35).

  • Gender: The audience is inclusive of all genders, encompassing males, females, and non-binary individuals.

  • Education: The audience consists of individuals with varying levels of education, from high school students to university-educated individuals.

  • Occupation: The target audience comprises students, professionals from different industries, and individuals from various occupations, reflecting the diverse workforce in Thailand.

  • Location: The audience is based in cities across Thailand, representing music enthusiasts and casual listeners from different urban areas of the country.

Psychographics

  • Music Taste: The target audience exhibits diverse music tastes, ranging from local Thai music to international genres like K-Pop and Western Pop.

  • Technological Proficiency: Members of this audience are comfortable using smartphones and mobile apps for various purposes, including music streaming and purchasing.

  • Value Conscious: Some users within the audience may prioritize cost-effective solutions and seek deals, discounts, or exclusive merchandise.

  • Collectors and Engagers: The audience includes individuals who value physical music products as collectors and others who actively engage in music-related communities and events.

  • Language Preferences: Users might prefer Thai language support for local music and English or other languages for international music.

Content Map

Having gained a thorough understanding of the users, I developed a well-structured content map for the app, prioritizing a simple and hassle-free purchasing process. Carefully considering every essential element, I ensured that the app incorporates all necessary contents to function seamlessly. By blending user insights and strategic content organization, our goal is to create an intuitive and efficient music store and community app that caters to the diverse needs of our target audience.

Wireframes

Investing the effort to create paper wireframes for each screen of the app stemmed from a comprehensive approach to addressing user pain points. By meticulously designing iterations on paper, I aimed to ensure that the final digital wireframes would effectively cater to user needs. In shaping the home screen, I not only examined the competition's home UI but also weighed various design options to offer a seamless experience.

The chosen approach, Option B, resonated with our goals and considerations and was subsequently incorporated into the initial digital wireframes. This decision ultimately sought to streamline the ordering process, providing users with a quick and efficient way to save valuable time while interacting with the Ampli app.‍

After ideating the home screen layout through initial sketches, I transitioned to Figma to produce the first set of digital wireframes for the Ampli app. During this process, I emphasized seamless navigation, drawing inspiration from established design practices. Meticulous research into comparable applications ensured the creation of user-friendly wireframes. Additionally, I maintained visual consistency by implementing uniform layouts, cohesive color schemes, and typography, fostering a sense of familiarity for users. Prioritizing accessibility, I integrated clear language, high-contrast colors, and voice-to-text functionalities to facilitate easy navigation and streamline task completion, particularly for users with motor impairments.

Low-Fidelity Prototype

The low-fidelity prototype was designed to replicate the primary user flow for ordering an album, making it a valuable tool for usability testing with real users. The prototype was created with the intent of mimicking the actual user experience as closely as possible, providing a realistic environment for conducting usability studies. The prototype was connected to the primary user flow of ordering an album, allowing for a thorough testing of the user interface and user experience, providing valuable insights for improving the design and user experience of the final product.

View Prototype

Usability study

Two rounds of usability studies were conducted. The initial study guided design progression from wireframes to mockups, while the second study, utilizing a high-fidelity prototype, identified areas in need of refinement in the mockups.

Research Deck

Research Questions

  1. How long does it take a participant to find and purchase an album in the app?

  2. What can we learn from the user flow, or the steps that users take, to purchase an album?

  3. Are there parts of the user flow where participants get stuck?

  4. Are there more features that participants would like to see included in the app?

  5. Do participants think the app is easy or difficult to use?

Participants

5 participants 

  • Participants between the age of 23-25 who reside in metropolitan areas. 

  • 2 males, 2 females, 1 member of the LGBTQIA+ community

  • Participants purchase music album at least once in a year.

Methodology

5-10 minutes

  • Thailand, United States

  • Unmoderated usability study

  • Participants were asked to find and purchase an album on a low-fidelity prototype.

Usability Study Findings & Affinity Map

Utilizing the input gathered from participants, I proceeded to construct the affinity map, commencing with the process of digitally grouping related feedback and observations using FigJam. This digital approach allowed for seamless organization and manipulation of insights, akin to the tactile experience of arranging physical sticky notes. These insights were then meticulously sorted and classified into three distinct categories: confusion, discontent, and satisfaction. With the affinity map in place, I transitioned to the subsequent step, delving into the findings that emerged from this usability study.

Clearer indicators needed

Participants need clearer indicators to make sure that their actions are successfully completed.

Improving checkout pages

Participants require fully functional checkout pages for effective participation in the usability study.

Seeking improved and polished UI

Participants were satisfied with the current UI but need it to be more improved and polished.

Screen information overwhelm

Some participants felt overwhelmed by the amount of information presented on specific screens.

High-Fidelity Mockups

This initial version showcases the mockups of Ampli app (formerly Ampli Music). Following the wireframes, I meticulously translated each element from low-fidelity to high-fidelity. These mockups were then employed in the first round of usability studies to gather valuable user feedback and insights.

After analyzing the usability study insights, some participants expressed disapproval of the black and white UI, finding it unfinished and overly contrasting, diverting focus from the main content. To address this, I implemented a redesigned UI with a lighter color scheme, resulting in a cleaner and more enjoyable appearance. I also crafted a new logo and made various adjustments to align with the desired aesthetic while preserving the well-received UX elements and addressing areas participants found unfavorable.

High-Fidelity Prototype

Subsequently, I proceeded to develop a high-fidelity prototype utilizing this design for the second round of usability studies.

View Prototype

Round 2 Findings

Demand more interactives

Participants want more buttons and input boxes to be interactive to improve the overall user experience.

Inconsistent elements placement

Participants want the main buttons to stay in the same spot through different screens.

Incorporating user feedback, I refined the album ordering process and introduced a dark mode option for nighttime usage.

I have enhanced the initial checkout process, first is the sign-in stage, by implementing several improvements. These enhancements include changing from "1 of 3" to "sign-in", refining the labels and color of the input boxes, introducing a "remember me" radio button, relocating the "reset password" link, altering the color scheme of the "Create a new account" button, and incorporating the convenience of signing in via Facebook, Google ID, and Apple ID options.

Before

After

Next in line, I introduced a series of modifications to the shipping stage within the checkout process. Notably, I refined the terminology from "2 of 3" to a clearer "shipping" label to enhance understanding. Additionally, I embarked on a redesign of the shipping method selection, incorporating distinct frames around each selection to highlight the active stage. Furthermore, I replaced checkboxes with radio buttons, aligning with the logical premise that users can only make a single selection.

Before

After

Lastly, in the context of the ultimate checkout page—the payment stage, I've introduced additional enhancements. Notably, I integrated a new payment option: Apple Pay, to provide users with added convenience. Furthermore, I changed the label from "3 of 3" to "payment" for improved clarity. This transformation involved replacing checkboxes with radio buttons to ensure a streamlined interface. Similar to the preceding stage, distinct frames were introduced around each payment alternative, indicating their active status and accompanied by icons. These refinements collectively contribute to heightened visual clarity and an enriched user experience.

Before

After

I introduced a dark mode variant to the Ampli app's home screen, enhancing the experience for users who favor darker UIs and addressing accessibility requirements. Please note that due to time constraints, a complete dark mode prototype was not developed.

Before

After

What Ampli Taught Me

"A Transformative Journey of Design, Feedback, and Growth"

Embarking on my inaugural UX/UI project with Ampli has been an eye-opening journey, revealing that great design isn't always apparent from the outset. The invaluable lesson of actively seeking and integrating feedback has underscored the importance of continual improvement in design. Navigating the intricate web of user research and testing unveiled early pain points and usability concerns, driving a more inclusive and accessible platform. This process has instilled in me the value of remaining receptive to feedback and making necessary adjustments, ultimately leading to a significantly enhanced end product.

Design Guides

Logo

Colors

Light Mode

#D62E4D

#34A853

#FFFFFF

#EBEBEB

#595959

#000000

Dark Mode

#D62E4D

#34A853

#FFFFFF

#959595

#222222

#000000

Decoration

#EBD0EC

#FCDBE1

#FAD4B9

#FFEBB2

#D5F5D2

#D2E6F5

Texts

Heading 1

AaBbCc

32px · Helvetica Bold

Heading 2

AaBbCc

20px · Helvetica Bold

Body 1

AaBbCc

16px · Helvetica

Body 2

AaBbCc

14px · Helvetica

Buttons

Big

BUTTON

BUTTON

BUTTON

Small

BUTTON

BUTTON

© 2023 Shawn Chinnanon

Disclaimer: Copyrighted materials used in this project are not owned by me. They were employed for educational purposes during a certification course. All copyright belongs to respective owners. Reach out with concerns.