Product design for a new administration system for the successful educational platform
Clio is a Danish virtual educational platform that aims to make kids smarter through high-end, virtual education material.
Case example: a school creates an account in Clio which gives their students and teachers the opportunity to study Clio's content in different courses like math, English, physics, etc (Clio Subscriptions).
A new Administration system needed to create in order to white-label it, along with the platform, for partners around the world.
Today the client has a School Management Admin, for schools and a Business Management Admin for Clio.
The existing solution does not meet the desirable usability or scalability standards and it's too complex since the customer wants to white-label their product, in order to distribute it to partners around the world.
The task is to design from scratch the Accounts, Subscriptions, and User/School management which need to meet the usability and scalability criteria mentioned above.
The goal of this step was to gather all the information, process it, and create a consensus on what is it we are going to build. This will be achieved through stakeholder interviews and brainstorming workshops between Clio and us.
A series of 2 affinity workshops with 7 participants from different departments of Clio took place online. The workshops lasted 7 hours in total and provided us the information to understand the project, creating consensus at the same time, of what we are going to build.
The participants had to place their knowledge in post-it notes while we were trying to locate the patterns for each category we were investigating.
1. Set the mission objective, a sentence that we could all use as a compass through the product design and development.
2. Find all the possible types of users for this platform
3. Find all their goals, context and pain-points
4. Define scalability for the business and the users.
All the findings from the workshops were analyzed and we came up with three main challenges:
a. How to make the platform available for multiple types of institutes
The business wanted to expand beyond public and private schools to municipalities, libraries, prisons, etc
b. How to align with the needs of 4 different user groups
Partners, Organisation Admin, Institution Admin, Teacher
c. How to make it usable for users from multiple countries
Different languages, roles, class structures, mental models
The scope looked too broad but we needed to narrow it down to a point where the product could be actually buildable.
Since we didn't have any research for the new markets and the product needed to be built we decided to propose an MVP with the base elements and provide flexible tools to assist future scalability in different markets and businesses using Agile development.
We tried to narrow it down to the core of everything and build an MVP that would be built with scalability as the main goal.
To do so we had to:
1. Create a core that could contain the basic elements for all types of users
2. Provide tools to give the different users the flexibility to adjust the system to their needs
Time is the common element for every institution since it defines the duration of the classes and their students. We created a "time bubble" as a basic, common element and we built the account and users hierarchy from there:
- Branch account (e.g School)
- Head Account (e.g Municipalities)
- Partner Account (e.g White-label partner)
We also created sitemaps and basic flows for the users in order to start prototyping
Prototype and Usability Tests
The basic user flows transformed into an interactive medium-fidelity, Figma prototype which was tested with an objective to verify the navigation and the terminology from the Partner and Teacher point of view.
The testing showed us some weak spots in navigation and terminology and after some rounds of iterations, the prototype was approved for the next stage.
4. Hand-off deliverables
Medium-fidelity wireframes (no interactions) with functions behavior and interactivity defined per page
Clio already had style guidelines and the UI templates were based on using them. We created and delivered the components library for React, provided key UI templates and all the necessary instructions for the developers to build the front-end
Created a hand-off package as a point of reference for all stakeholders with full documentation and links to:
- Project Specification (Notion)
- Sitemaps and flow diagrams (Miro)
- Links to prototype, wireframes, and components (Figma)
- Project presentation deck (Figma)
- Workshop and Usability test documentation (Notion)
Development and future plans
The development was agreed to be a cooperation from our front-end and the client's back-end team.
We proposed the client to:
- Develop agile with a goal to test at the end of each iteration
- To reach one market at a time and research intensively to understand the mental model and local conventions before making the product available for this market.
The product is currently under development.