Meet the client:
After School Club is a fictitious brand I created as part of a self-lead project to produce an app concept and try my hand at professional UI design.
Music has always been a big part of my life, I often came straight home from school to play and listen to all sorts of music. My very own after school club. 
I wanted to explore the role that music plays in people's lives and what sort of product could help bridge the gaps between lesser known artists and consumers.​​​​​​​
The product:
The idea behind After school club was to produce a social music app that promotes local artists and venues and encourages its users to share their music tastes, what they're listening to and support their favourite artists by going to see them physically in person.
To reward users for making positive interactions in the app, a points system was created that allows users to purchase discounted festival tickets, vinyl and other music-related rewards. 
I did a lot of initial research on existing music platforms which lead to an important discovery that only 10% of Spotify's users find their own music through search. Instead, they used generated radios, suggestions and featured artists.
Knowing I would eventually end up spending a long time at a screen designing the UI, I wanted to begin with more physical forms of design. The role that classical printmaking techniques can have in modern 'clean' UI's is something that interested me so I was keen to play around as
much as I could.

A pattern I created from one of my scanned prints

I took the scanned prints and blew them up to a stencil size to spray paint on various materials. This lead to me having to make cut-outs in the letter counters which ultimately created the final wordmark. The cut-through letters work well as they prove the mark is rooted in a physical process. For me, this reflects the goals of the app: getting people to do more things in person and physically see the music they engage with.

The beginning of my experimentation was very abstract and formless. I was trying to find a way to represent the chatty conversations at after school clubs that lead to bands being formed and grandiose projects that would never come to fruition. I tried to represent mouths as simple as possible but felt it was too abstract and irrelevant to the goals of the project.

Very quick and rough paper prototypes I produced after my visual experimentation.


Working in context
After some quick paper prototyping I started to work with images closer to the projects aims. I collated some band imagrey and descriptions to see how it would look in what I thought a UI element could look like 

concepts for UI 'cards' that would appear in the app feed

Some simple wireframes and a test (far right) of my UI elements at scale. I quickly realised what I had created wasn't suitable for a mobile device.

Working at scale:
After realising that the work I had produced was illegible at a mobile scale the steep learning curve of UI dawned on me, I realised just how different this was from traditional editorial design.
From this point on I worked solely inside of phone mockups to ensure the scale was correct. The app prototype quickly developed into something useable.
I used much higher leading and tracking for my type than I would for print or web content and found that this created a lot more room to breathe on the screen.

Some of my final development mock-ups.

Adding Features:
Now that I had a visual style and an app skeleton I started to add the features I wanted. 
The key elements that I wanted to include were:

1. A searchable map with tagged venues and events. Similar to browsing google maps for businesses expect these would all be indexed manually so that smaller organisations/venues have an equal chance of showing up as a large ticketed venue.
2. A reward system that gives users points for trying new music and rating songs without many interactions. 

An example of how the points system would integrate into the app. A popup would prompt users to rate the song - users can then view the rewards section in the hot bar to view how many points they need for certain rewards.

Whilst this was a fictional product I spoke to real promoters and artists if they would be interested in the concept, they resoundingly agreed that a digital system like this would be a great way to promote local music.

Despite this being a self initiated project I still wanted to create a 'pitch' document that sold the key concepts of the app to investors and developers. Below is a section of the brand showcase as well as an App walkthrough that would appear in app stores.

The final wordmark on a vinyl cover.

I tried to keep some of the abstract type forms I created in the pitch. Including this alteration of the wordmark designed to emulate waveforms emanating from the centre of the text.

I think brand story is essential to selling your product to investors and consumers so I wrote up the origins of this project and dug up an old photo of myself in my parents attic.

The venue screen allowing users to explore nearby gigs and performances.

The app run-through as it would appear in an app store.

I chose to focus on the visual elements of the app for this showcase. As appose to the pitch document that focuses on why the app exists, this walkthrough showcases how it works.

A run-through of how you can use the map feature to find nearby venues.

Two of the main app features: A friends page that shows what they're listening to, what's popular and what events they're going to. And the listen along feature that allows users to sync up their listening habits and react to the song live.

You may also like

Back to Top