Text Editing Experience
Travelnote

︎ Personal Project ︎Mobile UX/UI︎ 2016 [Nov], 2018 [July] ︎


︎ 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.


Primary Features


Highlighting Text


  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 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 into journal entries.




Drag & Drop


Users can drag and drop note blocks to rearrange contents.




Preview





︎︎︎︎Process︎︎︎︎



What Users Want



✦ Eugine, a traveler & blogger


“I usually get inspiration 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.”

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


✦ Adrian, a traveler & amateur writer


“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 any time. 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.”

︎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 decision I made throughout the project development process was based on the users' feedback. I conducted multiple usability tests and refined the project.

︎ Complete an initial interface design:
(Paper prototype – Wireframe – Interactive Prototype using Framer JS)

︎ Decide which tasks to test and expanded these tasks into
scenarios to help test users to understand the context.

︎ Collect information and insights. I tried to externalize the test user's thought process.













Paper Prototype




Interactive Prototype

Made with Framer JS






︎Main︎
AR Barbie Dreamhouse ︎ Travelnote ︎ EA FPS Mobile Game HUD ︎ AI+Voice Abracadabra ︎ 🔒 EA Mobile Game [︎]


© Angelina Yeon Woo Shin ︎ About ︎ ︎