Gleerups – Course plan redesign
I redesigned the course plan based on research, feedback and interviews to fit the needs of teachers and students.
Client
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.
Role
Digital Product Designer @jayway by devoteam
- User research, Market Study, Prototyping & Testing, UI design
- OKRs and Analytics with Data Visualisation
- Art Direction
- Maintaining and optimising new design system
Team
Lucia Fryett (Designer)
Alexandra Törn (Project Manager)
August Alfredsson (Developer)
Niclas Lövdahl (Developer)
Sara Egli (Developer)
Timeframe
5 months // 2021
Design for
Web application
The improvement
Knowledge is power – teaching is fuel
Let’s do a scenario! You are a biology teacher, you have digital course literature for biology that has 600 pages and you want to teach your 6th-graders about bacteria. You could just tell them “open the book on page 365 and read”. Or – you make a Gleerups course plan by combining different pages of the biology book, adding youtube videos, adding links to a fun game and some exercises. On top of that you can track your students progress to fully support them individually. Course plans make teaching easier and learning more fun.
Constraints
A living, breathing platform
Gleerups digital learning platform reaches a few years back already and change comes quickly in this digital age. There are parts of the web applications that are built without any design thinking and some that are. The course plan tool was already built, but not in a user-friendly way. We had to constantly look holistically at the entire Gleerups platform and consider the system and the connections already there.
Process
Understand
We 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.
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:
Key user needs:
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. 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.
Objective Key Results
- Complaints -50% – Make the tool better and less frustrating, Get data from the support team, analyse the information about complaints of the current planning tool
- Plan completion +20% – 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
- Use of tool +50% – Motivate teachers and students to use the tool more, through a great experience, Track how often the same user returns and uses the same course plan
Design
After we understood our users biggest pains we created a conceptual Lo-Fi prototype with components and behaviour that we assumed could fulfill 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.
Key takeaways
- 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
- 80% clicked “Complete” on each step within a course plan
- 5/5 Understood and appreciated seeing how many steps were completed
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 children it is very important to create something they love, not something that just works. We split the course planning tool into three views: My course plans, Overview and Inside a course plan. With the insights from the user interviews we put each feature 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.
My course plans
Building a planning tool where teachers can easily create and manage their plans and follow students’ learning.
The biggest update in this view 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. One decision to make it less complicated to develop is that the folders only have one level, so a user cannot at this point create a folder in a folder. Another add-on was the “Dölj” (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. Teachers are able to search for and filter through to find the right course plan easily and intuitively.
Before & After and iterations:
Course Plan 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 smaller cover of a course plan, seen in the previous view. 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.
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.
Before & After and iterations:
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 I 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 & After and iterations:
Tackling design debt and improving ways 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 we simultaneously tried to add some things that would make our way of working easier and also pay off some design debt.
Art Direction
Previously the art direction was never specifically designed and that showed in different parts of the platform. I wrote down and created a guide for the principles that had been floating around in my and previous designers’ heads to create guidelines of what to keep in mind when designing this platform.
Global styles and Design system
We continuously designed with our design system in mind, aligning components and freshening up the whole system. I also added all the assets to the library creating Variants in Figma and publishing changes so they could be used within all files.
Outcome
Impact
So much work went into this and I could not have done it better with anybody else than my fellow designer Lucia. 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.I think I was hyper aware of my design decisions because of writing them down, reiterating on the design and constantly explaining my design thoughts to people.
– “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.”
– a teacher
-73% of complaints
OKR: -50% of complaints
+82% of plan completion
OKR: +20% of plan completion
+48% use of tool
OKR: +50% of use of tool
– Continuous development of tool
I learned to
- 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.
