Fall 2019

Product Design/System Design


Grid is an analog system to visualize your daily productivity and shorten the distance to your goal by utilizing a planner with watercolor highlighters for daily planning and journaling. The brief in the class is to search for a new solution for the Winsor & Newton Watercolor to expand their current market of art supplies. I took the approach of. bringing watercolor into planning and journaling people's daily lives.

Grid Web Template [Recovered]-01.jpg

“Writing and drawing on paper allows the brain to draw deeper connections and allows the information to be more easily remembered. ”

—— Pam A. Mueller of Princeton and Daniel M. Oppenheimer, University of California, Los Angeles

Grid Web Template [Recovered]-04.jpg
Grid Web Template [Recovered]-05.jpg

Tool Ideation

I explored multiple designs of tools that can both write and draw, are easy to carry and shift color easily.


​Dual-tip pen for both drawing and writing

Brush highlighter allows users to adjust weight and transparency

Angled watercolor marker with 2 widths

Refillable bullet marker​that can attach to the main pen

I developed the system based on clear visualization and introduce the vellum layer for a coherent aesthetics and function of editing.

System Development


Using color to visualize the schedule

​Markers and notebook system

Translucent layer for review and editing


ideation (1)-Recovered.jpg

Layout Development

Grid Web Template [Recovered]-07.jpg

User Testing


Insights: She was adding extra tracing paper for an overall plan before she can plan to each day.

Design Refinement:  A spread of vellum paper to each page 


Insights: She was confused by the instructions on the paper and needed more help with setting up the journal.

Design: Design the app as a guide to use the notebook


Insights: The opacity of the paper affects reading legibility.

Design: I compared different types of vellum paper and find the one with the most optimal degree of translucency.

Final Layout

With its designed layout, Grid provides a clearer, more visualized system

with step-by-step instructions for setting up plans.

Hover to see it in action

Grid comes with a writing pen, a bullet marker set and a notebook. The simple and compact system makes it easy to use and transport. The elastic strap on the back of the box can hold it to the book when carried.

The bullet highlighter can draw in 2 widths. A click-in mechanism on the pen allows for switching between different colors. Simply click to connect the writing pen with a bullet highlighter.


Each bullet highlighter is magnetically connected to the box, and the writing pen slides underneath the box. 

new render.153.jpg

Mobile App

The Grid mobile app helps the user to set up plans based on their goals. It collects users' info into a database and generates a recommended schedule. Users can set up reminders, timers, and linked related apps. At the end of the day, it reminds people to write down their daily journal for future reflection.

Grid Web Template [Recovered]-03.jpg

Grid mobile app is an add-on experience to the notebook. Whether a user chooses to use it or not, they can still enjoy the experience of using Grid.

new logo-03.png