Gleerups course plan redesign

Improving the learning and teaching experience through strategy and design

Gleerups is Swedens biggest digital learning platform for teaching materials, digital teaching tools, course literature and competence development from preschool to university. Their goal is to provide the best possible support for successful learning in school.

Introduction

Gleerups is one of Jayways long term clients for whom they continuously improve and maintain their platform. A big part of the 2021 implementation roadmap for the platform was to solve major problems faced by teachers and students in the existing course plan tool. The tool is an area of interest for all users as it highlights the use of multiple course literature combined, which is Gleerups’ most profitable license product.

During my time on this project I spoke swedish with the team and client – which added a lot of new words to my vocabulary. Another special thing was that I worked very closely with another UX Designer, Lucia. Designing for this platform was very exciting because of the need to design for different age groups: kids, teens and adults, as well as different user groups: students and teachers. It was amazing to talk to teachers and understand how they work and being able to support that with a better design. One of my personal goals for this project was to contribute heavily with my knowledge and experience in visual design and art direction to bring this platform to the next level.

This redesign is currently being developed and will be available autumn 2021. 

My role / Company
UX Designer / Jayway
– Research (Workshop, User Pains, User Needs, Market Study)
– Success Metrics (KPIs, Analytics, Data Visualisation) 
– Prototyping (Usability Testing) 
– Art Direction
– Design (Lo-Fi, Hi-Fi, Components)

Duration / Year
5  months / 2020-21

Tools
Pen and Paper
Figma
Miro
Google Forms
Google Analytics

Google Datastudio

Team (for this feature)
2 Designers
1 Project Manager
2 Developers

Course plan views

Supporting successful and productive learning through an intuitive tool

Working closely with the other UX designer Lucia we talked constantly (remotely) and found it important to have a process that is based on research and validating hypotheses with real users. To keep the client in the loop we had weekly meetings to show our process and get sign offs. Separately with the development team we also had casual, weekly meetings where we showed our process and ideas so we could understand technical limitations and opportunities as early as possible. Through these sessions we also wanted to create a space where the design gets openly discussed and developers can feel a sense of contribution from the start. Here you can see a flowchart we created of our process: 

Way of working process

Creating shared future value through a curated workshop 

Lucia facilitated a workshop, where the internal team and stakeholders aligned visions and the aim for this project, as well as defined and answered important questions. Gleerups shared insights and the business value about setting the course plan as a high priority. They also provided us with quotes from their support line about the course plan tool, which gave us a great starting point for our research. The big takeaway from the workshop was that Gleerups saw the differentiation of students to teachers and recognised that they have different user needs. We also defined and distributed tasks to individuals in our Plan of Action.

Long Term Goal

Workshop

Researching and identifying user pains and turning them into user needs 

Taking the Lean Research Canvas approach we covered the key research areas for a digital product in a short amount of time. Including user pains, a market study, technical feasibility and context of use. We grouped user complaints that support had gathered about the tool, and defined user needs:

User pains

User needs

Teachers cannot organise or find course plans easily.

Teachers want to be able to organise course plans, including archiving, for when there is a big amount of course plans.

Teachers and students do not have an overview of a course plan and cannot see how long it is.

Teachers and students need to see an  overview of the length and content of a course plan.

Students forget their progress over time and have no way of easily returning where they last left off.

Students need to be able to understand their progress within a course plan, to mark content as done / not done and easily complete the plan even if taking breaks in between.

Students get lost, because when clicking the next arrow instead of staying in the course plan they go to the next chapter in the course literature.

Students need to be able to easily navigate through course plans, without losing their place.

Lean research canvas

Making success measurable with data driven design

To be able to measure the success of this redesign we also wanted to set some data points. I had never set very specific success metrics on a project, so I was very excited to learn and set OKRs, which was challenging at first. Of course we constantly think about success and failure, but it feels more serious to actually think about specific numbers. Lucia and I defined key results that would make the success of the tool measurable, and set up charts in Google Datastudio to be able to easily track them.

Making the tool better and less frustrating

From the support team, analyse the information about complaints of the current planning tool 

– 50% complaints

Making the course plan tool more efficient and offer greater value to the user

Track how often the same user returns and uses the same course plan

+50% use of tool

Enabling students to be able to navigate more easily through and complete course plans

Google analytics events on completion button and tracking individual students course completion

+ 20% plan completion

Google Analytics events (some information blurred)

Data visualisation in Google Datastudio

