ZoukE

Ui Design

Overview

ZoukE is a service based in Delhi, India to connect musicians with cafes. A mobile application, it is a platform to provide a stage to musicians ranging from rookies to experts, where they can easily scout for cafes to perform in, all at the click of a button!

I collaborated with the team and designed the UI for their mobile app.

Role

UI Designer

Tools & Methods

Google Docs, Miro, Figma

Duration

May 2021 -June2021

Challenge

ZoukE is bridging the gap for independent musicians to find gigs hassle-free. I worked with the team to design the brand identity and mobile UI.

Approach

I prioritized the user's needs and goals and designed a UI that was intuitive, visually appealing, and easy to use. After reviewing wireframes, I created a style guide, and designed screens and interactions that aligned with the user flow.
I iterated on the designs based on feedback until arriving at the final product with the development team.

Final Designs

The stakeholders being Cafe owners and Musicians, I designed the pages for both sides of the service. These ranged from profiles for musicians and cafes to booking and payment pages.

About Zouke

Through ZoukE, musicians can view cafes that are hosting performers and make an offer to the cafe owner while the cafes can request performances by musicians– all based on genre, price range, and availability.
With a business requirement document in place, the ZoukE team was looking for someone who could visualize their goal and present it to the audience.

I joined the team as a UI Designer initially but then soon I found myself suggesting changes to the user flow and asking 'Why are we doing XYZ? What's the goal with that?'

Design System

I started the process by establishing the visual identity for the mobile interface which involved the Color Palette, Iconography and Typography.

Design Process

The team asked for something that would look simple and yet convey energy and zest.

We tried two different themes– light and dark.
After much contemplation and discussion, we decided to go with the dark theme for the onboarding sections as it looked more polished. Followed by a slow transition into a light theme.

...Sprinkling some UX

While I was doing the UI of the mobile app, I realized some connections were missing.

How much freedom does the user have over their profile's privacy?
Can the user delete the media they post?
Who can like the media on someone's page?
Is there a way for them to edit their profile information?
What fields do we have for sorting when looking for musicians or cafes?

As a team, we discussed these and many other questions and thus filled in the gaps through design and a better information architecture.

Towards the end, user stories helped us refine the flow of the app better.
One such example is the payment page.
We were debating whether to have the user fill in their payment details on the same page or to have them select the payment method and fill in the payment details on the next page.


This is the final prototype in Figma. Interact with it to try it out!


It is always better to break down crucial steps such as payment pages for critical design purposes.
So we elected to have it broken down as seen in the second prototype.


This is the final prototype in Figma. Interact with it to try it out!

Final Interactive Prototype

This is the final Figma prototype with all the screens for both users– Musicians and Cafe Owners.


This is the final prototype in Figma. Interact with it to try it out!

What I learnt

I flexed my visual design muscle with this project and gained more confidence in my visual design skills.

On a personal front, this project came to me at a time when I was getting more comfortable freelancing and had just jumped out of a full time role doing consulting work. It gave me the opportunity to work independently and practice articulating my thoughts better and work on professional communication and be a leader.

I had the wonderful opportunity to work with some great minds out in the world, bring what I do best to anything I pick up(UX, duh) and learn from each one of my team members.