ICON Worldwide logo
Currently at ICON Worldwide

Frankfurt School of Finance & Management – Mobile iOS & Android 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

ICON Worldwide 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.

ICON Worldwide logo

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

app development case study, Frankfurt School, ICON Worldwide Blog

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

app development case study, Frankfurt School, ICON Worldwide Blog

A simple yes/no question needs no complication.

app development case study, Frankfurt School, ICON Worldwide Blog

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

Final Designs

app development case study, Frankfurt School, ICON Worldwide Blog

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.

app development case study, Frankfurt School, ICON Worldwide Blog

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

app development case study, Frankfurt School, ICON Worldwide Blog

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

app development case study, Frankfurt School, ICON Worldwide Blog

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

app development case study, Frankfurt School, ICON Worldwide Blog

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.

app development case study, Frankfurt School, ICON Worldwide Blog

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

Grade Input and Saving Scenarios

app development case study, Frankfurt School, ICON Worldwide Blog

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

app development case study, Frankfurt School, ICON Worldwide Blog

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

app development case study, Frankfurt School, ICON Worldwide Blog

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.

app development case study, Frankfurt School, ICON Worldwide Blog

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.

app development case study, Frankfurt School, ICON Worldwide Blog

Android Bubble Design

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

Final Release

ICON Worldwide logo

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
ICON Worldwide arrow

Let's start a new project together

Have a project in mind? Want to join our team?

We’d love to hear from you.

ICON Worldwide location

Locations

Independent and International

  • NYC
  • Bahrain
  • Zurich
  • Sofia
  • Madrid