Evaluating design assumptions with user testing  

After we understood our users biggest pains  we created a conceptual Lo-Fi prototype with components and behaviour that we assumed could fulfil all user needs, f.e.: a folder system, clear table of content and functioning navigation arrows. We wanted users to test this prototype to see if we were conceptually on the right track, and to get more insights about how teachers use this specific tool. The user test was a mixture of quantitative and qualitative research, gaining both numerical and emotional insights. The test was moderated and remote with 5 teachers as test persons and the prototype itself was created in Figma. Lucia guided the user through the prototype asking questions and I took notes in a Google Forms, sometimes asking questions. This test was a huge success in terms of understanding in how many different ways the course planning tool is used by teachers and students.

Prototype in Figma

User tests

Results in Google Forms

Findings:

5/5 users could create and name a folder for their course plans

80% said they would use the folder system for their course plans. “This solution is what I’ve asked for and it feels really great!”

5/5 understood and appreciated seeing how many steps were completed

One teacher said about the overview page “This is worth gold for students!”

80% clicked “Complete” on each step within a course plan

Defining a Minimal Viable Lovable Product 

We asked ourselves how we could make this tool loveable and beyond viable. When designing a learning tool especially for kids it is very important to create something they love, not something that just works. To decide on the scope and break it down into junks we booked a meeting with our project manager and worked in a Miro board. We split the course planning tool into three views: My course plans,, Overview and Inside a course plan. With the insights we gained from the user tests we knew which components we should keep from the Lo-Fi prototype and which were missing. We put each component on a sticky note and then discussed and decided together which of them are included in our MLP and moved those to the orange background.

The design team decided to clearly define responsibility and ownership, to make us specialists in specific views and being able to focus our time wisely. We still helped each other daily, provided feedback and synced, so we always knew what the other one was working on. To keep track we took notes of all design decisions and prepared a document before each client meeting where we clearly set the context, defined the goal and purpose of feedback, as well as took notes during.

MLP definition

Documentation & design decisions

Solution

My course plans

Building a planning tool where teachers can easily create and manage their plans and follow students learning

Aside from the obvious update in visual hierarchy on the covers, we also added a progress bar so the user can preview how far they have come. The user can also see on the covers which course literature is included in this plan, which ties into the business value.

Before and after

Folder system

The biggest update was the creation of folders for teachers to make it easier to organise their course plans. Teachers are able to manage all course plans in one place, view plans and folders and share access with students and other teachers. With designing folders came a lot of designing interactions and functionalities like moving, deleting or editing folders and course plans. We decided on one folder level to reduce development time. Another add-on was the “Dolda planeringar” (Hide) folder, which acts like an archive folder, so both students and teachers could hide older or unused course plans, but still easily find them gathered.

My course plans iterations

Search

Teachers are able to search for and filter through to find the right course plan easily and intuitively.

Search function

Overview

Reducing cognitive overload by breaking a big journey into smaller steps and giving an overview

This view got completely revamped – visually and interaction wise. Visually the inspiration was the actual cover of a course plan, seen in the previous view.

Before and after

Iterations

Progress and Content

The overview displays the contents of a course plan, and a user’s progress within. In the previous version students would work out of this view and links would open in a new tab, which made it unclear which content they had already finished. Now when clicking on content the student will be redirected to the actual course plan and is able to navigate from there easily. 

The clear CTA button will state “Start” or “Continue” encouraging students to press it and continue learning. 

Progress indicators

Teachers and student view

This view not only helps students but teachers when they are creating a new course plan to understand the length and content type of a course plan, as well as the structure.

The versions for teachers and students of the tool only have minor differences. Insights from the user test showed us that some teachers share their screen and students will mirror what their teachers do. Teachers have additional editing functionality.

Student view (left) and Teacher view (right)

Inside a course plan

Designing a tool where students can easily and intuitively navigate through a course plan in order to learn effectively individually or as part of a group

One of the biggest causes of issues for both teachers and students was the navigation in course plans. The user would reach a course plan through the course literature, but get lost when clicking the next arrow, because they were still navigating inside the course literature – not the plan. That is why we separated course literature and course plans completely. In general the layout is still very similar to the course literature, so the user would meet the same interactions on the platform, but it is clearly marked that they are in a course plan (planering) as well as the table of content (TOC) is different than in the course literature. 

Before and after

Content

There are four different content types: teachers’ module instructions, external links, articles from course literature and Youtube videos.

