Pretzel Rocks

The safe music player for Twitch & Youtube

Client:
Pretzel

Role:
Research, UI/UX Design, Visual Design, Branding

Project Type:
Music Player App & Brand

Duration:
Multiple weeks

Pretzel

The safe-to-use music player for broadcasters and video content creators. With Pretzel you can quickly find the tracks you need to monetize streams and VODs. Users can play directly from the desktop app or stream instantly from a web browser. All artists on the platform are paid fairly for their work – and all music is DMCA-safe.

The Project

I was tasked to design the desktop and mobile app for the Pretzel music player. Along the way, I also designed and created the branding and first versions of the website. The project was ongoing for many months, and was successfully acquired.

Project Goals

  • Design a desktop music player with broadcasters as the core user type.
  • Design a mobile music player with casual listeners as the user type.
  • Create compelling brand and marketing language that would increase download and usage.

The Process

01
Research

  • Project Goals
  • User Interviews
  • Customer Personas
  • Development Requirements

02
Architecture

  • Sitemap
  • Initial Sketches

03
Interaction Design

  • User Flow
  • Wireframes
  • Design Patterns

04
Interface Design

  • High Fidelity Designs
  • Prototyping
  • User Testing

05
Development Hand-off

  • Asset Export
  • Design Documentation
  • Iteration

Research & Data

Data & Interviews

The team and I all have a lot of experience with livestreaming and the twitch community. We were able to brainstorm and chat with other streamers and content creators to determine the most optimized player. We also met with music artists to best determine what would excite them to want to be part of the music library.

Pain Points

Playing copyright music on-stream was risky.

Other players took up too much real estate and made streaming challenging.

Other methods of playing music was clunky and required constant monitoring.

Desires

Give broadcaster the ability to choose a station or playlist and be good-to-go.

Design the player to be small and out of the way, but easy to find if needed.

For casual listeners; make the player fun and easy to use while taking on the day.

Sitemap

The sitemap helped quickly identify main screens, and secondary screens needed. During the sitemap creation, I was also able to uncover where additional interactions, error handling and secondary screens.

Wire Frames

Since this was meant to be a first rough pass, the goal of the wireframes was mainly to get a start point for screen layout and composition.

Branding

Icon

I had the idea to tie together a musical note, with the infinity symbol to emphasize a player that could keep going for as long as a streamer or listener wanted to play. The end shape also doubled as a pretzel twist – tying the whole brand together.

icon-logo
Color Palette

A fresh, young color palette was chosen that reflected stability and forward-thinking. With purple being the main color, hilights of blue and mint were used as button and interaction indicators. A colorful yet “darker” theme was chosen to fit more with a younger demographic.

colors
Typography

To keep the app as light-weight as possible, we went with two Google type faces for the website and application. Montserrat Bold was used for all titles while Open Sans rounded out body copy and application text.

typography
Iconography

A full library of custom icons (60+) was created for the brand. Ranging from UI buttons and interactions, to station and radio channels.

icons

High Fidelity Designs

After the wireframes and branding were fleshed out, high-fidelity designs could be created. A few select screens for example.

Drag View