B3atz Music App

B3atz Music App

A Music Playing/Streaming App

Overview

Task

Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc. Also, consider the device type that's playing the music. A dashboard in a tour bus, a smartwatch, or via a web browser. Each device type will have different requirements, features, and restrictions to consider.

What is B3atz

B3atz is derived from the word Beats and also has the same pronunciation. B3atz is a media player application for the iOS and Android operating systems, designed by Side Hustle UI/UX Portfolio Bootcamp Team 3. It was designed in such a way that it will be able to play music files stored locally on devices, as well as stream online.

Our Role

UI/UX Design

Tool Figma

Duration 5 days

Design Process

Ideation

The team had a lot of brainstorming sessions, and we came up with a lot of ideas possible, till we were able to come up with the best ideas where ideas were understood and the basic element of thought was visualized.

Research

We all went online to search for various music application that is already in existence to draw ideas from, apps like Apple music, Boomplay, Audiomack, etc. We also went of to check various designs on Behance and Dribble just so we could come up with something unique and easy for usability.

The Designs

User Persona

We created a user persona to serve as a guide through our design process.

Style Guide

User Flow

We created a user flow to guide our design process

Sketches

We sketched out all ideas that was virtualized during the brainstorming to serve as a foundation for our designs.

Figma file

Details of the Design

We Designed the music playing/streaming app with features that are easy to use for users and it enables them to download music to the cloud of the app. They can also play music that are on the local file of their file.

Onboarding

We designed an onboarding experience screen in a way to introduce new users to the app.

Onboarding.jpg

Sign Up/ Sign In

We designed an easy process for our users to either login into the app if they already had an account or to create a new account if they were new users.

up sceen.jpg

Set Up

For new users, they are to set up their music app to select their favorite genre and artist. This will enable the app to suggest music to users according to what they selected.

Set  up sceen.jpg

Other Screens

Other screens consist of Home Page, Now Playing Page, Lyrics Page, Queue Page, Explore Page, Library, Setting, Search Page, Profile Page, etc.

13 pro.png

13 pro-1.png

13 pro.png

13 pro-1.png

Prototype

The Team

Hephzibah Oyetunde LinkedIn

Adewola Muiz LinkedIn

Tomilayo Abimbola LinkedIn

Hamza Olayinka Abdullateef LinkedIn

David Goodness Deborah LinkedIn

Enekwechi Uchenna LinkedIn

Ifeanyi Asonye LinkedIn

Habeeb Ibrahim LinkedIn

Oluwatimilehin Oyedele LinkedIn

Conclusion

It was a lot of work in a short period and the entire team had fun designing this particular task. We look forward to iterating many aspects of this application in the future. However, as for the present, this is how we will leave you with B2atz App.

Thank you for reading!