Interactive timeline for better eMentoring process

This is the internship that I did at Elsevier. The goal of Elsevier is to enhance mentor-student relationship through online MendeleyGroup. To reach this goal, I designed an interactive timeline for visualising student’s research process on Mendeley website.

Deliverables: advertising video, demo video, master thesis, commercial thesis

Feb.2017 - Sep.2017

Amsterdam, Netherland

My role:

User research

UX/UI design



Usability testing

The design challenge

Encouraging mentors and students to share resources and connect with each other via MendeleyGroup is not an easy task for Mendeley. The goal of this project is to enhance the mentor student communication in this eMentoring process.

User interview and personas

I interviewed six professors and six students at the University of Twente, found that:

  1. It is hard for mentors to track student's research progress and lack the overview status of a group of students.
  2. It is hard for students to to keep track of important deadlines and report their status to their mentors.

The detailed summary can be found here.

Solution: Research Line

Research Line is an interactive timeline which helps mentors and students to communicate with each other in eMentoring.

  1. Research Line helps students record, visualise and track their research process.
  2. Research Line helps mentors track a group of students' research process and share resource with students.

Design process

1. The three ideas

I came up with three ideas on Research Line: the Linear, the Circular and the Network.

Idea 1

Idea 2

Idea 3


From Mendeley home page, students can choose to:

  1. Create a new research line
  2. Open an existing research line
  3. Open group library

Mentors can choose to:

  1. Open a student's research line
  2. Open group library
  3. Send meeting request


I developed the interactive prototypes with Sketch and FramerJS.

Create a new Research Line

How can users create their first research line

Try the prototype online.

Update an existing Research Line

How can users update their current research project

Try the prototype online

Open a student's Research Line

How can professor open his student's research progress

Try the prototype online

The demo video can be seen here.

Design iterations

Three design iterations were conducted.

  1. Only history record
  2. History record and deadline
  3. One single deadline

Qualitative user testing results

I tested the prototypes with three mentors and three students at the University of Twente. Users were required to finish specific tasks. A follow-up interview is conducted to understand user thoughts. The findings were summarized as:

  1. Most users preferred linear version as a visualisation of timeline.

  2. Mentors want to see both full picture and action points of student’s research progress.
  3. Students value the deadlines and the project plan most.

  4. Authority of the research line needs to be carefully considered.
  5. Privacy issue is important for everyone.
  6. Connecting with other platforms is important.

Overall learnings

  1. Rapid iterations are better than one-time perfection.
  2. Reduce bias as much as possible when listen to the users.
  3. Intime reporting is important.
  4. Users' habits are affected by various factors, culture, their growing environment and etc, research is important.
Designed & Coded by Mengran