HfGuide is an app that guides users through an exhibition.

Project Description

We rethought the process of how people interested in studying at the HfG can be encouraged to actually apply. We also want to guide them through the process of the application. We created a concept that involves three parts: A single-purpose website to inform about the process, a newsletter that is sent before a deadline and explains the next step and an app. For this project we decided to focus on designing the app.

We identified the exhibition that is held at the end of every term as a major selling point. When somebody who is interested can see actual projects, visit the campus and get in touch with students they are likely to apply. As of right now when they leave the exhibition they have nothing to take home with them and are likely to forget what they saw. To change this we created an app that allows users to collect information that is spread across the building take it home with them.

Process at the exhibition

1/4 – One card informs the user about the process of applying.
2/4 – As the user approaches a project a card pops up. It’s not unlocked yet, but to spark a conversation some ideas for questions are shown.
3/4 – When the user leaves the project the card becomes unlocked: detailed information about the project and how it was created is available.
4/4 – The user can read the information on location or reflect on the things he saw when he arrives at home.

Every piece of information is presented as a card, which can be expanded to show more detail. When the app is launched for the first time there is only one card. It explains the process of applying and is steadily updated to inform the user about the next due dates.

Each card is assigned to a specific place in the building. It only becomes visible in the app when the user approaches this place. That way when the user scrolls through the cards he can revisit his personal path through the exhibition. There are different kinds of cards: Some belong to projects, some the special places (like the library or the media lab) and some answer common questions.

We wanted to give the information that is actual relevant to somebody interested in studying at the HfG: What am I going to be doing during my studies? What equipment is available? What can I do afterwards? What are important skills for an interaction designer? At the exhibition people can usually only see the final product. With our app the user can learn about the process of the project, which stages it went through, which challenges it faced. These are the things that matter to someone who is actually studying, since this is what we work on most of the time.

Design of the app

The first card displays an overview of the application process.

When you approach a certain spot the corresponding card appears in the app.

As you walk away the card becomes unlocked – you can take a look at its details now.

When you approach a project words that might inspire you to ask a question are shown.

The detail view explains the project and its process. Small interactive elements encourage the user to explore details of the project. You can leave notes to add your own thoughts.

Move your mouse over the hotspots to see the different parts of the app in action!

We tried to keep the structure for the app as simple as possible: There is no time to learn about the app, users need to be able to use it instantly when they arrive.

Overview

The pieces of information are represented as cards, arranged horizontally. This list can be paged through. Every card has an image as well as a small teaser text. If the card is not unlocked yet it is blurred.

A scrollable menu that contains smaller versions of the cards can be pulled down from the top for a quick overview. This menu also displays which cards have already been read and which are yet to be found.

Detail

The detail view of a card can be paged vertically. There are different kinds of detail pages: text paragraphs, interviews, image galleries or small interactive elements. The last page always looks the same: There is a conclusion and the notes left by the user.

Process & Technology

My focus in this project was on concept development and prototyping.

It was extremely important to us to be able to actually test the location based idea of the app. I therefore got into iOS Development with Swift and coded an actual native prototype of the app. We used iBeacons from Estimote an learned a lot about how precise they are (less than you think) and how easy it is to work with them (very).

Coding an actual iOS app is quite challenge, but nothing beats the speed and precision of a native prototype. Especially being able to access all native APIs is great. Writing a native prototype is not something that I would do for any project, but it’s definitely great if you want to use new technologies and be sure you are using them right.

Meta

This is a student project created during summer semester 2015 as part of a course in Interactive Communication Systems by Prof. Jens Döring and Julia Stäbler.

Team partners

Nikolas Klein
Florian Ludwig

Links

Prototype on GitHub