Peiran Tan

Peiran Tan is an interaction & graphic designer getting a master’s degree in HCI at Georgia Tech, 2018–20. He is currently looking for an internship in UX or product design.

The insulin manufacturer Lilly is launching their first insulin pump. I helped them understand the pump system, design & prototype the packaging, and devise a more pain-free patient journey.

Dubberly Design Office
Jan–Aug 2018

Understanding the pump system

I made control system diagrams to help us and the client discuss and understand how all the components work and pack together.

Components made by Lilly and third-party vendors all come in with their own packaging, then packed again in a tertiary box.

Developing prototypes

The biggest design challenge is that since we couldn’t touch third-party vendor packaging, the pump initiation kit would contain many smaller boxes. To create a less-overwhelming open box experience, we made foam prototypes derived from existing box dimensions and research results about pump training sessions.

One of the directions is to unify boxes’ dimensions using filler material. A folded giant poster greets and guides the patient upon unboxing.
Another direction was to reduce the outer package size as much as possible.

Devising a better patient journey

I researched and made journey maps to push discussions on potential delivery routes, benefits, unknowns, and stakeholders in the patient’s setup and training process.

We made assumptions and used questions (magenta) to drive the discussion about patient journey.

If anything, discussions on patient journey made me viscerally realize that design is not only a business about craft and material; it is also a business about people responsible for the resulting artifact. After giving good form, the next challenge is almost always getting the necessary people together to make good happen.


The work around Lilly’s insulin pump was still going when I left the office. The design process opened my eyes to the gigantic, painful, and often hidden effort behind designing for health products. Navigating such a complex land­scape of logistics and stake­holders take incredible patience and management, and I felt lucky to have been part of this journey.

I helped FOX design and launch a tvOS app that syndicates content from all of its children networks like FX and National Geographic.

Work & Co. Portland
Summer 2016

Overall structure

After many rounds of distilling, there remain three big parts to the app’s functionality: collections, search, and settings. Collections aggregate relevant content across all FOX’s children networks.

Clicking the menu button zooms the current view out, allowing the user to quickly switch collections.


I was assigned to design search at the beginning. Since it was my first time designing for Apple TV, I wasn’t familiar with the user context and technical constraints, and took it as a layout exercise.

In our design process I realized that people are less actively engaged since TV is a passive medium, and it is important to keep the information density very low. Also, since the Apple TV remote is a limited input device that only registers 90° swipes, interactions are unnatural if the active target jumps on a skewed line.

The final design addresses previous concerns: information density is kept low, and the interactions on the remote are both minimal and on perpen­dicular directions.

The Simpsons

Shows get the same type of screen. But The Simpsons has so many seasons and episodes that a normal show screen would simply break. Another designer and I designed a special screen type to solve this issue, as well as provide further functionality such as random episode or Simpsons TV.

Wrong: the remote doesn’t register diagonal swipes
Right, but too complicated
Wrong: too showing-off
Wrong: target jumps on a skewed line

Designing The Simpsons’ dedicated show screen demonstrates the impor­tance to go beyond simply accounting for all the relevant factors. The designer should also strive to pull them together in simple, convincing, and holistic way.

Live TV

The design process of Live TV taught me that different types of interactions have different amounts of appropriate consequences. A trivial interaction should not trigger significant change.


This design process reminds me of how the magazine El Cronquis describes SANAA’s houses: “having landed before even taking off.” Just like that—the best design is often the one that does the job most unassumingly but still considers all the constraints.

Managing and inserting quotes are integral parts of essays and dissertations alike, but academic writers don’t have adequate tools. I did interviews and contextual inquiries to understand their work lives and design something better for them.

Apr 2017

Understanding academic writers

Most of my interviewees were PhDs and adjunct professors. They quote to acknowledge existing work, bolster arguments, anchor prose, and even plan overall structure. Their work lives are

  • Unbound by the desk;
  • Based on artifact or environment cues;
  • Mostly chaotic but organic;
  • Sometimes high-stake.

Existing reference management software don’t manage quotes well enough and have overly complicated interfaces. Using them to navigate an already-massive quote database in the middle of a time-limited qualifying is too much cognitive effort.

On mobile

Using an app to capture quotes can better fit academics’ mobile work lives, while managing quotes can still be done on the desktop. The app also does related tasks like preliminary metadata matching and simple annotating.

After taking a picture of the page, the app would OCR the image into highlightable text.

On desktop

The mac app has three main views: library, tags, and mindmap. The library allows the writer to tag and edit imported quotes, while tags gives a quick overview of tag frequency and potentially other relevant metrics to help the writer gauge project direction. Finally, the mindmap helps the writer stay organized in handling complex writing structures.

The right panel shows notes and original images related to the capture.
Search keywords hit not only title and text, but also author lastname.
Visualized tag frequency helps the user gauge whether his/her project is on the right track.
After drag and drop, quotes are represented by dots on the mindmap.

Since my time was limited, both app designs went through only two rounds of testing and feedback.


Quotes remain incomplete both in research and design due to its self-initiated nature. Nevertheless, it was my first attempt at doing research and design all on my own. This project gave me a deeper understanding about the chaotic and organic nature of human life, and made me truly appreciate the significance in designing one thing that fits many people.