LEVELEDGE

Responsive LevelEdge mockup on different devices.

LevelEdge is a webapp which offers a trustworthy way for music professionals to easily connect and solve production issues. I developed the project through discovery and ideation to wireframing, prototyping, testing and final design.

I worked on LevelEdge through the Careerfoundry UX Design Immersive course while running my own freelance business. The project was developed across 5 months where I received guidance and critique from expert UX designers and mentors.

As lead UX Designer I worked on every part of the project - from ideation to final design.


The Problem

I wanted to solve a problem which I and many other musicians have faced; a way to quickly solve production issues without having to spend hours scouring forums or watching dated tutorials. My solution, LevelEdge offers a responsive webapp which ensures that both those in need of assistance and experts can effectively communicate with each other.

LevelEdge Data Research

Discovery

Based on my hypothesis I conducted competitive analysis and enlightening user interviews with both music professionals and amateurs to find out how they currently try to solve production problems.

Key learnings were:

  • There were very few sources which offered a similar service out there.
  • Complaints from musicians regarding their go-to resources such as forums and tutorial videos were often outdated, confusing, time-consuming or unreliable.
  • It was important for potential users to be able to know their issue would be resolved and that they would get the information from a trustworthy expert.

I compiled the data and decided to pursue the following solutions:

  • A communication system which was quick and allowed an expert to pre-confirm that they could solve the customers issue.
  • To ensure that trust was at the heart of the service I decided to implement a rating and review system.
  • To cut time and for user to easier be able to find a solution I created an efficient search facility including categories to help target their searches.
  • With speed being a concern, I ensured a notification system alerted the user through the process of pre-confirmations, messaging and post-call reviews.
LevelEdge Research

User Personas & Journeys

Based on my findings I developed a 3 of user personas and journeys to function as a guide throughout the rest of the process.

Following on from my findings I created user flows which highlighted 3 features of LevelEdge; search, messaging and leaving a review. These, along with a peer reviews and card sorting exercise, led to a sitemap of my proposition.

LevelEdge Personas

Wireframing & Testing

In order to proceed to the testing phase I drew up a series of wireframes which covered, onboarding, updating profile, searching, messaging and reviewing. I conduct two rounds of testing using the wireframes which were initially handdrawn, then created in Balsamiq. Each set of wireframes were constructed into functional prototypes in InVision. Engaging with real people, 6 in each testing phase, was mind-opening and brought attention to a few crucial points and errors which needed attention in progressive iterations. They were:

  • Some users got desired confirmations at certain junctures and therefore added alerts for successful actions, warnings and accessing to cameraroll.
  • Although the search functionality was commended it became clear that the filter facility was lacking and needed to have reversed hierarchy.
  • The hamburger menu was awkwardly position and needed to be repositioned for easier access on mobile devices.
  • Some confusion in regards to what the landing page would allow you to access was clarified through the use of iconography and more effective copy.
  • Frustration during the onboarding process and while updating of profile resulted in me making multiple fields optional.

Finally, after further testing, I used Sketch to create a high fidelity version of LevelEdge which I used to prototype in InVision

Through out the wireframing process I conducted usability tests to fix errors and ensure that each iteration was improved. My focus remained on creating a friendly and trustworthy proposition while fixing smaller bugs and applying visual enhancements.

LevelEdge Wireframe

Design

Based on my discoveries I used Sketch to create a comprehensive, high-fidelity version of LevelEdge. Once again, I built a prototype of LevelEdge in InVision which I used to acquire feedback from peer designers and ultimately help me refine the designs. These tweaks included button sizes, tapping areas and clearer language.

I created a style guide and a design language system which would allow me to efficiently hand over the project to developers.

Using my final designs, I used Principle to create animated examples of LevelEdge to give prospective clients a more accurate idea of the look and feel.

LevelEdge Design

Explore the prototype here.

Main Tools

  • Sketch
  • Principle
  • Optimal Workshop
  • Usabilityhub
  • Overflow
  • Keynote
  • Balsamiq
  • InVision