Chen Family Tree
My biological family tree displayed in the format of an interactive website
Disciplines
Interaction Design
Web Design
Tools
Figma
Adobe Illustrator
Class
DSGD 100: Visual Communication & Process
Date
Nov - Dec 2024
01 Highlights
02 The Challenge
How might someone design a website experience that makes the stories and traits of their family members easy to understand and emotionally engaging for others?
Context
Every family has a unique set of stories, values, and shared experiences that shape who they are. However, these intricate connections and motivations are often difficult for those outside the family to fully grasp without extensive time or familiarity.
The challenge lies in creating a clear and compelling way to communicate a family's story, making it both easy to understand and emotionally resonant for people unfamiliar with their background.
03 Design Process
Concepts
Exploration
With the concepts and ideas I came up with, I began my exploration with rough black-and-white layouts of the landing page and an interior page.
I focused on key aspects like having a clear generational structure, clickable family members, and expandable menus for more detailed info. I also experimented with dropdowns for individuals and accordion sections for generations.
Since I opted to design the interior page layouts as complete units first, I prioritized ensuring that name and text fields were responsive enough to contain varying lengths of text.
Design Phase
With the sketches and ideas in place, it was time to create the visual language and finalize the layout in Adobe Illustrator.
Symbols That Reveal
I created vector illustrations representing both my family as a whole and each individual member for my concept of "Symbols That Reveal."
The family symbol is a stylized version of the Chinese character 陈 ("Chen"), combining brushstroke elegance in the form of simplified Chinese. This reflects my family's roots in Guangdong, where simplified Chinese is the standard.
For individual members, I selected objects that embody their personalities or traits. For example, a compass rose to represent confidence and steadfastness.
Implementation
With the design complete, I transferred the project to a different software to make it interactive. During this phase, I worked in Figma to define specific user interactions like hover states and drop down menus, used Figma components to build in motion, and finalize design decisions.
It should be noted that not all individual family members were built out as the focus for the project was on design and interaction rather than fully developing the information.
04 Final Design
Landing screen with motion
Desktop screens
Mobile screens
05 Reflection
Keep it Simple
Having been my first major project using Figma, I've learned a lot about the tool and concepts like responsive design while still integrating interaction and motion.
Because of the multi-faceted nature of this project, it was integral that I kept my visual designs and concepts simple in order to realistically complete the project on time.
If you'd like to visit the Figma prototype, the link can be copied from here: https://tinyurl.com/254hz3b2
Moving forward, I’d be excited to apply these skills to even more dynamic projects, continually learning and pushing the boundaries of what I am able to do.
Go check out my other projects!