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.
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
Pen and Paper
Team (for this feature)
1 Project Manager
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
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:
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
Results in Google Forms
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.
Documentation & design decisions
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
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
Teachers are able to search for and filter through to find the right course plan easily and intuitively.
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
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.
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
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
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
“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.
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.