Distilled Notes

It is time to play your notes

See More

The Story Behind

Record your notes

Recording your notes improves recall and help people in the learning process. Distilled Notes provides students with tools that capture and intelligently organize lecture information and then placing it in context for when they need it. The biggest opportunity seems to be creating a destination of rich online course information. Not just for the 20+ million post secondary students. But for anyone wanting to learn anything.

  • Product Design
  • Samsung Accelerator
  • Mobile application
  • 2015
  • http://www.distillednotes.com

  • Our goal is to help students to learn by recalling information. We believe that we can create a tool that records the most relevant moments of a lesson, so students can always come back anytime, anywhere.

The problem

Much of student’s success depends on information recall. They’re inundated with an increasing amount. Yet, there is little to no technology assistance for helping recall.

Product Vision

The produt vision can be explained by these three verbs: Analyse, Capture and Deliver. Analyze and weave input together to generate lecture memorialization. Capture slides, photos, audio, video and handwriting from mobile; and typed notes from laptop. Deliver information in interactive and searchable ways to mobile and web.

First Flows and Wireframes

Initial Flows

Initial flows considered the interactions like typing, drawing and taking a picture for all platforms: smartphones, tablets and desktop.

New flows

After several discussions with the team and stakeholders, we came up with a new vision for the interaction design: the desktop app would be the notes’ hub and the smartphone would be an arm that allows users to record audio, take pictures and draw with their fingers. Everything added through the smartphone would seamlessly and instantaneously update the notes on the desktop app.

Redefining the platforms

With the new vision for the interaction design, it was necessary to redefine the focus of the platform I was designing for. The initial focus was tablet, the new vision would focus on the desktop and and smartphones only. So, I had to replicate and adapt the previous flows.

Mobile: To be or not to be?

There was a question about considering desktop instead mobile-only. Our initial assumption was that students were using mobile platforms more than desktops in classrooms. This assumption was proved wrong after we visited several classrooms in the U.S. and Canada. Most students were still using their laptops, mostly because of the complexity of their classroom work and easier multitasking.

Distilled Notes Logo

Play and Review

The most important distinction of this product when compared to other similar products is the ability to play and review the notes. So imagine the moment after the lecture in which the user wants to review the lecture. Distilled Notes easily provides a "play" button, so the user can "watch" the notes and "listen" the recorded audio at the same time.


After we understood and defined the user experience, we were ready to brand it. I wanted to have the most unique element of the product as part of the logo. A play icon that mimics the letter D was my approach.

New Flows and Wireframes

Smartphone Experience

The smartphone experience would focus on functionalities that can be leveraged by the platform such as: recording audio, taking a picture, drawing with fingers. During a lecture, the devices get syncronized and any element added is seamlessly updated to the lecture.

Desktop Experience

Like the smartphone, the desktop experience would leverage desktop functionalities such as typing, lectures management and reviewing a lecture (watching).

Smartphone Mockups

Visual Design Iterations

The visual design for the product went through many iterations. I was mostly trying to get find an unique visual language that would be different of Apple and Google designs, but that would follow similar mental models to facilitate the user interaction.

Elegance as principle

It was only when I defined a principle that I was able to really find a visual design direction and make it unique. Elegance was the word. The black background and a wine red as accent color were keys on this new direction.

Mobile App On-boarding

Reminding to use desktop

Since this smartphone app would not work without the support of the desktop application, the onboarding process was crucial to communicate this.

Key Instructions

The onboarding also shows what the user can do on the Smartphone app: Record audio, take pictures, draw and have access to the list of lectures on that account.

Next Steps

Focus on Visual Design for web

The Web App is making progress in terms os functionality. But its visual design still needs to be improved.

User Tests

Earlier user researches showed that recalling improves learning, however we need to test if this tool will actually have this effect. The Beta Test phase will help us to prove the concept.