OVERVIEW

Project Brief

Navaak is a new way to listen to music for Iranian users. With Navaak, users can listen to the number one songs for Persian music and other famous international songs.

The Problem

All the primary actions were accessible from the hamburger menu and by the growth of the company it was the time to redesign the app to define the new structure to the app.

The Goal

Developing a music mobile app that allows user to search and listen music playlist in a clean and easy to interact interface. 

Responsibilities

Tools

Sketch, InVision, MockFlow

The Process

My process will be different inn different projects and will be determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.

Understanding the core of the product

Before doing any ideation I started to analyzing the existing design page by page to understand the core of the product. Analyzing comments in the app store also helped me to know the pain points and strength of the current design. 

Key Findings

• Features Discoverability issues
• They don’t feel the emotionally bounded to app.
  
• Too many taps for the simple action 

Initial Proposal

Proposed a design with fast access to significant sections (Home, discover, My Music Library, profile) and made accessibility straight.

• Design principles: clean, emotionally connected (colors, icons).
• Home screen more personalized (Recently released songs, Popular artists/songs, Recommended artist/song )
• Navigation and transition should be easily understandable.

GATHER IDEAS

Sketching and Wireframes

We had a list of screens to cover all scenarios so I started to sketching different designs to detail out the flows  to discuss and share with team members to get feedback.

Laying the foundation

Crafting a Holistic Look and Feel

This is a style guide for Navaak's brand and mobile application. This style guide contains colors, typography, components, buttons, icons, and overlays.

GENERAL FLOWCHART

User Flows 

As the saying goes, “A good start is half the battle." Before going into user interface design, I made sure to polish the features and user interaction flow.

The following feature flowcharts describe the content strategy and user flow through the app, listing potential features users may interact with. The creation of flowcharts are the basis for refining the workload necessary for developers and higher-fidelity designs later on, and for discovering potential issues behind the product in a quick and time-efficient way. 

Splash and Onboarding

When the users start the app, they will be led through a Sign In or Sign Up and onboarding process before proceeding to their default screen, the Home screen, which houses a footer navbar. The navbar has four tab options:

Home — where users go to see and explore different songs, albums and artists.

Discover — where users go to browse different songs, albums and artists.

My Music — where users go to find their saved songs, albums and playlists.

Profile — where users go to view their public profile and settings.

Home and Discover Screens

Here I put some of the screens from the primary actions in this music app. Main screen for discovering new songs or artists plus the browsing page to help users find the song they're looking for.

Playlist , Profile and Player Screens

Users can continue listening music from the library in "My Music" screen or from artists profile page. My music page is a place that allows user to search in its own music playlist or even creating new playlist.

Apple Watch UI Screens

We envisioned this product can connect Apple watch. We wanted to make the experience as rewarding for the users.

What I have learned from this project?

• Simplicity is strength. As a designer, we are often lured by attractive, trendy and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems and then come up with a design that solves it.
• Process in essential. For a project that is vast, it gives you a roadmap to navigate through what can be a foggy route. This is especially useful when you’re starting out.