UI Case Study: Add A Feature

Implemented by Ironhack Miami

In this case study I’ll showcase my process in designing a new feature to an already existing app; recreating the design system and utilizing it to build the new feature.

Project Contributor: Robert Zamora

Intro

As a new designer joining a team, you’ll often have to rapidly come up to speed on your product and users, and quickly iterate on proposed solutions under tight timelines.

Brief

During this project, you are going to analyze an already existing and highly adopted app and incorporate a new feature into the existing product. The feature you develop will be based on an area of functionality to be explored and compared to user input.

Deliverables

• User flows for the key new tasks the user needs complete
• Show how the feature fits into the app navigation
• Atomic Design inventory and backward design system
• Evaluation of your design against heuristics and CRAP principles
• Digitized screens at high fidelity
• Evidence for key decisions through research and testing

App Decision & Feature

To start I just starting jotting down apps that most users have on their phone and then narrowed it down to three. From there, I came up a different feature for each app:

• Netflix- Movie trivia feature
• Spotify- Karaoke
• Hulu- Party games

From there I proposed my ideas to several users to see what feature is the most appealing. I received unanimous encouragement to create a karaoke feature on Spotify.

UX Research

From there I gathered some quick data from interviewing users about karaoke itself and what they like about it. I wanted to discover what is the incentive that people have to do karaoke.

Interview Quotes

I found that the togetherness and camaraderie is what really makes karaoke an enjoyable activity; even for shy users. It’s an activity that people like to do in private social situations like birthday parties or family gatherings; the appeal is less when it’s for open public bar sessions. The only except for bar settings is when it’s with private rooms, and those are harder to come by.

Persona

Using my research data I identified that my user is a social butterfly who enjoys going out with friends; and is also a big lover of all things music. This is how I came up with Lyrical Lawrence as my primary user persona.

User Persona

Lawrence loves all things music and even more so when his friends are involved. Karaoke is the ideal activity for him to enjoy, and keeping Lawrence in mind will help me ideate.

Value Proposition Canvas

With my feature and my user conceptualized, I then utilized a Value proposition canvas to to see what worth my feature would bring to the market and my users.

Lean Value Canvas

Ideation

For ideations I began by brainstorming all the concepts I could think of and putting it all into a mind map. Looking in to ideas for doing karaoke with friends, or other users, and even making it in to a sort of challenge.

This then lead me to organize and prioritize the ideas from my mind map using a MOSCOW method.

Aside from the mechanical needs to do karaoke, I knew I needed to focus on a party mode approach. Creating ideations for a group chat options to communicate, incorporating a live video stream of the user singing, and maybe incorporating a solution for the user that’s a little camera shy when they sing.

MVP

Using my insights from my research, I constructed my MVP below.

MVP

Focusing in on the idea of karaoke bringing friends together and having fun, coupled with a sense of privacy that you lack at karaoke bars.

User Flow

With my MVP in mind, I crafted the below “happy path,” user flow to help illustrate how Lawrence would interact with the feature. Depicting the entry point from the home screen, as well as the set steps and decisions he would need make in order to use the new feature.

User Flow

Sketches & Low-Fi Wireframes

I then started to sketch my ideations from my MOSCOW and created low fidelity wireframes based on the flow.

I just wanted to make a quick skeleton of what my Hi-Fidelity wireframes would look like. This also assisted when I began to create and organize the design system from Spotify.

Design System

Before I started creating components and crafting styles, I took inventory of Spotify’s design system. Noting the buttons, icons, formats of the major screens, but also taking in to account micro interactions and states.

Self Crafted inventory of Spotify Design System

Some components, I built along the way as I was creating screens, and some components were never used even though I had them in the inventory.

Screenshot of components & styles

Hi-Fidelity Wireframes & Prototype

When I felt that I had a good amount of components in my inventory I started to convert my lo-fi’s in to high fidelity.

Building screens in Sketch

With the design system I set up, it took me no time to put together the UI, and with it my feature became idealized.

Once I completed all the screens I created the prototype in InVision based on the user flow I previously created.

The prototype would function as follows:

• Karaoke option would be found in “Your Library” page
• User will have option to chose between a “Solo mode” or “Party mode”
• The “Party mode” would allow the user to invite friends found on their Spotify friends list to the party room.
• Users can speak and hear each other once in “party mode room”
• Once other participants have been invited, the participants will then choose songs they would like to sing
• Once song have been picked, the users will be randomly selected as to who will sing and will hit the play button on the had previously chosen on the list.
• They will then be taken to the karaoke screen where they will have the option to sing with their camera or use a Memoji avatar.
• Once the song is complete the will be given a score determined by how accurate they sang the song; to incorporate a competitive aspect.
• After your score is given the next user is randomly selected to sing.

Final Thoughts & Next Steps

I feel that I was successful in matching the UI and design system of Spotify. Working around blockers such as font copyright, and some sizing inconsistencies I faced.

Next steps would be to dive in to the solo mode aspect, and maybe even a duet mode. Integrating a social aspect where maybe the user can challenge or sing along with other users in a random format.

Recently Spotify has teased at an actual karaoke feature themselves, and I’m excited to see what they’ve come up with!