Deep Rooted Tree
100 Percent
Graj and Gustavsen


Maps out 1000 years of my genealogical record and creates an interactive infographic with a rapid iPad app development software.

Project Overview

Project type:School Project
Discipline: UX/UI design, Graphic Design, Rapid App Development
Date: 2month, October 2012 - December 2013
Role: Student
Mentor: Slavko Milekic
In Korea the genealogy book is called jokbo or chokbo. Each family has a jokbo which is passed down through generations, and copies are often printed and distributed among family members as necessary. The firstborn son of each family inherits the original jokbo with him and continues the genealogy and family line. I believe it is a valuable and fascinating tradition. However, the book is not considered durable media in 21st century because it could get wet, burnt, stolen, or lost. Deep Rooted Tree is an digital interface project that creates links between my family history and Korean history.
Work Cover Deep Rooted Tree

Deep Rooted Tree

Deep Rooted Tree is a project that I worked on individually as a course assignment at the University of the Arts. The objective of the course was to learn how to develop an iPhone or iPad app with Livecode, which is a cross-platform rapid development software. I developed the concept, executed UX/UI, and coded the interface from scratch. This project won a Red Dot Concept Design Award, IDEA Award and grand prize from the Spark Concept Design Award.
Deep Rooted Tree_02

Family Tree

Koreans have a tradition of thoroughly documenting family histories — the names, accomplishments, and personality traits of members— to be remembered and serve as models for future generations. This is known as Chock Bo in Korea, meaning family tree. My Chock Bo was created by my first ancestors to trace my family lineage from the 9th century to the present. I named the interface 'Deep rooted tree' because the infographic, which is the main artwork of the interface resembles the annual rings of tree. In addition, it aligns with the core value and mission of the interface. Losing the Chockbo was considered such a disgrace to the family. A book was not considered durable media because it could get wet, burnt, stolen, or lost. Therefore, my chosen medium is an ipad app in order to present old information in a new format, not only to provide modern experience to the users, but also to store such a valuable information online safely.
Deep Rooted Tree_03

Intro Page

The Intro page is designed to provide brief information about 'Chock Bo' for audiences who are unfamiliar with Korean culture. The user can click the thumbnail images on image slider. Clikcing thumbnails will show detailed images and descriptions.
Deep Rooted Tree_04


To maximize the user friendliness of the interface, organizing this extensive genealogical information was paramount. My initial idea was a timeline that would stretch to show individual's achievement when the user touches the individuals. However, the timeline idea is not space efficient nor carried meaningful communication with the audience. The radial shape allows the interface to organize the information in an efficient space, while simultaneously and formally resembling the annual rings of the tree.
Deep Rooted Tree_03


Icons were designed in a way that indicate the time when my ancestors lived and to highlight achievements of my ancestors. The icons were inspired by patterns, symbols, decorations and architectures from heritage of different Korean dynasties.
Deep Rooted Tree_04

Main Page

I put invisible buttons on top of the icons and the made invisible buttons a little bigger than actual icons for the sake of user friendliness so that even if the user slightly mis-touches the button it will still be recognized. When the user touches any buttons, images of their achievement and descriptions of their dynasty, and ancestors pop up. User can take two fingers to zoom in and out to see detailed infographic.
Deep Rooted Tree_04

Development Challenge

One of the development challenges was to make the button move responsively as the user zooms into the image of the radial shaped infographic. I placed an invisible button on top of the icon which is a design for buttons. However, when the user zoomed into the infographic, the buttons were staying in the same position and did not move with the image. It appeared that Livecode supported the zoom function for a single element but it didn't support the zoom function for a group of elements. I read the whole instructions once again and looked up forums but I could not find needed answer. Therefore, I had to come up with a different way to achieve the goal of the button zooming together with the infographic. I invested my time with my mentor Dr. Slavko to solve the problem. My solution was to create invisible paths that penetrate the center of each button. The path starts from the center of the infographic coordinates;(0,0) and ends at the edge of the infographic. Then, I made the center of button coordinates to move along the invisible path by linear function as the user zoomed in and out the radial shape infographic. I think this was the first solution for zooming into the group of elements with Livecode, since I could not find any solutions online.

Key Takeaways

Throughout this project, I learned how to rapidly develop an ipad and iphone app with Livecode. In addition, I came up with an innovative concept and meaningful infographic. However there are a few things I could have done better. I made the inner circles thicker than the outer circles to make the smaller(inner) circle more visible.

Although the user can zoom in on the interface, this hierarchy of the ring thickness made some buttons, icons, and text extremely small. I think it would have been better if every ring carries the same linear thickness because it will enhance the legibility of buttons, icons and some texts.

Chee managed to create an original and extremely challenging interface resembling the radial structure of tree rings. The project was so advanced that it presented numerous programming challenges that went way beyond the scope of the course. However, Chee took all of these challenges with unwavering discipline and with huge investment of time and effort.
-Slavko Milekic, Professor and Chair

Other Project