Posted by admin

November 6, 2017

ZielABI – App Development Case Study

App Development Case Study

Creative Brief

The First Abitur Calculator App for iOS & Android

We were tasked with creating an app that helped calculate students’ Abitur scores so that they could easily see what grades they needed to get into the University of their choice, no matter where in Germany they live.

Design and Logo

Logo Design

Working to visualize the business in a motivational manner, the “A” from Abitur is excuted in a compass style icon. A list within implies data collection.

Final Logo

The final ZielABI logo uses just two colors to make an impact. This inverted design helps it to stand out among the other apps on a users’s screen.

ZielABI Identity Design

ZielABI is designed to empower students to achieve their goals by simplifying the stressful and complicated Abitur calculation.

The typography and colors are deliberately warm and friendly.

The logo is motivational in spirit.

The tagline: Deine Zunkunft im Ziel “Your future on target” is presumptive.

Final Designs

The design for this screen retains much of the initial design concept, with some extra refinement.

A simple yes/no question needs no complication.

Much of this screen is carried over from the initial design, with a simplified interface for categorizing classes.

Final Designs

Preserving much of the initial design, this A pop-up shows the student when they Students can compare various scenarios, page adds greater legibility to semester have reached their goal. with different goals and class grades. grades and brings the progress bar to the bottom of the screen.

A pop-up shows the student when they Students can compare various scenarios, page adds greater legibility to semester have reached their goal.

Students can compare various scenarios, page adds greater legibility to semester have reached their goal. with different goals and class grades.

Target Abitur Score & Course Selection

ZielABI revolves around students setting their initial Abitur goal. The visual target, and slide selector, make this step easy to complete.

The goal with the initial wireframing was to keep things simple. The complicated formulas fade away and the sudent only sees a few simple questions.

Students can tap multiple times to select options to differentiate between types of courses.

Grade Input and Saving Scenarios

Abitur calcuation requires a large amount of data input by students which is managed via a combination of easy tap, slide, and scroll motions.

As students enter their grades, the Abitur score is updated below. When they reach their target a pop-up congratulations message appears.

Saving scenarios allows students to return to the app and adjust their score as grades become actual.

iOS Development

Swift

Using the latest version of Apple’s design language, we were able to implement powerful formulas behind a simple interface and create an app that could easily be translated in multiple languages.

Custom Libraries

We used highly customisable open source libraries to speed up the development process while ensuring that elements of the app stayed true to our design.

By testing on beta versions of the next major iOS release we ensured the app worked as expected with the release of iOS 11.

iOS Bubble Design

Inspiration for the design of the class selector ‘bubbles’ on the app came from design features in Apple’s latest release of iOS.

Android Development

Java

By coding natively in Java we were able to develop an efficient code base for the Android app.

Through the implementation of standard code libraries we are able to insure compadibility across a whole range of mobile devices.

Custom Libraries

In using the most modern and powerful tools and frameworks we achieved effectiveness in the development process. The custom layouts and animations make the application more attractive and user friendly.

We also included different analytics and crashlytics libraries to track and investigate the app’s behavior and results.

Android Bubble Design

Android keeps the ‘bubbles’ from the iOS design, but organizes them, instead, in a simple Android-inspired grid.

Final Release

Website

The design of the website draws elements from the app and includes animated mockups of the ZielABI app.

Included in the site is more information about the app and how it works with a different set of calculations for each German state.

We created it with simple HTML, CSS, and JavaScript.

ziel-abi.de