How do you bring the thrill of making music to non-musicians? Echo lowers the barrier to entry and allows a new community of artists to flourish.

Echo iPhone Mockup

Task

Design a collaborative music creation app for iOS and an identity system to support it.


Tools

Sketch, Illustrator, and Photoshop.


Comparative Analysis


Echo - Comperative Analysis

Most music production apps are geared towards people who are already musicians or hobbyist. They include advanced functionality like mixing songs or automation which can be daunting for beginners. Collaboration apps are no less inviting because they retain these advanced features but add the ability to collaborate. Music communities reach a separate market; They are used by indie artists and listeners who seek content they can't find anywhere else.


Discovery

Key Terms

Brainstorming key terms and phrases helped to clarify my vision. The goal was to solidify the experiences and interactions that would underpin Echo. I started with 85 terms which I worked to consolidate.

Echo Unsorted Keywords

From these I chose 7 to serve as first principles. Some relate to the look and function of the interface while others describe UX goals.

Echo Unsorted Keywords

Mood Board


Echo Mood Board

To visually reinforce these principles I created a mood board. I later referenced these elements in branding and interface assets.

Brand System

The basis of the Echo brand is to liberate the user’s creativity while enabling them to connect with a wider community. I sought to channel this message through shapes that evoked movement, transformation, and expressiveness.


Echo Initial Sketches

Initial sketches


Echo Initial Consulting

Gathering feedback from Airlift design


Echo Logo Options

A few alternatives under consideration


Echo Final Logo

Final Echo logo


The final form resembles merging wave pulses. It also recalls typography used on the Roland 808, perhaps the most revered drum machine of all time for it’s simplicity and iconic sounds.


Echo Design System - Color Palete and Font

Color palette and font family


It was important that the visual system represent the spontaneous experience of using the app as well as it’s simplicity. This was achieved through careful selection of an expressive color palette and modern unadorned typography.

User Flow

A user can take two paths within the app by creating original songs or browsing tracks from the community. The flow is optimized to maintain the user's momentum whether they make music, share it with the community, preview other’s music, or create a remix.

Echo User Flow

Wireframes

After creating a user flow I moved onto wireframes. The challenge was making music creation simple and intuitive for user's with no prior experience. As I have been making music for several years, questioning my own assumptions through testing was crucial.


Wireframing Sketches

In the next version of the prototype I focused on the structure of the app. In pursuit of swift navigation I designed an instrument rack organized in accordion style panels.


Sketch Wireframes

Bringing paper wireframes into Sketch



The explore and create views evolved through several iterations. Each version was a practice in simplification. I removed many custom views and found solutions in implementing modal elements which animated upon user interactions.

UI Design

Final screens with visual design applied.


Prototype


Indpendent Project: Airlift
Role: UX, UI, Visual Designer
Tools: Sketch, Photoshop CC, Illustrator CC
Typeface: Brown TT

LinkedIn Profile Twitter Feed Instagram Feed SoundCloud

Adopted from Jeffrey Peltzman