Concept
Table of Contents
- 1. Supporting material
- 2. Target Group
- 3. User Needs (=Features List)
- 4. Information Architecture
- 5. Design Concept
The concept was kept as simple as possible due to the focus on technical realization. Therefore, practically no time was spent on selecting a design style (e. g. Material, Flat Design), selecting a color scheme, or optimizing the typography. Instead, the given styles from Bootstrap (e. g. for cards, modals, navigation) were used and improved. The colors were taken directly from the Stuttgart Media University website. The section is structured as follows: First, the improved information architecture is shown. Second, the barebone design mockup, created with Balsamiq, is shown. Lastly, a brief explanation of the visual design, created with Bootstrap, is given.
The hierarchy for the web application is shown in figure 6. The starting point is the login page. Users can sign up or log into the application. From the dashboard page, the users can easily navigate with just one-click to all subpages (study progress, exams, semester fees, certificates & forms, profile, FAQ).
This was made, in contrast to the more complex, multi-leveled navigation of the “Selbstbedienungsfunktionen” portal. It enables a user to navigate easily and fast around the web application.
The goal of this project is the technical part of the realization. Therefore, only a low fidelity design mockup was created for a faster and easier development of the application. Making this mockup aesthetical was out of scope for this project.
The mockup pages, which were created with Balsamiq, are shown in the figures 1 to 6. For each page, a more detailed explanation of the user flow is given in the section, which is called “7. Application”.
