Westerners WORLD

As a part of my creative development, I have embarked on an adventure into the world of UX/UI design. Below is my first case study produced during my Google UX Design Professional certification. Please feel free to contact me for more information.

Case Study: Media/Merch APP

Developed from a generated design prompt and built in Figma, the Westerners World app is a platform designed for hosting music, video and merchandise from a rock band.

As a solo project, I was responsible for all roles from conception to high-fidelity prototyping. Responsibilities included conducting research interviews, competitive audits, paper and digital wireframing, low and high-fidelity prototypes, usability studies and iterating on designs.

User Research

I started by conducting in-person and phone interviews with a wide cohort of music listeners, and asked about how they consumed music. The results were varied, however what they had in common was all users did listen to some form of digital music as a part of their listening diet.

Further research indicated that listeners would often go outside their regular music providers to seek out exclusive content from their favorite artists. This led me to believe that creating a portal that offered exclusive video and/or audio content could help drive discover for the band, as well as create a commerce platform that can offer the band’s merchandise.

WHICH SITE?

With so many different social media platforms today, fans need a centralized location to access the band’s growing content

GET LIVE

Fans have emotional connections to live shows, and cell phones just don’t do it justice. The band will provide high quality video captured from the mixing board at every show

MERCH MATTERS

Many people don’t buy physical music, but do like to buy some wearables and other merchandise. Easy access to merch will help drive interest in the band

Persona Journey Mapping

Persona: Marci

Marci Caballero is a graduate student and music fan who needs a way to listen to the latest releases from her favorite band because she can’t find it on any of her current streaming services.

Persona: Dustin

Dustin Briggs is a musician and collector who needs vinyl and high resolution audio because he has a nice stereo system and quality matters with the music he loves.

Persona Storyboarding

Beginning the Design

Paper wireframes

While drafting variations on each app section, I began to recognize how certain features would fit together when situated within the app as a whole. This process also helped inform which layouts would fit the growing volume of content that will be added.

Digital wireframes

Building the wireframes using Figma, I began to refine the design and start developing the spacing relationships for the different elements I would be using. All pages were built with portrait mode in mind, although a "full screen" version of the video player was mocked-up for prototype continuity.

USABILITY STUDIES

Two rounds of in-person usability studies were completed, one with the low fidelity prototype and the one with the high fidelity prototype. Users were asked to complete a series of tasks including selecting a video to watch and completing an in-app purchase.

An affinity diagram was created using the feedback collected from each of the usability studies.

Round 1 Findings:

Create links to purchase content
Offer users exclusive video content
Make purchasing through app simple

Round 2 Findings:

Some text items should be navigable
Action buttons should be bolder
Video sorting should be prioritized

After visually organizing the user feedback in each round of usability studies, I synthesized that data into actionable insights. The feedback offered insight into navigation bias in the design I was previously unaware of, such as only making thumbnails (not text) active buttons. This process offered me direction and priority as to what changes should be iterated in the design before moving ahead to the high-fidelity prototype.

High fidelity Prototype

After collecting imagery for the app, I built the high-fidelity prototype in Figma.

A deep burgundy theme was selected with accents of yellow and denim blue to help give the app a warm, relaxed vibe.

Another round of usability studies were conducted in the same fashion as the low-fidelity prototype, and the design was further iterated on.

Colors and text were modified to increase accessibility.

Impact:

Once completed, the Westerners app design will allow fans to access all the band’s content and merchandise in one place. As the band continues to tour, the app will be able to scale with the content that shall be added in the future.

What I learned:

The usability studies I conducted opened my eyes to how other users approach UI surfaces and navigation cues. This revealed a design bias I have toward image and icon related navigation, while the i teration process provided me with direction to correct for that.

Google Sites

Report abuse