UX/UI Design for Mobile App

Bassline

RESPONSIBILITIES

User Research, Competitor Analysis, User Personas, Storyboarding, Wireframing, Prototyping.

PROJECT DATE / DURATION

Jan 2023, 6 months

IOS App for Mobile

PROJECT TYPE

Lead UX Designer, UX Researcher, Brand Designer

ROle

I want to understand the processes and emotions that people experience around tracking album sales for an indie rock band, and tracking sales in general.

the goal

A mobile app for tracking album sales of an Indie Rock Band. Target audience includes music industry managers and creative personnel involved in sales tracking.

the product

I am trying to solve the problem of sales tracking apps being hard to navigate, displaying unclear data that is hard to understand, uncustomizable, unpersonalized, lacks creative branding, and is unable to share easily.

the problem

Project Overview

Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was small business owners needing to streamline their business in order to save time, produce better products and services, and keep up with the competition.

This user group confirmed initial assumptions about the need for sales tracking apps to be clear, simplistic, and easy to navigate, but research also revealed that unfriendly interfaces were not the only factor limiting users from using sales tracking apps. Other user problems included security, shareability, and the ability to make personal customizations, that make it undesirable to use sales tracking apps.

Pain Points

Sales tracking data is often unclear or text-heavy, making the data analysis difficult to understand and sift through.

Personalization

Readability

Shareability

It is difficult to sync sales tracking info with other platforms, resulting in inconvenience for the user. It is also hard to share the data with teams and customize exactly what data to share or keep private.

Users find it difficult to adjust dates and graphs to match their specific project timelines and personalize the app to display the data they most regularly want to see.

Persona: Zareen

Zareen is a project management intern who needs to easily and quickly create a sales presentation for her bosses, so that she can spend more time on other tasks and her bosses will be impressed with her.

Problem Statement

User Journey Map

The goal of the User Journey Map for Zareen is to find the best way of gathering sales data from her company’s 3rd quarter and creating a presentation for her internship leaders. Many of her needs revolve around saving time, reducing confusion, and instilling confidence.

Paper Wireframes

In this stage of the design ideation process, I created multiple design for the same screen in order to determine the best design that addresses the user pain points and supports user flow.

Digital Wireframes

This wireframe showcases the home page design, the “Activity Feed,” which immediately showcases the most recent sales data of their recent album as well as a feed of news about the album. This focuses on the user’s need to easily and quickly see the basic stats and updates of their sales.

The user will automatically see their most recent album and it’s basic stats when opening the app, and can switch to different albums as they please.

The main navigation menu focuses on the user’s need to see their analytics quickly and understandably, interact with their team, view their marketing campaigns and how it affected album sales, and create a quick presentation of data they select.

This design uses graphics and visuals to reduce text-heavy instructions and create an understandable, consumable design. This is the last step in creating a data presentation in the app. It focuses on customizations and clear data presentation. Once finished, the user can share the presentation with their team or export it directly to their devices in a secure way. 

The user is able to see every slide that the app has generated. All of the data they selected to include in the previous steps are now in the presentation, and they can edit and add notes as needed. 

The user can customize the presentation further by adding new elements that they wish to add. 

Low Fidelity Prototype

The low-fidelity prototype connects the user flow of creating a presentation for showcasing album sales data so the prototype can be used in a usability study with users.

A short introduction to the usability studies I conducted and my findings.

Findings

1 / Users want to be able to export this to their computer in a web app.

2 / Users want to be able to scroll through powerpoint slides in the bigger view, rather than just the sidebar.

3 / User wants unnecessary information and unclear labeling removed. 

Round 2

1 / User wants to see analytics faster

2 / User wants all navigation to be clearer and easier.

Usability Study

Round 1

MOCKUPS 1

Based on research insights, the Activity Feed was completely removed and the Analytics page became the home screen. This way users can view their analytics faster and are not clouded with unnecessary information. 

After usability study

Before usability study

Based on research insights, the Presentation process was shortened and all data now generates completely automatically, rather than having the user select each data point.

There was also a Presentation home page added where users can see all there past presentations and saved drafts.

After usability study

Before usability study

MOCKUPS 2

The second usability study revealed frustration with the presentation creation flow. To make this flow more intuitive and user friendly, I added a “back to presentations” button, and made the big slide preview scrollable to match the sidebar slide scroll.

After usability study 2

Before usability study 2

The second usability study also revealed that users were frustrated by the flow of viewing their different analytics. To solve this, I added platform logos, country flag imagery, color variation, and clear containment design elements to make this process more intuitive.

After usability study 2

Before usability study 2

High Fidelity Prototype

3

Used large preview images of presentations throughout the presentation creation process to make navigation and user flow easier and more intuitive.

Color contrast ratio was adjusted to meet standards set by the Web Content Accessibility Guidelines.

Used icons, music platform logos, and country flag images to make navigation easier on the Analytics page.

Accessibility Considerations

1

2

Going Forward

Takeaways

Next Steps

Takeaways

The app makes users feel like they can easily see their data and process it in a high-quality, on-the-go way.

“I felt like it was very informative about the data I wanted to see and easy to present.”

IMpact:

What I Learned:

While creating BassLine, I learned that after user feedback, apps can evolve not only aesthetically and functionally, but also conceptually. This app transformed from being primarily about showing the individual their data analytics, to being an app that helps users present, collaborate, and share data.

3

Add interactions to toggles on the Analytics page so users can experience viewing different graphs based on toggle titles like “profits,” losses,” “followers,” etc.

Build out the “Team” and “Calendar” pages so the user can easily collaborate with their team on analytics research and marketing efforts, as well as see dates for music releases and marketing effort timelines.

Build web app for desktop and tablet view so the application can be accessed from any device.

Next Steps

1

2

Let's Connect

Thank you for reviewing my work! If you’d like to get in touch, click the Contact button below.