Slice is a product that lets users upload and annotate hi res medical images. For academics these virtual slides mean liberating their physical glass slides stored on their shelves. For students it means an online replacement to multiheader microscopes in labs. I lead the design of a major update to better integrate it into our teachers’s workflow. Since the feature launch, there’s been a 23% in annotations created in 2016 and a 44% increase of academics adopting Slice as a teaching tool.

The starting point

The existing tool was popular, but users weren’t sure of their first step after signup, and annotations weren’t collaborative. How it worked was users could make annotations to an image, but they were only saved to that slides random generated url. Our goal was to centralise all a user’s images and annotations to their profile. By making annotations collaborative, we could improve the teaching and learning experience – a nice win win.

The UI before the project. Visual design aside, the sidebar doesn't guide the user, and CTA is hidden in the bottom right
The UI before the project. Visual design aside, the sidebar doesn't guide the user, and CTA is hidden in the bottom right

Interface spring clean

Our first move was to bring together all the good intentions in the starting deisgn, consolidating actions into the sidebar, and polishing font and UI heirarchies. We spent the first month iterating around this, and once it was in a place everyone was happy with, we fleshed out what collaborative annotations could look like, based on the requirements and intentions given to us by it’s users.

Testing with partnering Institutions

After initial testing and taxonomy development with the management committee who operate the BEST Network, we wanted to observe how they would use the feature in a real teaching setting. We were lucky yo get the chance to go and observe at the University of New South Wales, in a group pathology lab session. We managed to catch a few early issues, mostly low hanging fruits to do with user authentication and sharing, and the remainder of the session allowed us to see the gaps in how teachers were able to use it in practice.

Designing for focus

One of the concerns during observation was around anonymity in annotations. Teachers would get students to make annotations as a group, so they could present them back to the class for review and feedback. However every annotation has the student name attached - but teachers didn’t want to make an example of a student who got something wrong. To solve this we designed a “Toggle focus” within the annotations to allow review and feedback to be generalised, and not targetted to any particular student.

Understanding teaching contexts.

Our largest concern when observing, was teachers expectation about how to use the feature. While collaborative annotations was one of the most popular feature launches for Slice to date, teachers didn’t have a clear path of how to use it in class. We focussed our remaining work on how to ease feature adoption. We wanted it to reflect how they would naturally teach, and after speaking with teachers we divided the feature into three separate contexts – present in class, share as a resource, and creating an activity.