Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

ClubGuide

An App for searching and discovering ClubEvents in a certain city.

INTRODUCTION

This course is about the prototyping and design process. Pierre La Baume, our lecturer in this course, gave us a great insight into different prototyping tools and their use cases. „Fake it 'til you made it!“ he said often. Your prototype doesn't have to work in every use case, you only have to understand what the prototype is about and may do. It has to give you a feeling for it.

So we got to know tools like POP, a nice, little App for fast paperprototyping, also available for mobile or InVision, a great web prototyping tool, also for working together.

We had a lot presentations about What to know about designing. We learned to analyze the target group, look for already created similar products, find the unique selling point...

TASK

The given example for trying going through the whole process on our own was any kind of an EventApp.

Because of my affinity to music and the clubscene, I decided to create a PartyFinder.

ONSET

First of all I downloaded every iOS mobile App about clubs, their programs and their event organization.

I listed well and bad done things up and tried to bring these points together in one perfect App.

Often it was hard to say, whats the best option for certain points and sometimes other good points influenced these so that I needed do make compromises.

I did not want to make a classical iOS design. I wanted to break up these constraints and thought about a more useful design in this certain case.

USER

Personas.pngPersonas.png

For this I figured out some needs of the user:

Most people are drinking alcohol or taking some other stuff when they go to party. -> I need an easy usable App with big icons and images.

When do you go to party? At night! -> So for not glaring the user the App should have a dark mood.

People like customizing! -> The User needs a profile and should could sort his favorite clubs, artists or events.

The interface should be in colors the user likes! -> Color is a choppy factor. I need to be careful using color! For taking colors every user will like, I need to take those of each event the user is looking for.

You don't make party alone! -> The user should be able to share his events and look what his friends are interested in.

The user don't know every time the name of the club or event. -> I need to create a search for searching for genres and only certain results in this search, g.e. only clubs in the genre „Goa“.

The User won't make party in other cities on his own that often. -> The search results and all events are only from your geolocated city.

IDEA

The Idea was to create an intelligent Party-Searching-App. The App should know what you like and wich friends do it the same; for connecting and having fun together. Besides the App should find events by searching for genres.

SCRIBBLES

lists-clubs.pnglists-clubs.png
liked-clubs.pngliked-clubs.png
event.pngevent.png
discoverScreenScribble.pngdiscoverScreenScribble.png
menu.pngmenu.png

SKETCH

It's a gorgeous tool and designer-alternative to Adobes Photoshop or Illustrator. With it's clean and reduced interface you are able to create and design from the first moment. And Sketch works great with Framer Studio.

MESS

Sketch is because of it's reduced interface not that flexible. But it's only for this certain use case! If you are cutting some forms, it's not really cutted. The function is called „Mask“ and like it says, it's only a mask. So you are getting a folder structure and for changing color you need to click through this structure. But it's reversible, so pros and conts.

One point in the interaction with framer is very important: Every created thing must be in an folder and these folders, if you want to call them in framer mustn't called the same! In framer you are not calling the whole path, you are just calling the folder (layer)...

sketch.pngsketch.png

FRAMER STUDIO

It's an easy prototyping tool. You may code in CoffeeScript, „a little language that compiles into JavaScript“. CoffeeScript is approximately JavaScript without brackets. While you are coding all the time you got a visual feedback of your prototype.

MESS While prototyping I learned a lot about Framer Studio. Many good things, but also it's mess: Like I said, Framer uses no brackets, instead blank lines or tabs. For a interleaved functions you need to count the tabs. That's horrible! You need to watch out all the time if there are three blank lines or a tab... Another point is, you cannot declare global animations that easily. For each animation you need to define the target layer. If you want the same animation for different layer you need to write a function which changes the target layer. I think that could have been included...

framer.pngframer.png

ClubGuide is connected with Facebook and shows your events and those of your friends. You are able to create lists for your preferred clubs, artists or events. The CalenderView gives you an overview of your PartyWeek.

REFLECTION

This course gave me a little insight into prototyping tools and their use cases. We coded in CoffeeScript but I retranslated it into JavaScript and so I got also more insights into this. I realized that coding is an important factor if you want to customize your design fast and on your own. It's important to know what's possible and necessary. Different Apps are not working 100% perfect together, even not if they made for this... I learned that a prototype doesn't need to be perfect. „Fake it 'til you made it!“

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Pierre La Baume

Zugehöriger Workspace

Software Interfaces: App Prototypen Entwicklung

Entstehungszeitraum

Wintersemester 2015 / 2016