Prototyping with Framer

The Course was primarily aimed to give an insight into design prototyping. The tool of choice was Framer.js, a code based editor that allows a variety of interaction explorations. The final prototype can be found here: http://share.framerjs.com/wo50oc69xfuh/

Concept

The idea was to create an App that allows the discovery of clubs or events based on individual preferences, primarily on the music taste. Further more the App should motivate to go out through its visual language.

To evaluate the most important features, I created personas of the target audience.

Design

Styleguide

For the visual style of the App, I chose vibrant colours in contrast to a dark background. It should feel like the insight of a night club or the streets of a nocturnal city. Neon Lights were the main inspiration and appear as a skeuomorphism in form of the icons and fonts. The dark background was used since the app will primarily be used in the evening or night. Combining usability and the chosen visual language was sometimes hard to achieve but played out very well in the end.

Card Design

A lot of effort went into the creation of the individual Club-Cards. Each card should display the most important information on each event. These informations are: - the name of the Club - distance - start time of the Event - pulse (individual club score, calculated by user preferences) - approximate location representation

In the final version I removed the Pulse Bar since it added a lot of clutter and didn't fit the aimed information hierarchy. Tabbing the „Time“ button instantly brings up a calendar event and the „Destination“ button brings up the In-App Navigation.

Club Preview

Pressing on an Event gives a better representation of the event: As soon as the Card is pressed, the app fetches music posted or published by the attending DJs (Soundcloud API), ultimately giving a preview of the music that will be played this night. Besides the audio impression, the Blur is removed, giving a preview of the location.