Snack - a social audio sharing app designed for music and podcast enthusiasts to discover, share, and build a community around their favorite audio.
2023
App concept
UI design
UX design
Branding
Individual project
(Berghs School of Communication)
App concept
UI design
UX design
Branding
Individual project at Berghs School of Communication
2023
Only use "SHORT" if section heading sits on one row (only when one word, otherwise it might sit on two rows when resizing the viewport). The body text container have a negative top margin of 72px + 56px - the same as the row height of the heading + the space underneath body text and heading.
Heading container can be changed to height of VH, if heading should be sticky on top of the full width image content.
Intro
In this individual project, I utilized my skills in branding, UI, and UX design to explore the creation of a new social app for sharing music and podcasts, driven by my own frustration at the limited opportunities for social engagement over audio content.

Inspired by editorial design principles, I aimed to develop a platform that would enable better possibilities for sharing audio snippets and building a community centered around a love for music and podcasts, ultimately seeking to enhance the user experience while incorporating visually appealing design elements.

Intro
In this individual project, I utilized my skills in branding, UI, and UX design to explore the creation of a new social app for sharing music and podcasts, driven by my own frustration at the limited opportunities for social engagement over audio content.

Inspired by editorial design principles, I aimed to develop a platform that would enable better possibilities for sharing audio snippets and building a community centered around a love for music and podcasts, ultimately seeking to enhance the user experience while incorporating visually appealing design elements.
Intro
Intro

In this individual project, I utilized my skills in branding, UI, and UX design to explore the creation of a new social app for sharing music and podcasts, driven by my own frustration at the limited opportunities for social engagement over audio content.

Inspired by editorial design principles, I aimed to develop a platform that would enable better possibilities for sharing audio snippets and building a community centered around a love for music and podcasts, ultimately seeking to enhance the user experience while incorporating visually appealing design elements.

Research and benchmarking
Research and benchmarking

With an open mind about what the product might offer, I entered the research phase, which included desktop research, conducting 10 interviews, and testing other social audio sharing apps.

I conducted a benchmark analysis, and discovered that the feeling of most music apps is very homogenous, they all feel very “techy” and use dark background with sans serif fonts.

Top. Research findings - podcast and social media trends.
Bottom. Selected quotes from 10 interviews
"It's a shame that I don't have more insight into my friends' musical preferences - I'm always eager to discover new artists and genres."

Eric A, Music enthusiast
Benchmark. I discovered that most music apps have a “techy” look, this did not align well with the brand personality I was looking for for Snack.
Creative brief
Creative brief
Problem

Existing apps don't offer satisfactory snippet sharing. There’s a big gap in the market for a simple that makes it possible to share audio - music and podcasts - with friends.

Opportunity

A simple platform for sharing audio could meet the demand of podcast and music enthusiasts looking for a social discovery experience.

Position

Snack is a social audio sharing app that provides a fresh approach to discovering music and podcasts. It's a space where users can share curated content and create personal "Digests" to share multiple audio tracks.

With a focus on friendship and curation, users can send direct audio snippets to each other without sharing to the feed.

Brand personality

Snack is a welcoming and authentic app that prioritizes building a community of audio enthusiasts. User-generated content is highly valued, and the app encourages discovery and sharing of new audio favorites among its users.

Brand principles

To align with the brand's personality, I have applied the following principles:

  • Authenticity
  • Seriousness
  • Curiosity
  • Simplicity

Brand and UI development
Brand and UI development

My goal was to select a name that isn't currently associated with audio, but rather evokes the idea of small, tasty bites. I believe that the connection to something edible is an intuitive one, which is also why I named the newsletters "Digests".

Snack's primary focus is on curated newsletters, which I associate with a slower, more analog form of communication similar to newspapers. To create Snack's visual identity, I drew inspiration from the visual language of newspapers and incorporated it into my mood board.

The mood board incorporates both analog and digital elements from newspapers, as well as examples of appealing serif fonts.

During the benchmark analysis i made in the research phase, I discovered that many music apps have a "techy" aesthetic. This  didn't align with the brand personality I had in mind for Snack. As a result, I decided to take a different approach in order to position Snack in a unique and distinct way;

Given that serif fonts are unusual in digital products, and my aim was to create a distinctive social media platform, I decided to work with them for Snack's design.

When starting the design process for Snack, I explored different visual paths for both branding and UI/Layout simultaneously.

Mood board with representation of both analog and digital elements from newspapers and examples of serif fonts.
Brand and UI explorations that was done simultaneously. This enabled me to quickly try out different layout solutions and make discoveries regarding brand assets like the logo, fonts and colors at the same time.
I dedicated a significant portion of my time to experimenting with various options for the home feed and digest posts. It was a rewarding trial and error process that allowed me to test multiple designs and assess their effectiveness.
Brand guidelines
Brand guidelines

At this point, I had reached a branding milestone and was able to progress to a more hifi UI design and form the brand toolbox for Snack.

When I reached the final Snack brand, I put together a set of brand guidelines to steer me as I kept working on the app's UI.
UI design
UI design
Home

Snack's main screen shows a feed of digests with up to 5 track covers each, along with a heading, preamble, author, and publishing time.

In the top navigation, chat and profile page can be reached and the current digest draft is easily accessible from the the top of the feed.

Digest - the newsletter

The top navigation within a digest is kept to a minimum, allowing for the content be the primary focus. To enable the user to browse through each digest with ease, every track is displayed with its own caption. It’s easy to play all tracks or track snippets within a digest using the play all functionality, or to select a specific track or snippet and play it directly.

Every digest track has its own unique layout, this is ment to highlight the distinctiveness of each digest, where not only the content is unique, but the layout also brings a slightly new experience every time.

The author is introduced once again on the bottom of the digest, this time with a short blurb similar to how it might be done in a newspaper article.

Drawers

I use drawers to enable easy creation and editing of digests.

The drawers are used when sharing a track from an external streaming platform like Spotify. They are also used to add a new track directly from within a digest draft, then displaying the recently played tracks from the streaming service selected by the user, as well as when editing any text or track within a draft. ■

Home. The user is granted with a feed of “Digests”, newsletters. The slider enables easy preview of up to 5 album or podcast covers.
Home.
Home.
Digest (newsletter).
Digest (newsletter).
Every track has its own unique layout, highlighting the distinctiveness of each digest. This is ment to give a one-of-a-kind experience where both content and layout is uniquely different.
Digest. Every tracks has been given it’s own unique layout, this is ment to highlight the uniqueness of each digest and give a one-of -a-kind experience where both the Digest’s content and layout is uniquely different. The author is introduced with a short blurb at the bottom of the digest, similar to a newspaper article.
Create and edit digest
I use drawers to enable easy creation and editing of digests.

The drawers are used when sharing a track from an external streaming platform like Spotify. They are also used to add a new track directly from within a digest draft, then displaying the recently played tracks from the streaming service selected by the user, as well as when editing any text or track within a draft. ■
Drawers are used when a lot of functionalities are needed during the creation and editing of digests.
Messages, home feed and digest.
Profile page. The digest index in the profile can be displayed as a list or in grid view.
The end, discover more projects here