SCHOWCASE
About
“Meine Schule Digital” is a browser-based application for managing products and their clients in context of schools and school authorities. A cloud based and responsive web solution with an intuitive user interface was needed that aims to provide and secure central access to all services in order to facilitate easy administration.
Role
Media designer and self-made UX/UI designer
Project duration
2016-2022
Tools
Pen & Paper, Axure, Bootstrap, Adobe XD, BrowserStack, Github
Company
TIME for kids Informationstechnologien GmbH
-
As I am not very familiar with networks in schools, I first had to familiarise myself with the industry. So, in order to better understand the advantages of functional interfaces, I had to get to know the stakeholder users better, e.g. what tasks and goals even motivation they pursue.
Know your users, identify a focus group and understand their needs.
Target groups:
Students/ Parents
Teachers and Guests
Directors/ School Management
IT Administrators (focus group)
School Authorities
Fig. 1. User Persona Matrix
Fig. 2. Empathy Map
-
The company is already well known in the industry and has been in business for many years. Besides hardware and software products, it served numerous digital/non-digital sales and marketing channels that have grown steadily over the years. At that time, it was difficult for users to find relevant information about their concerns.
The Goal
Minimise support requests
Simpler administrative interface to facilitate collaboration and remote maintenance
Development of new customer groups at communal and state level
-
Operational and control elements are coherent and uniform for each device. For the operational business of a school network, I chose a dashboard that can represent all applications in the form of tiles and acts as a springboard to the respective application.
Ensure navigation and key information is accessible throughout the entire system.
-
On the sidelines of a presentation, I learned that students and teachers only see our software as a problem, as they mainly associate us with blocking websites. It was a nice opportunity to put our image in a positive light. Here you can see the still harmless version of some funny block pages that were necessary for technical reasons.
Remain flexible when finding a solution and incorporate every insight into the process.
-
Difficulties in using the software were identified through user feedback. To make the first steps easier, I chose a user onboarding for the basic functions, which allowed us to integrate them into the system at any point without much design effort.
Identify the goals of the respective user/role and take them on board.
-
To ensure a consistent corporate design across all products, key design elements and the style guide were updated. Business documents were created to communicate product features effectively to different target groups by simplifying complex information for non-technical decision-makers.
A visual language can be followed across different touch points.
Fig. 3. Service and Marketing Handouts
The result is a design that was unconventional for the industry and left a lasting impression.
The design concept of “Meine Schule Digital” proved to be effective, leading to its expansion across other products within the company's ecosystem and continuous improvements. By actively incorporating customer feedback and ideas throughout the entire development, a high level of acceptance was achieved.
-
During my time at the company, the agile Scrum organization was introduced based on the DevOps process circle. I helped set up the “design department” and defined new processes and included standardized test procedures, structured collaboration between design and development and a design system for better documentation and also visualization of research results.
Plan and develop in iterations, using rapid prototypes, validated tests and learn from the outcomes.
Fig. 4. Methods divided into 5 project phases
Strategy
The goal of the relaunch was to create a uniform visual appearance that communicates the brand and its products in a clear and friendly way. With the help of a clean design language that focuses on well-structured information, more trust should be created into the service and thus also in the technologies.
6 Month
The product was rolled out in its basic function within the planned time frame of 6 months and started with a large pilot project. Team: 1 designer, 1 front-end and 3 back-end developers, also 1 data engineer.
Challenges
The solution helped to acquire new customers (institutions) throughout Germany. Even so, long-term success was impacted by the company's technical dependencies, lack of standards, and limited resources on the client side in the SMEs, which made seamless integration difficult.
-
Strategic planning: a SWOT analysis conducted early helps identify risks and opportunities, enabling proactive measures even before the project starts.
Targeted communication: product features add value only when target audience is effectively informed, engaged, and guided through their benefits.
Seamless collaboration: UX/UI design (research) and development must be interlinked, fostering an iterative process that drives innovation and user-friendly solutions.
-
Testing/ monitoring: continuous testing and validation across all user groups ensures an optimized experience based on real data.
Process efficiency: evaluating users workflows and touchpoints early reduces detours, so streamline operations and enhances overall functionality.
Design refinement: the rapid prototype was designed for further iteration(s), evolving into a fluid design with helpful interactions and subtle animations to improve engagement.
Focused role allocation: specializing a clear design role is better than operating multiple areas (service marketing, UX/UI, webdesign/admin) and enables a focused way of working.