In this project we rethought the process of how people interested in studying at our university can be encouraged to actually apply. HfGuide is part of a concept, which consists of three parts: There is a single-purpose website, that focuses on basic information and the timed events of the application process, a newsletter that delivers further information to already interested applicants and a mobile application.
HfGuide is an app that accompanies the semiannually exhibition at our university. It tries to enhance the experience for visitors and create an added value for applicants. The exhibition is in most cases a key point for the decision to study at the HfG. Through showing the design process of selected projects, we give the users a deeper insight into how the studies look like. Furthermore the app delivers contextually relevant information of the structure and the equipment, as well as insights into the professional life. In combination with iBeacons users collect information that are spread across the building within the app and take it home with them.
As the first use of the application is the exhibition itself, there is no time to learn the application’s interface. Users need to be able to use it instantly when they arrive. The application is based on a card layout with the x-axsis representing the time based order of the collected information and the y-axis allowing the user to get more details.
The pieces of information are shown on cards, which get activated by strolling through the exhibition. In this way the user creates a personalized order of the information. In a menu, which can be pulled down from the top of the screen, the remaining unlocked cards are shown.
There are four different kinds of cards: process, projects, structure and interviews. The process card is the first one, which is available on app load. It gives an overview of the application process and passively also introduces the user to the card principle. Walking towards a project will let a project card appear. But since we want people to engage in one on one talks, it will not show all information at the beginning, but topic suggestions, which the user can discuss with the exhibitor.
When walking away the information will be shown. Cards can be unfolded to show in-depth information. The content is processed with little interactive elements the user can engage with it.
Regarding the visual design of the application we chose a card-based design after several iterations. With the help of large images and clean typography a content-driven experience should be created. Each type of content is color-coded to guarantee a visual orientation for the users within the interface.
As users should interact with the content to understand and remember information better, we designed different interaction patterns.
With the help of these patterns we created our own content blocks to adjust and tell every story in the best possible manner.
To test, evaluate and iterate our interaction concept, we developed native prototypes in Apple's programming language Swift. This allowed us to use the estimote iBeacons, which are quite easy to set up, but then need a lot of changes to make them work fluently.
From a technical point of view coding an actual iOS app was quite a challenge, but it was a necessary step to test the application in real world scenarios. Creating the different interaction patterns took several iterations, as they had to be suitable to the different content and articles of each card. Therefore our process was driven by fast iterations and low fidelity prototypes in order to test and validate the concepts.
In this project I was responsible for setting up the visual language, creating a visual consistency and executing the pixel perfect design. I was mainly involved in the prototyping process of the detail views and the definitions of the different interaction patterns.
Student project at HfG Schwäbisch Gmünd during the course “Interactive Communication Systems II” by Prof. Jens Döring and Julia Stäbler within the fourth semester 2015. Together with @Nikolas Klein and @Christoph Labacher.