EDOOKIT PARENT PORTAL REDESIGN

Case study chronicling the creation of a design system for Edookit's Parent Portal. Sharing insights into the process, product design, the tools used and the team collaboration.

Involvement
Product Design Lead

Date
2017

Client
Edookit

Credits
Lukas Moravec - Product manager
Martin Hanzl - Portal Lead Developer
Bara Ruzickova - Illustrator

Edookit’s Parent Portal is visited by thousands of users on a daily basis. Over the past two years, numerous features have been added, which has resulted in a steep increase in the usability and user experience. One of the design goals for 2017 has been to reinvent the visuals of the product and eventually to produce clear design principles to build on when building other products.

Old portal

This is the only screen of the old parent portal I managed to obtain. Hopefully it gives you an idea how badly this product needed a redesign.

The Approach

The Portal is a well established product itself. People have already been using it for months on end. The goal of this project was not about creating a product from scratch. The task was, on the other hand, to redesign an existing product, while establishing a comprehensive design system. It was Edookit’s intention to enhance the experience of parents and students that have been getting their daily dose of important information from the Portal. The byproduct turned out to be the smoothing of communication flows between designers, developers and product managers inside the company.

The design system should be later applicable to the other products of the company including mobile apps, Teacher’s System etc.

Showcase 2 screens

En example of 2 redesigned screens from the portal.

The Toolset

The tool chosen for designing the system was Sketch. Thanks to it's powerful symbol functions, reusable nested components could be created, which accelerated the design process. It is also powerful in managing complex projects with dozens of artboards and pages.

To discuss feedback, manage the project and keep everyone on the same page, Invision was used. Craft plugin allowed for easy sync with the team about updates and also for occasional Slack notifications.

For the developer handover, Zeplin was brought onboard. It allowed for easy sharing of specifications and vector assets with the developers and also for clear management of mockups with tags and sections.

Jira was used for tasks pertaining the larger team and for development-based tasks.

Tools example

Zeplin and Invision used during the process.

The Team & Workflow

Since this was a first major redesign we executed at Edookit, we needed to assign people to the project and create some kind of workflow first. We formed a small team of 3 people that consisted of a project manager, a developer and a designer. During our first meetings we established a workflow which could be summed up in these steps:


1. The team decides how to approach the redesign. Roadmap is created and it is established which parts of the system are going to be designed and developed and the timeline for these tasks

2. Technical specification and various constraints for the specific parts of the product are provided by the development team

3. Design process - brainstormings, sketches, wireflows

4. High-fidelity mockup uploaded to Invision

5. Invision feedback, stress tests and discussion with the whole team

6. Design iteration

7. Approved designs hand off through Zeplin with the appropriate assets

8. The developer develops the designs with CSS/Less styling

9. Development iteration according to feedback from the team

10. Sending the results to testing

Initial exploration & sketching

I conducted a visual audit that identified patterns. The aim was to decide which to keep, replace, merge or dispose of - bettering the UX and building a brand new look for the Portal. Working along this workflow, I sketched out layouts and components, evaluated them with the team and designed high-fidelity mockups for the handover.

Sketches

A few pages from the sketches.

Forming a System, Not Creating Pages

While designing the first screens, I started creating a library of components, form elements, buttons, type styles and colours. This library served as a central hub for everything further created during the project and will continue to be utilized in the future.

One of the main goals of this redesign was to create a consistent experience. This library was a major step towards achieving this goal. Not only for the Portal, but eventually for all the other products of Edookit. Thanks to the Craft library plugin, sharing this set of components with other designers was made possible.

System example

An example of a few sections from the design system.

Variations

With dozens of components in the library, a proper categorisation system was needed. And new component variations were being created as new interfaces were commissioned. The Parent Portal has various states the design needs to account for and there are symbols for each of these states. For example, a text input has a normal, hover, focus, filled out, error and disabled state. This eventually results in having hundreds of components in the library. To fasten the design production, a complex system through Sketch nested symbols was implemented. This allowed for quick creation of the exact variation of a symbol for the particular state. The iteration process was also accelerated, as different layouts were created more easily the system was in result more editable and more scalable.

Text Inputs

There are 5 different states for a basic text input element.

Nested symbols

This GIF shows how fast and easy it is to recreate different states of an element with a properly set up system.

Responsive Design

It has always been a priority at Edookit to design products responsively. This project was not an exception. While it’s rather simple to create a responsive component, it’s not so simple to create responsive mockup designs. It’s important to design web UIs that work at different browser widths. Using a combination of settings, groups and symbols, basic responsive design was simulated inside Sketch. Even though this doesn't help with breakpoints, it was now possible to quickly see how the design worked at different browser widths. All the components are designed to be responsive - both in Sketch and in the actual implementation.

The Name Is a Part of the Experience

We even went so far as to redesign the name of the product itself. Parent Portal in actuality doesn't sound very inviting nor personal. We really wanted to drop the word "Portal", to make the product sound less technical. After a few brainstorming sessions with the company management, we finally found the perfect tagline: "For parents and students". On the login page right above the heading, there is a small Edookit logo, so reading it gives us: "Edookit for parents and students”. There was a company-wide consensus on this solution, as it really shows what the company stands for. Together with the Portal, we also changed the name of the previously named "Teacher System" to: "For teachers".

Edookit Login

The Parent Portal new login screen.

Scrolling and Filtering

A behaviour constantly repeated by our users is analysing information by scrolling through a ton of different objects. In sections like Inbox, Written Exams, Assessment, and Payments. Optionally, parents switch between their children’s profiles to filter through all the data. In the redesigned version, we made sure they can’t unintentionally lose the sight of who’s data it is they are going through. Furthermore, switching between the views for each of their children at any given point has become easier. Every child in the portal has an assigned colour which can be customised by the parent. Parents with more children can now easily distinguish which object belongs to each of their child.

Header + me

The new global switch makes it easy to filter data in each section of the portal.

scrolling

While scrolling it sticks to the top right corner. The user can access it at any time.

Playful Illustrations

Thanks to Bara Ruzickova, a talented illustrator, colourful illustration guidelines were created in accordance with the overall design system. The main reason we wanted to illustrate parts of the system was to make the interface a pleasure to use. We use playful illustrations in screens that are prone to producing frustration. We also use them as hints to convey a message.

Illustrations

An example of a few illustrations within the UI.

Screenshot 2017-10-27 02.09.16
Screenshot 2017-10-27 16.54.31

Extract from the illustration stylguide. The descriptions are written in Czech.

Today and Further On

We are not finished yet, however. Applying the design system to other parts of the product according to the workflow has been in process. There’s a lot of learning in the process for the entire team, and it is Edookit’s aim to constantly iterate and make the system and workflow better. This study will be updated with more recent findings once they are available for publishing.

Form elements

We continue to add and update elements in the design system. Furthermore we are continuosly redesigning all the parts of the portal.