madison
UX designer

Concerto

With Concerto, we can all be artists.

Concerto, I focus on the possibilities that allow and encourage design, music, and people to engage in a new, interactive experience. Concerto transforms concert-goers into an active and integral part of a musician’s performance and production through an interactive app. 

  • Concerto is an app used at concerts

  • Young, tech-savvy concert-goers will find Concerto especially appealing.

  • My goal was to create something that gives each person self-expression in a concert setting.

  • This was a concept and prototype that I created.

Initial Exploration

Concept 1 - Rustic

This concept is a reaction against the convention of futuristic design and aesthetics often used in music apps. I wanted Concerto to feel more inspired by the world around us. Many use music to help see the world in a new light. This concept draws on nature and brings a fresh breath of life to the app and brand. 

  • peaceful

  • rooted

  • fresh

  • life

  • wild

  • bloom

Concerto

Concept 2 - Connect

This concept is inspired by connection. From everyday music listers to artists who perform for thousands, Concerto should bring people together. This idea of customization and personal connection drives the app and brand to connect people as they enjoy a concert of their own creation.

  • interlocking

  • arrows

  • lines

  • deliberate

  • united

Design Phase

Concerto

Sketches

I usually start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly.

Guiding Questions:

  • This process helps me brainstorm and get pen to paper.

  • I wanted to start off with something that looked familiar to the target audience since this would be a new concept to them. I didn't want this app to seem too foreign to the users.

  • I had three different key flow design sketches.

  • The main difference between the three was the layout of the key material. These differences ranged from sections and boxes to swiping pages between the information.

  • I chose the version that combined both functional elements in different sections of the app.

Concerto

Wireframes

At the beginning of my design process, I created wireframes for testing purposes.

Guiding Questions

  • This allows me to put everything on the screen in proportion, correct placement, and sizing for each component.

  • I always start my wireframes in low fidelity and moved to high fidelity as I move through the creation process.

  • I use Sketch for all my wireframes and early prototypes.

  • I use lower fidelity for initial testing but wait until I have a higher fidelity for large-scale testing.

  • I have five iterations of this app all at different fidelity levels. as I make changes and update the individual screen I keep all older versions just in case something worked better from an older version and needs to be added to a current wireframe.

User Testing

Before launching the product, I did a testing round in order to reveal possible usability problems.

Guiding Questions

  • I aimed to find the ease of use and flaws within the design.

  • For my tests, I used people who love going to concerts and use music apps daily.

  • Users helped me discover what navigation needed to be changed.

  • There were a few layout changes, which allowed me to make the buttons larger. 

Concerto

UI Design

Once I tested out all usability mistakes, I started designing the final screens in Sketch.

Guiding Questions:

  • Originally the visual designs had a graphic background rather than a plain color.

  • The matrix image background design reinforced the idea of connection and a common experience.

  • The matrix background became too visually busy and need to switch to a plain background with the imagery being the main focus. 

  • I also discovered in the testing phase that this app would do best in a darker mode vs having a lot of white space. the white space would be too bright in a darker concert venue almost blinding the user.

  • This app is set up for an iPhone 10 Max but can always be scaled down for other models.

What have you learned from this project?

This experience allowed me to create and add something new. By bringing these two different concepts of music and technology together and fun new experience was born.

  • I was really nervous about tackling this project because it is unlike anything else out there.

  • I was able to truly consider myself a designer by producing this new idea in a well-thought-out way.

  • I hope this app will be seen on the market in the future because this interaction will be one no concertgoer will ever forget.

5
Iterations
67
Screens
3
User Tests