Open Stage Concerts

A new way for artists to generate revenue — A UI case study

Francesco Mazzini
The Startup
6 min readSep 17, 2019

--

THE OPPORTUNITY

With an increasingly cashless society, the extra revenue that performers, artists, and musicians typically make in gratuities is decreasing.

There are many opportunities throughout a live performance though where fans have the desire to support an artist but are unable to because there isn’t an easy way and/or they don’t have cash.

Our client had an idea that would allow fans to tip artists with very little friction and, most importantly, without cash.
As a result, our project would be to design an app that put Sathish’s solution into the hands of the fans.

PROJECT DURATION

Three weeks Sprint

TOOLS

Pen and paper, Adobe Photoshop, Adobe Illustrator, Adobe XD

PROJECT GOALS

  • After our initial meeting with Sathish, we mapped out the main goals for the project. The first overarching goal was to make the tipping process as seamless and straightforward as possible. This process would need to be accessible not only for the fan but for the artist as well.
  • Next, we’d need to help artists become more entrepreneurial. When the artist did receive tips through the app, they would need a simple way to analyze which events/venues they were most successful. With this information, they would be able to plan their performances accordingly.
Project goals

Research

While the UX team was surveying both artists and fans, analyzing the results of our surveys and summarizing them all, we started our research looking at the strategies and designs that similar app used to connect artists and to generate revenue. And from those websites, we were able to determine that they were all relatively easy to navigate and the design was simple so that emphasis could be put on the artists.

Inspirations

Website —

We looked at our current client website, and we noticed that was images heavy and very minimalist. The purpose of the existing website is to give information to artists about what Open Stage does and ultimately get emails subscriptions.

Current Open Stage website

DESIGN INCEPTION

WHY — The first question is to ask yourself, “Why” am I creating this design. The answer to this question is at the core of your work and should guide you throughout your decision-making process.

MOOD: Just like the sensations the event aims to produce, the mood of the design should be Vibrant. As we are trying to generate interest from our target audience, it also needs to be Curious & Trendy.

Color: The color reflects what event-goers would see. It’s dark as the night and illuminated by only the glowing and contrasting lights.

SHAPE: Uniform shapes reflect sound waves and geometry manifests elevation of human consciousness.

SPACE: Pulling inspiration from music, space is clean and organized.

MOVEMENT: The movement of the website is fluid and direct — this is how we envision sound waves to float through the air. The smooth flow softens the sharpness of the geometry.

MOOD BOARDS

Mood Boards

We followed different kinds of art directions; we wanted to reflect on the visuals you may see at the festival. Duotone Vibes represented an upbeat electric feel and Bossa Nova was a more after-hours nightclub vibe.

DESIGN

First design

As soon our talented UX team handed over to us the mid-fidelity wireframes we began to work and using the chosen mood board, we started to
HI-fi the screens, but we soon realized that the app did not look as we expected; it did not evoke the feeling of trendiness.

We looked at Spotify that gave us a fresh inspiration.

It is dark, and the lights of the art are reflected on people and surfaces.
The darkness is simply a parallel of the time of day, and the bright contrasting color is the visual art.

STYLE GUIDE

Style guide

The next step was to translate the mood board into a style guide. We mocked up some UI elements to give us an idea of how this art direction might look

  • We opted for a dark blue as we felt this was more refined and softer on the eye than a lighter version. It would also be more stylish to the target audience.
  • The slightly sharp edges of the buttons reflect the unfiltered sounds of the music and venue.
  • The simplicity of the content and CTAs offset the intense imagery. It’s essential to keep a clean and minimal look.
  • The darkness is simply a parallel of the time of day, and the bright contrasting color is the visual art

Typography

  • Helvetica Neue was chosen for the headers as it has sharp corners and right angles, which make it a strong typeface which can convey a message clearly.

LOGO EXPLORATION

Logos designs

With the logo for Open Stage, we initially jumped into taking to pen and paper to quickly iterate through different concepts, we then moved our sketches to Illustrator. We spent hours testing out every idea we could think of; however, none felt right.

The current logo and our logo

We did not want to disrupt our current client logo, but at the same time we wanted to give it a fresher look, the current logo was difficult to read, that is why we decided to merge them.

Final logo

Our final result was the above one, on the left-hand side, we have the sounds waves that represent the music, and the under-score is the stage where the artist is playing.

FINAL PRODUCT

Product mockup

FUTURE CONSIDERATIONS

Once the app gets developed, we thought at some implementations that could make the app even more robust,
1. Chat function between artists and between artists and fans
2. Ability to build a band
3. Offer more incentive to fans so that they download the app. For example, adding the ability for the fans to chat with the artist through the app after the fan has given the artist a tip.

CONCLUSION

Working on this project has been a great experience, it was the first time I worked with dark mode design, and in 3 weeks design sprint, we were able to deliver a great product to our client.

THANK YOU FOR READING

--

--