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.
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.
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.
Iconography
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.
- Tags: App, Branding, Design System, Mobile, Product Design, UI, UX, Web
See Next
