Scholaris is an all-in-one management platform and learning management system for educational institutions. It’s also a way to connect students, parents, teachers, and school administrators through an intuitive dashboard, tailored to each user’s needs.

The Customer approached us with a vision for a complex, multi-purpose platform at a very early stage of product development. We’ve had the opportunity to lead the entire design process: from extensive discovery and persona mapping, through low fidelity wireframing and validation to final, polished interface designs and a complementary component library.

The design process started with a series of product discovery workshops with the customer during which we’ve identified core features and navigation structure for every persona on the platform (student, teacher, parent, and school administrator). The result of the meetings was a spreadsheet containing all features with descriptions and a hierarchy assigned based on relevance to each persona. We’ve also created a permission matrix, outlining the availability of certain features to different types of users.

After establishing the structure of the application in a non-visual form, came time for low-fidelity wireframing. We have relied on low-fidelity mockups to propose our initial solutions and iterate on them based on the Client’s feedback.

Scholaris is a multi-purpose management platform for users in different age groups. Students will use the same interface as their parents and school administrator, making the target age group between 15 and 50+. We have addressed this challenge by employing the best interface design principles like encapsulation which means that every section in the interface has clearly defined borders. That helps communicate to the user what data is or isn’t logically connected. It’s particularly useful in dashboard views combining data from different parts of the app. The encapsulation effect was multiplied by adding depth to data sections that combined with grey background create an impression of ‘floating’ on top of a darker background.

In a large product containing hundreds of screens and featuring multiple variations of components like forms, header or navigation creating an maintaining a design system is crucial. It allows the development team to reuse code, which means faster and cheaper implementation. It also ensures consistency which in turn builds users confidence in your brand and enhances their experience overall.

At Semiflat we design every product with a complimentary ‘starter’ design system as standard. Componentizing all reusable elements makes our job easier, allowing us to design with higher speed and flexibility. Thanks to a design system replacing a state or action color across hundreds of pages can be done with just a few clicks. It also gives companies we work with the power to scale by adding new building blocks of their application without relying on a designer each time.