For a detailed case study and better experience, please visit this site on a PC.

The philosophy behind the 4 interactive opening videos

When you think about traditional craftsmanship and their lifestyle, one thing you can’t ignore is the significance of each season. Their calendar is divided into 4 seasons and 24 solar terms, which they follow to adjust their agricultural activities, daily food, and handicraft work. As a result, I have decided to present these craftsmanships in four short videos, each representing a different season, accompanied by their seasonal landscapes. This approach is aimed at capturing the attention of modern people with short attention spans.To further enhance the emotional impact, the videos will be complemented by touching ethnic minority music. This combination will foster a deep understanding and connection between the audience and the platform, creating a lasting impression both visually and audibly.

Audio control button for the opening animation’s volume adjustment.

The smooth and natural feeling transition between each season will give audiences a calm and soothing atmosphere, reminding of their own memories related each season, deepening the connection with the platform.

Reframing the Image of traditional handicrafts

As an extended platform for a series of high-quality handicraft documentation aiming to arise people’s awareness and attention. We intend to design this platform as one of the convenient and pleasant sources for more generations to explore in the future, and reframe the image and the stereotype of the ancestral art. To contrast with the traditional, bright, and colorful embroidery artworks, and to combine ancient techniques and modern technology, the motion design on the following page after the opening video presents ancestral arts individually and prominently, it will expand into a non-stop horizontally scrolling carousel after the animation. This motion and modern interface design simplified the interaction and navigation process for the users, and it allows each handicraft work to be more prominently presented and expanded. Users can freely explore the details spontaneously on the sub-pages without being overwhelmed and frustrated.

The Modern, smooth, and simple interface and motion design make each artwork more prominent.

After the immersive experience from the opening video, these handicrafts will deepen the connection and understanding between users and ancient handicrafts.

The sub-page—Techniques, is designed to support embroidery works as well as a stand-alone page for users to explore spontaneously. Users can easily interact with each icon, switching between artworks and techniques. The modern interface and interactive motion design injected a twist into ancestral art, interpreting the not-up-to-date old techniques into something meaningful, fascinating, and symbolic activity, stimulating users’ curiosity and making users want to explore more.

A convenient and visually appealing side menu for more details.

The natural and organic transitions between each detail allow users to explore spontaneously and imitate more curiosity.

A comprehensive and multi-angle interface system

To create a comprehensive information platform, I have developed 4 different wireframe options for introducing handicrafts based on technique, location, season, and artisan. Through this new multi-dimensional interaction interface, the audience will gain a deeper understanding of these traditional handicraft techniques. The once old and unfamiliar crafts can now be presented as something interesting and engaging to interact with, offering a fresh and exciting experience. Additionally, this new approach will also raise people’s awareness of the current status of these handicrafts, which are facing the threat of extinction.

The overall distribution of handicrafts map at Qiandongnan Minority Autonomous Region, which located at the south west area in China, simplified the unfamiliar and complicated information on handicrafts in this area.

The moving car animation design indicates it’s a journey and reminds the audience to get ready to embrace the new. It hopes to inspire people’s desire to travel there in person.

Motion transition from each location to its expanded information page is natural and organic. While it provides further details on each village and its general information, it also gives users more agency to check other villages spontaneously.
Users can easily grasp a comprehensive geographical location of the handicrafts distribution in the Qiandongnan  autonomous region and navigate easily between them.

TECHNICAL

The Story page is presented as a short video at the beginning to make a strong impression, and it quickly evolves into an engaging book format and divided into multiple chapters to provide a better reading experience.

The 24 solar terms play important roles and have greatly influenced farmers’ basic needs in each season, and they still have an important function nowadays.

Sub-menu serves a better navigation experience. And the color changing and strikethrough effect over hover simplify the navigation experience.

Presenting more details of handicrafts based on seasonal agricultural change

The endless scrolling interface enhance users curiosity to explore and interact more within the platform.

The introducing artisans interface with expanding boundaries

The seamless transition and the minimalist design on the artisan pages form modern aesthetic vibes on the traditional techniques which used to seem like out of sync with the times.

The inspiration to encourage endless possibilities

The opening motion design presents endless possibilities for the modern collaboration project, it will expand into a non-stop horizontally scrolling carousel after the animation. This motion and interface design simplified the interaction and navigation process for the users, and it allows each project and its collaborated brand to be more prominently presented. It’s designed to be a show room and also to encourag endless possibilities for the future.

Clean yet sophisticated design makes each project and its brand more prominent.

Progress motion chart designed for a better scrolling experience.

The expanding and shrinking motion design makes the transition smooth and engaging, users will be able to access the general information on each project easily and precisely and can navigate through artisan and location features to explore more on the Ancestral Art page. It also includes infomation on the handicraft’s location and artisans, so users will be able to navigate through these two existing features to explore more related information on the Ancestral Art page.

About Us - Brand/Organization Image

Over the past 10 years, Ms. Dengli (the founder of the Happiness women fund) teamed up with designers and the fashion industry all over the world to inject modern design into Miao embroidery. Now, she founded this media company to focus on helping preserve the heritage of ancestral handicrafts art. Therefore for the About us page, I decided to use three layers to highlight the process of the journey.

The first layer is the latest progress of this project, general information about the company, and its mission.

Following up it’s the work journey of the founder’s past 10 years, and how she determined to improve the village artisans’ life quality and the public’s awareness of that ancestral art before extinction.

The last layer is the information about the charity foundation that has helped to build and run this project since the beginning of this mission. This foundation serves as an authoritative supervision and ensures the helpful assistance from the government level

Connecting from online to offline — Event

To serve an immersive experience for users, I added this design on the platform to connect online journey and offline experience. Users don't always need to travel thousands miles away, but now can easily access all the local events info of those ancestral handicrafts all over the world, not necessarily organized by the organization.

Easy navigation between different locations.

Responsive Website Prototype Video

Mobile version mock-up Video

NEXT PROJECT

Connect to the unconscious

Back to Top
Background
research
strategy
Design Thinking
Next
prototype