Table of contents

Case study
3

Save for later

Working at Kiron has been fulfilling, challenging, transformative.
TL;DR
  • Challenge: Enable users to save learning programs for later
  • Industry: Edtech
  • Device: Web & Mobile
  • Research: Qualitative interviews, usability testing, market research
  • Steps: Discovery, design, testing, developer handover
  • Constraints: Design solution should fit a 2 week sprint
  • Duration: 1 week discovery research, 1 week design + usability testing
  • Impact: Users have more control over their learning experience
  • Highlight: Using the Atomic UX Research Canvas for the first time
Next up:
About me
Figma prototype

A simple flow of removing the last saved item from the list.

About kiron: my first UX full-time employment

After my startup initiative came to an end, I started looking for a UX Designer position in Germany. Since it was my very first job search, I had yet no clarity on what I would like to do and where I would like to work. So, I was lost in a vast sea of rejections. I wrote an article on that.

By the third month, when the company I was most enthusiastic about rejected my application, I felt quite hopeless. It was that very night that I realised I wanted to work on something meaningful, prompting me to google "NGOs in Germany". And that is how I found Kiron.

At last one hat less

At Kiron, my role as the sole UX/Product Designer involved user research, UX & UI design for new features and improvements, as well as creating and maintaining the design system. On top of that, it required collaboration with various stakeholders. At last, I removed the developer hat, but never for a minute did I not use that knowledge to my advantage.

Welcome to kiron campus

Kiron offers free online education to refugees and underserved communities worldwide, providing a diverse range of educational programs on its online campus. We call our target group: the learners.

One common pain point amongst our learners was that they enroll into a program, so they don’t forget about/lose it, even if they do not plan to study it right away.

The case study I’ve picked for Kiron is to show how I solved this problem.

A new feature request

Adding items to a <Wishlist> was initially a feature request by a partner organisation. Wait, what, who is this now? At Kiron, besides our main mission of providing free education for our learners, we also offer our campus as a white label to other partner organisations who of course have their own target groups.

When we get requests that will affect Kiron learners, we research to discover how. In this case, considering their previously mentioned pain point, we wanted to understand how the <Wishlist> would be useful to them.

What do our learners think?

I conducted qualitative interviews with 7 learners.

To synthesise interview data, I used the Atomic UX Research Canvas on FigJam. For every question, I separated the facts (their current pain points) from the insights (how they would like to use the <Wishlist> & other custom lists). Then I extracted opportunities (how we could design the solution).

Let me show you an example, since I cannot disclose the full research.

Atomic UX research canvas on removing an item from the wishlist
Atomic UX research canvas on removing an item from the wishlist

Experiment

  • When you remove an item from the <Wishlist>, how would you get it back?

Fact:

  • "It has happened before when exploring the campus that I have lost a program I was interested in and I struggled finding it again."

Insights:

  • After removing a program from the Wishlist, the users expect it to go into a history section where it stays for 30 days.
  • When pressing the button to remove a program from the <Wishlist>, the users expect a confirmation dialog.

Opportunities:

  • Display a section of recently removed programs from the <Wishlist>.
  • Give the option to UNDO for a short time to prevent mistakes.

The learners’ insights work in the context of deleting, where the action is irreversible. Deleting vs removing are two different things. In our context we are talking about removing.

That’s why, I propose similar solutions as opportunities, which are common design patterns, that work better in our context.

The agile UX

Kiron works agile. That means that our stickies with opportunities on how to design a <Wishlist> on our campus, need to be converted into user stories and prioritised for a 2 week sprint.

To help with that, I used another FigJam template of the famous Impact Effort Matrix. This matrix is of great help in determining the most effective course of action. At this point, I discuss the results with the Product Owner to be one the same page. We decided to go for the UNDO option above, since it is high impact and low effort.

Impact-effort matrix with one item of high impact, low effort: Give the option to UNDO for a short time to prevent mistakes.
Impact Effort Matrix

Parallel to user research, there was market research done as well, on how other platforms have implemented the <Wishlist>. I delegated this task to the fellow designer of the communication department. Udemy, Facebook, Linkedin, Instagram, Awwwards, and FutureLearn were analysed.

Now tis’ time to design. Beep bop boop.

The design system to the rescue

I cannot emphasise how obsessed I am with working with components. After all I am a Bounding Boxer. I am also very proud of the design system I have built at Kiron. It just makes work so efficient. I have organised the component/pattern library of the design system into Atoms, Components, Cards, Compositions, and Pages.

For this use case, I had to create a new page to show the <Wishlist>, so I grabbed the top & bottom navigation, text components, profile dropdown, and program cards to compose it together. Note that the page is called My lists, since we are expanding with the custom lists functionality later.

My lists page with a wishlist subsection
My lists page with a wishlist subsection

This took a couple of days to be ready for some usability testing. Woop woop.

A wish come true

Before testing the design with our learners, I checked the feasibility with my dear developers, who raised a couple important points.

Since in the future we are potentially adding custom lists, how will saving with the heart icon (which I was using for the save action) work for that use case? The heart icon has the LIKE action associated to it, so it might not scale well. Hence, I switched to the bookmark icon.

The second point was whether UNDO action was necessary, and if we could skip it for the first iteration to simplify the implementation. I went back to research more specifically how other platforms handle it and these were the results.

An analysis of how different platforms handle removing items from wishlists depicted in grouped sticky notes
How different platforms handle removing an item from wishlist

The PO and I decided to keep the UNDO for the first implementation. All settled, now, how do our learners use it? I tested the new design with 4 learners, and it turned out, saving a program to the <Wishlist> is straightforward.

However, the term <Wishlist> caused confusion for two of them, as it could mean a list of programs that the learner cannot access right now, but would like to have.

I then decided <Saved for later> would suit the purpose of this list the best. Additionally, it is simpler language and it can be easily translated into other languages as well.

My lists page with saved for later subsection
My lists page with saved for later subsection

An empty my lists page
An empty my lists page

Mobile screens of my lists page
Mobile screens of my lists page

A better learning experience

How many learners use it? What are the touch points of interaction? For instance, they may engage with it on their personalised home page, while exploring new programs, or inside a specific program page. Do they notice and use the UNDO functionality? How did this feature impact their learning experience?

While I'm no longer present to ask these questions, the answers will undoubtedly influence the future versions of this feature.

Refer to the final designs presented below.

Final design of My lists page - One item in saved for later
Final design of My lists page - One item in saved for later

Final design of My lists page - Empty lists
Final design of My lists page - Empty lists

Final designs of My lists page - Mobile version
Final designs of My lists page - Mobile version

Since, we are potentially expanding to custom lists in the future, below is one possible design solution that could be considered.

Possible future design of My lists page - Multiple lists collapsed
Possible future design of My lists page - Multiple lists collapsed

Possible future design of My lists page - Multiple lists expanded
Possible future design of My lists page - Multiple lists expanded

Possible future design of My lists page - Mobile version
Possible future design of My lists page - Mobile version

What would I do better?

Deciding on a final copy turned out to be the most difficult part of this design challenge. What I could do better here is to align with the relevant stakeholders before the implementation and clarify my design decisions on the copy.

Next up:
About me