Maps out 1000 years of my genealogical record and creates an interactive infographic with a rapid iPad app development software.
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.
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.
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.
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.
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.
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.
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.
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.
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