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.
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.
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 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.
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.
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.
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.
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.
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.
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.
Inspiration for the design of the class selector ‘bubbles’ on the app came from design features in Apple’s latest release of iOS.
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.
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 keeps the ‘bubbles’ from the iOS design, but organizes them, instead, in a simple Android-inspired grid.
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.deIndependent and International