Week 4 Ironhack — Karaoke on Instagram

The project this week was to work individually on adding a new feature to an existing app. We were assigned the feature and app randomly and I was lucky enough to get to add a karaoke feature to Instagram!

The purpose of this challenge was to focus on building the UI elements to come up with a hi-fidelity prototype that would look like part of the existing app — and as always, we had to incorporate research to guide our design.

I started by looking into karaoke apps as well as thoroughly analysing instagram, to identify where this feature could go. I had my assumptions but carried out user research in the form of a quick 3 question survey to instagram users:

  1. Would you use a karaoke feature on instagram?

2. Where would you find the karaoke feature?

3. How would it work? (For this question I allowed users to select multiple answers to get a feeling for what they would find important)

The results informed my design design and confirmed some of my assumptions but not all. My user flow initially included live performance, video on/off button, and for the user to select duet or solo, before starting.

First draft user flow

From the research results I cut out the live performance as very few people would do it — plus the live story on instagram would be a better fit for this feature. I removed the video on off because: why would they do karaoke on instagram without seeing themselves singing?! I also made an add friend button for duetting as opposed to a step the user had to take. Making the flow a lot smoother.

Iterated User Flow

The lo-fi helped me quickly map out the feature and the mid-fi helped me understand what space instagram had for the feature within their conventions e.g. where would the add song button go? where would add a friend go?

lo-fi wireframes

I made a prototype with the mid-fi wireframes to test for issues or misunderstandings or pain points before moving on to creating the hi-fi.

mid-fi wireframes

The feedback was positive, although it was felt that the vocal bar visuals might be too distracting/annoying so I solved this in the hifi prototype.

mid-fi showing solo and duet flow

UI

I feel confident with building UI elements, but I am not fully versed in Sketch and Figma. I’m still undecided on which I prefer because although Sketch just feels neater and tidier to use; the Figma prototyping tool is really great and easy to use.

So I used Figma for mid-fi wireframes to prototype quickly and used Sketch for building the UI elements, but when I transferred the Sketch files to Figma it caused a few problems. I lost some symbols and images and had to do a bit of back and forth before it was safe to prototype in Figma.

I think I work quite fast in Sketch but am quite messy with files layers and art boards. This week we were introduced to the principles of Atomic design, which helped me think about how to organise my work better by considering the UI elements in terms of atoms, molecules, organisms…and so on.

You can see below how I built the song picker screen on Sketch with the Atomic Design Principles.

Building my screens from ‘Atoms’ on Sketch
Hi-fi prototype (including my face!)

Considerations

Working alone had its advantages: I was able to organise my time much better. I also realise I work in a very irregular way compared to how I work in teams: I move quickly from research to user flows to UI elements then back to research to wireframes all in no particular order.

In groups you need to keep more of a step-by-step guide and communicate what and when you are doing each of the steps. That in itself takes a lot of time. On the other hand working in teams has the advantages of being able to bounce ideas off one another, supporting each other and of course, sharing the workload.

For the next steps of this project, I’d like to show the duet feature in hi-fi and work on better prototypes.

--

--

--

Illustrator & UX/UI designer, Berlin www.davidlymburn.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Trimble Connect and Why is it So Useful

Test assignments or portfolio: what works for a UX designer?

Test assignments or portfolio: what works for a UX designer?

Crafting a timeless user experience with design systems

How to Design a ‘Modern’ Logo

Living the design double diamond life

The Making of UX Writing Copy for the “CookTube” Application

🧱 Learn More About Victor Doval’s Virtual Spaces

Beyond the Binary: 5 steps to designing gender inclusive fields in your product

Field with label “sex” and two radio buttons: male, female. An X is placed in between the options.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David L

David L

Illustrator & UX/UI designer, Berlin www.davidlymburn.com

More from Medium

Global Girl Media Responsive Site

Reshaping & Restoring the Activists’ Message

UX Writing Case Study: Money Back Guarantee Page pada redBus App

Enhance Shopeefood App: Checkout Flow