Major updated in 2018 · Instructor Todd Masilko
Created in 2016 · Instructor Trevor Greenleaf
 

Travelnote

 
This project serves the purpose of helping users to organize and save photos, maps, and furthermore, solves the existing problem of editing text with a smartphone in a journal-like environment while traveling.
 
What Users Want
“I usually get inspirations while traveling and I usually jot my thoughts down on a note app on my phone to use it later when I have time to write my journal on my laptop. I've never tried writing a full journal entry with a phone before, but it would be convenient if I could start and finish an entry with a smartphone because my phone is always with me. As for now though, it's still too inconvenient to cut and paste text on a mobile screen.” 

      — Eugene, a traveler & blogger
"I use Day One to write my travel journals. I wish I could also use it with my phone, so I can write and update the journal at anytime. There is a Day One mobile app, but I normally don't write text with a phone, because it is hard to edit when it gets long. "
 — Adrian, a traveler & amateur writer
 

Takeaways

The potential users want to create and revise their posts while traveling.

Users found it tedious to reorganize their stories. It is difficult to cut and paste text on a mobile screen.

Information Architecture
Usability Test
Every decisions I made throughout the project development process was based on the users' feedback. I conducted multiple usability tests, collected information from text users and refine the project.

The below is one version of my usability test to show my design process:


 

  1. Complete an initial interface design (Paper prototype – Wireframe – Interactive Prototype using Framer JS)
     

  2. Decide which tasks to test and expanded these tasks into scenarios to help test users to understand context.
     

  3. Collected information and insights. I tried to externalize test user's thought process.

Primary Features
Highlighting Texts
  1. Tap on the screen to activate the cursor.

  2. Move the blue circle to move the cursor.

  3. Long-hold the blue circle to enter the highlighting text mode.

The user can control the cursor with the virtual trackpad.

This virtual cursor trackpad will allow users to gain a seamless view of the cursor while preventing the users' finger from sliding off the screen when selecting text located at the edges of the screen.

Save (Draft) Notes

Users can capture their inspiration simply with one tap. Users can instantly save their thoughts and ideas by using text or even their voice to dictate the notes. 

These notes can also be easily imported to journal entries as well.

 
 
Drag & Drop

Users can drag and drop note blocks to rearrange contents.

Microinteractions
Interactive
Prototype
Made with Framer JS
Preview
1/12