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:
- 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.
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.
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?
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.
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.
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.
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.