UX / UI & BRANDING
Lively partners with artists to record and quickly deliver live shows so you can put your phone down and your hands up. High quality audio and video recordings of the shows are immediately released to users, with 70% of profits going directly to artists.
BACKGROUND
Lively was an idea pitched by a friend of mine, a client back then and later business partner. The idea was sparked at a concert which I thought was cool as it had organic roots. The story goes that a certain concert had every fan with their phones up recording. This is pretty typical these days but it can get annoying having obstructed views for an entire concert… widely due to a sea of mobile phones. The idea was to get a group of our smartest friends in the music and technology industries together to build a company to distribute content from concerts to fans via a mobile device. The Lively app was born.
Interesting things: Repeatedly featured in the Apple app store. Won “best music app” in the BMA’s. I designed a digital advertisement for a partnership with Keith Urban that appeared on the biggest billboard in Times Square. We recorded a private showcase for Universal records. And my favorite- Lively recorded Pixies for a partnership with Amazon Music.
SOLVE
PROBLEM
Concert-goers recording entire concert meant: mobile phones up, obstructing views for others. Focusing on their phones and not the end-to-end holistic concert experience as it’s meant to be. Tons of shitty videos on YouTube and everywhere else.
Partner with artists and venues to record high quality audio and video. Assemble a tiger team of audio and video gurus. Design and build a mobile application for concert-goers to directly purchase, download, and view/play the content.
Research
I had many angles in my search for inspiration, competition, differentiation. First I wanted to dig deep into how the music industry works. Mostly from an emotional perspective, the relationship between artists and fans specifically. I wanted to know what aspects of concerts compel fans to attend, to make purchases, to follow a band, etc. And why do they have their phones up so much? From there I went into exploring what this thing could look and feel like. I studied the various popular music apps, dissecting their way of handling certain experiences and interactions. Noted which parts of the UI I liked. I read through brand guidelines of some of my favorite tech companies for some branding guidance.
To the right is a jumble of some of the music specific companies and products I spent time investigating. Ask me about the details of my analysis if you must know.
Designed and built for iOS, Android, and Windows Phone.
Branding
The name Lively gave me a lot to work with already. I started with some rough sketches- usually writing out the company name if applicable. In this case I had “Lively” to work with, giving me plenty of options for search terms to gather inspiration. I immediately thought of a microphone, thinking it’s the thing… the symbol… the something that makes a live event feel humanly live. Keeping kerning and scaling in mind, I wanted to make sure the logo was simple and usable across a diverse set of mediums.
Color
My initial thought for the Lively app was environment. What is the environment like when a user opens the Lively app? With the MVP and long-term product in mind, I put together personas and user flow diagrams (examples in the IA / UX section) which helped to guide me as an end-user. I hypothesized that most users will download the app in a concert venue where it’s dark. A dark theme makes sense in this environment, avoiding a blinding light upon arrival. Hence the dark backgrounds in the Lively app. To contrast, I toyed with many colors and landed on a variation of turquoise, ask me why :)
Sketches
Resulting Style Guide
Early Discovery
Some examples of various user flows and wireframes I used in conversations with developers and other folks involved. These were created to understand the ideal experience and user interface at an early stage which helped move forward an agile development process.
Rough Sketches
Wireframes
Using the sketches above as a baseline I created high fidelity wireframes to inform the UI design in terms of layout and UX. I worked with the development and music relations teams to understand technical constraints as well as personas and their journeys. Below are a few examples. Ask me for more :)
Final UI
Leveraging the brand style guide, wireframes, and a moodboard of elegant and modern UI, I styled the application to work for multiple platforms, catering each one to it’s specific native functionality. Below are some examples pulled from the iOS app.
🧪 Test
After completing the UI design for all of the screens in the user flow, I put together a clickable prototype in InVision which covered the end-to-end user experience for all scenarios and edge cases. I sent invitations to our test participant pool and offered gift cards for those who signed up for the test. I sent out the InVision prototype link to the 9 participants that signed up for unmoderated feedback, and scheduled 1:1 sessions to watch the participant go through a series of tasks afterwards. This setup allowed me to get unbiased feedback upfront without any context about the product, and then dive deeper into the experience with the participant.
🔁 Iterate
After the 9 participants completed their feedback loop, I brought the feedback to my the rest of the product team (product manager, development lead, and our community support specialist). I hosted a card sorting exercise to group pain points together into categories we could tackle immediately, and then planned other milestones for bigger items that got added into our backlog for V2. I iterated and finalized a prototype based off of the feedback I received (and the team agreed to pursue) and repeated the process 2 more times.
🎉 Release
After running 3 usability tests, the later feedback was showing more positivity than pain points, so we decided the UI was ready for development.