Battle Me - Hip Hop Rap App

Responsive iOS Mobile App Design

View Prototype

I. Introduction

Timeline:
May 2019 - August 2019, December 2020
The Project

Battle Me is a mobile app designed for every Hip Hop lover! Users can create their own raps to amazing beats, perform solo or battle components all over the world.

While working with Collective Minds Inc., one of their clients hired me to work as the sole UX/UI Designer to help him bring his project to life.

Deliverables
UX
  • Personas
  • Mood Board
  • Flow Diagram
  • Storyboard
  • Sketch Wireframes
UI
  • Wireframes
  • Prototypes
  • Visual Design
  • Digital Mockups
  • iOS Components
Branding
  • Logo Design
  • Color Styling
  • Iconography
  • Typography
The Problem

The Battle Me app is not available in the App Store and will be under development within the upcoming year. I was tasked with creating an application that is engaging, entertaining, and caters to all lovers of Hip Hop.

Tools Used
  • Adobe XD
  • Miro
  • Adobe Photoshop
  • Flowmap
  • Pexels
  • StoryboardThat
  • UXPressia
  • Stakeholder Interviews
The Solution

Create an intuitive and creative mobile app that incorporates media players, personal upload and create features, and social networking to provide another element to the Hip Hop community.

II. The Design Process

1. Discovery

While working with Collective Minds Inc. (CMi) I was tasked with creating a Hip Hop Rap themed application that allows users to perform raps over various beats against someone or solo. I started by creating a Mood Board, from similar apps like Battle Rap, and then a Proto Persona, to begin to understand my client's desired feel for Battle Me.

2. Research

I conducted a Stakeholder Interview with my client and gathered a clear understanding of their expectations, current user pain points, and overall desire for the outcome of this project. From his user insight, I was able to create two User Personas that fit two types of user profiles, a rapper and a music lover.

3. Definition

Next, I created an I Wish, I Like, What If diagram and a Feature Prioritization Matrix to categorize potential app features based on what users are hoping to gain from using Battle Me.

4. Ideation

Next, I designed an App Logo for Battle Me and created sketch wireframes of the initial screen designs of the project. Lastly, I created a Storyboard to understand Battle Me's real-world application, from this I was able to iterate on my sketch wireframes to provide a more user-friendly design consistent with user expectations.

5. Prototyping

I started creating the Lo-Fi Clickable Prototype with the iterated sketch wireframe designs. I added minimal color to begin developing the Style Guide. I conducted initial user-testing on the Lo-Fi Prototype and used the gathered feedback to iterate on the designs once more.

6. User Testing

Lastly, I created a Hi-Fi Clickable Prototype, this consisted of a limited display of the app's functionality but highlights the main features of Battle Me. I incorporated standard iOS design components to create a familiar and reliable mobile design. Overall, users were satisfied with the app but struggled with the limitations of the prototype.

III. Conclusion

Future Implications

Battle Me is currently unavailable in the iOS App Store but is under development and should be available in within the next few years. I've recently made changes to the product's design and will continue to make improvements to the product until it's official app release.

Latest Work

Check out my other recent projects!

Let's work together and transform your design concepts into reality!

get in touch now