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.
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.
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.
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.
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.
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.
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.
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.
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!