The safe music player for Twitch & Youtube
Research, UI/UX Design, Visual Design, Branding
Music Player App & Brand
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.
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.
- 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.
- Project Goals
- User Interviews
- Customer Personas
- Development Requirements
- Initial Sketches
- User Flow
- Design Patterns
- High Fidelity Designs
- User Testing
- Asset Export
- Design Documentation
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.
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.
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.
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.
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.
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.
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.
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.
A full library of custom icons (60+) was created for the brand. Ranging from UI buttons and interactions, to station and radio channels.
High Fidelity Designs
After the wireframes and branding were fleshed out, high-fidelity designs could be created. A few select screens for example.