Wanting the link to be inviting and making it more interesting to click I added the preview and added a shadow that emulates a clickable object.

I wanted the teacher’s instructions of a module to follow a student with throughout different content, giving a feeling of having contact with your teachers, even when working at your own pace or outside the classroom. I designed a simple button inspired by highlight index tabs for books that is in the course plans color.

Content types (from upper left): instruction, external link, article with instruction overlay and video

Table of Content

The TOC underwent a few iterations. With a strong visual hierarchy it tells the user exactly where they are, in which module and content. It also describes the content type, and mentions the course literature. I designed the TOC to be as simple as possible to reduce cognitive overload and enable the user to focus on the content. The checkboxes have straightforward, clear and intuitive meanings like marked as done, started or new. These dots help the user to know where they are and what content they have already finished. Connecting these dots is a stroke that simulates a path, that encourages the user to stay on it and finish it, turning green the more has been marked as done. 

Table of content design iterations

Mark as done

The mark as done (swe: klarmarkering) was very tricky at first and I tried a few different designs and options. My main thought was to enable users to do and undo the action easily. After a back and forth and a few iterations I designed this switch that is very inviting to click and rewards the user with the friendly green color when marked as done.

Switch in course plans

Different versions of the “mark as done” button

Communicating a design to development through a function map  

After getting the sign off from Gleerups and finishing the majority of the design and functions, the other designer, me and our project manager sat down and drew out function maps in Miro. We marked each element that can be interacted with (that is new) with a yellow dot and made annotations and notes on expected behaviours and links. This helped development to build time estimates for their implementation work and also communicated our design decisions clearly. We also created and groomed Trello cards during this project, to clearly state the story, value for user and expected behaviour.

Function map in Miro

Trello card example

Tackling design debt and improving way of working

Design debt is something that happens in every longer project over time, new features are added, old features grow stale and there is no time to clean up. While working on this redesign I simultaneously tried to add some things that would make our way of working easier and also pay off some design debt.

This was my way of contributing heavily to this project and creating a base for future designs to make the overall user experience across the whole platform aligned and amazing, as well as pushing Gleerups’ visual style further and making it unique.

Grids and responsive design

I created a complete new grid for the responsiveness and also updated the breaking points with development to align more with user data. I designed a 12, 8 and 4 column grid that corresponds with an 8px grid. This makes designing faster and the whole platform feels more aligned when using the same spacing. Before I created this grid there was not much thought or time for responsive design, which I made a priority in this project, and is now a standard for all future designs.

Grids and an example of application

Global styles and Design system

The existing design system was a base structure, but needed more work and alignment. I wanted to create a clear way of working for designers in the Figma files and the developers when building designs. I created a process and an analogy, as well as restructured and named pages accordingly in the Figma file.

I added all the assets with correct variants to the team library, making it accessible across all different files. Also updating all typography and line heights across the whole platform and according to responsivity.

Designing with Global Styles

Asset in Global Styles, asset library in files and variants

External link asset and variants

Art Direction

Previously the art direction was never specifically designed and that showed in different parts of the platform. We wrote down and created a guide for the principles that had been floating around in our and previous designers’ heads to create guidelines of what to keep in mind when designing this platform, as well as created new guidelines based on user input and learnings from designing course plans.

Art direction guidelines

Motivational triggers

———

Outcome

“With this the course plan becomes a course literature in and of itself – which is amazing. You can see your progress which I love for the students, and I think they will love it too.”

– one of the teachers during user tests

This project is a perfect case study project, it had everything from strategy, research and analysis to design and even data. So much work went into this project and I am very proud of the end result. Not only am I satisfied with the look of this tool but even more so that we address each user’s needs. Already at the conceptual user testing we got such positive feedback of how much more they would use this tool if it would work like this and I cannot wait to gather the results in autumn.

I am also very happy that I could improve on the design system and add a clear art direction to the project as a whole, as well as pushing the visual language to new heights.  

Lessons learned

Being an advocate for users 

This project reinforced for me that as the designer we act as an internal advocate for the user. Talking to real users and having insights is so valuable in discussion where decisions can be based on user input and supportive data instead of assumptions.

Working on a living platform

This is the first time I did not create something from scratch. It gave me a great insight into the digital product life cycle and how a product is evolving over time and that there can be many constraints and technical limitations. It showed me the importance of being in constant contact with development, and understanding the whole platform is an integral part of creating a good solution.