Incredible Yún Jǐn
Undergraduate Capstone
When I found that many people around me pay more attention to “McFashion“ instead of the ancient culture, fragmentation instead of immersive reading, I was considering to take actions to preserve traditions taking advantage of my profession. Passionate with Chinese Brocade (traditional silk fabric, in Chinese Yún Jǐn), I created a responsive website called “Incredible Yún Jǐn” helping to disseminate it.
ROLE
TEAM MEMBER
TIME
Project management
Information architect
UI design
Front-End Dev
(Solo)
Oct 2016 – May 2017 (7 months)
OVERVIEW
Chinese Brocade is one of the Chinese Intangible Cultural Heritage with the rich culture and scientific meaning it carries. Modernization process might accelerate the extinction of the tradition if we don’t take any action to disseminate it.
Therefore, an integrated media about Chinese Brocade is needed to encourage people to get access to the ancient culture. In the process of creating this website, I switched over multiple roles from design to implementation, delivering a promising site with selected content and engaging interactions.
MOTIVATION
Chinese Brocade is one of the Chinese Intangible Cultural Heritage. Modernization process might accelerate the extinction of the tradition if we don’t take any action to disseminate it.
Therefore, an integrated media about Chinese Brocade is needed to encourage people to get access to the ancient culture. I created this website, “Incredible Yún Jǐn”, switching over multiple roles from design to implementation to deliver a promising site with selected content and engaging interactions.
About Yún Jǐn
Chinese Brocade (in Chinese Yún Jǐn, Yún in Chinese means clouds, and Jǐn means brocade; the name Yún Jǐn comes since the patterns are as beautiful as the cloud in the sky). Yún Jǐn is a luxurious and hand-woven brocade created over 1600 years ago, famous for its unique technology, elegant patterns, and smooth texture. With the rich cultural and scientific meaning it carries, it is honored by experts as “the last milestone in the technological history of Chinese silk fabrics.”
Challenge Analysis
What I Did
I looked through more than 5 existing Chinese websites about traditional culture and museum.
KeyInsights
Chinese websites are complicated with high information density.
Contents of culture-related websites includes high-density useless info, like clichés, ads, and lacks selected information.
There is almost no website specifically introducing an art/genre with involved interactions.
What I did
Then I tested 5 people (3 classmates, 2 professors) with Think-aloud method asking them to complete 2 tasks.
KeyInsights
While Chinese people are more tolerant of the complex websites piling up information, they still spend more time finding things on them and are more anxious when navigating.
Most websites did not follow the responsive design trend.
PROCESS
Information Collection
I collected the contents of this website, mainly from these books and websites. On the left, there is a series of books about different kinds of patterns on Chinese costumes. On the right, it is primarily about the dragon pattern.
Series: The Chinese Traditional Patterns
The Manchu Dragon
Sitemaps
This responsive website includes four main section: patterns, crafting process, dragon robes and history.
Wireframing
I mocked up the responsive layout of my website, and I only prototyped a desktop-based website to minimize risk and push the design process. For testing users quickly to understand more their needs and communicating with other experts efficiently to further improve the wireframes, I created the interactive prototype to represent.
Moodboard
Style Guide
I picked a series of classic colors frequently used in the Yún Jǐn craftwork as the color scheme. And I applied 3 traditional Chinese typefaces in line with the content of this site.
Development
Then I realized this responsive website with HTML/CSS/Javascript and Bootstrap framework and developed it on the Webstorm.
Highlighted Design Thinking
Home Page
In this page, I offered a panoramic view of this site to users. Each section consists of (a) a short description, (b) an accessible entry towards the content page.
Persistent Navigation
It appears exactly the same in every single page except for the “Home” page, including site ID(logo) and section navigation.
Iterating by guerrilla testing
Site ID is placed on the upper left corner, here I met a challenge: How do I allocate the functions of the Site ID and Home page button? I did guerrilla testing for 10 people and let them vote, 4 are my friends in other schools, 3 are my classmates and the rest are my families. Option (a) won the day and became final version.
(a) “Home” as one of the main sections in the nav
(b) Site ID doubles as "Home" page button
(c) "Home" page word as a link next to the ID
Nav on Big v.s. Small Screen
Big Screen (Laptop or iPad)
I placed the navigation bar on the top framing everything in this page. The micro-interaction shows the position of the cursor. And as a “You are here” indicator, the users’ current location is marked with more than one visual cues, like different colors and bold text.
Small Screen (iPhone)
The navigation is collected into a “Burger” menu button and presents with a drop-down menu in vertical orientation. It is more friendly for phone-users to read and click. Also, the current location is highlighted to avoid the user lost.
Interactions
The interactions could help people see the results of their actions directly, present multiple subsections dynamically and involve users into the website actively.
Seamless Carousel
For the page of pattern categories, carousel is an excellent way to cycle through a series of categories for users to choose. Moving mouse on or off activates or deactivates the cycle of the slideshow. I only displayed 3 categories, but this way works well or even better for more than 3 categories.
Pixelate
Color is a significant factor in traditional Chinese culture. Thus, for each specific pattern, the user could explore its unique colors with a “magnifying lens” to Pixelate it by moving their cursor onto it. And you could also try to order the primary colors with frequency and see if you could get the right answer.
Pixelate the pattern by moving cursor onto it
Order the colors by dragging the colors into the boxes
Coloring Game
Looking through a lot of information for a while, do you want to release your creativity? The user could color their own traditional pattern just by dragging the color in the palette (frequently used in traditional Chinese Brocade) and dropping onto the blank area. There are 3 patterns for coloring.
Final Version
Home Page
Pattern Page —- E.g.: Insect and Fish Pattern
Process Page
Dragon Page
History Page
WHAT I GOT
From this project, I learned to achieve my goal step by step and also witnessed that it grew up from a blueprint on the paper to an interactive website appearing on the screen. As a solo project, my role switch over from ideation, information collection and sitemap creation to responsive strategy implementation and front-end development with HTML/CSS/JS and Bootstrap framework. With creativity and integrity, my work was selected into the Capstone Exhibition and took a “Capstone Excellent Award.”
This website provided a concept of culture disseminating. Even though I completed this project, I still had a strong sense of duty, helping to prevent Chinese culture. I am trying to contact with the Yún Jǐn Research Institute. With their support and investment, the website will be introduced to the market in the near future.
Say Hi !
I’m Hankun He, thanks for coming to look at my work. Currently based in Champaign, Illinois, but open to relocation. Having graduated from the University of Virginia in May 2019, I’m looking for a full-time job in the UX design space.
Here is my Resume –>
2019 © Made with 
by Hankun. All rights reserved.
Feel Free to Contact Me. Let's Chat!
434.227.9517
2019 © Made with by Hankun. All rights reserved.