Problem
In the context of viewing Melbourne and Ho Chi Minh City as sister cities, I came across the saying “Same, same but different”. In this project, the problem is to design an interactive website prototype that compare and combine a part of Melbourne and Ho Chi Minh City using a blue-sky approach.
Response
Melbourne and Ho Chi Minh City are melting points of cultures where people with different background gather together and live in. With this diversity, there are many similarity and differences between both cultures. In this project, my team and I took an approach to explore one of the culture in both cities that tourists tend to overlook, which is fabric and pattern design.
Goal
Patterned Journey is an interactive website that aims to share and educate individuals about the diverse fabric patterns of Melbourne and Ho Chi Minh City through storytelling and design.
Approach
There are four main section in this website to portray the informative storytelling and interaction-based features.
- Storytelling : Showcase information about the fabric history of each city as well as how they may share similarities and differences
- Gallery : Display the fabric patterns along with the information for each pattern
- Design Tool : Let the user choose a pattern from each city and create their own fusion pattern
- AR Tool : Project the pattern on an AR scarf so the user can virtually wear them
User Research
Fabric and pattern design are niche topics that not everyone is interested in. Therefore the users we are designing for must have a relation or long-term interest in the textile and fabric industry. If we were to compare the primary and secondary persona, the primary persona has a goal to find inspiration and information relating to fabric pattern design, while the secondary persona has a goal to find information about fabric culture and commercial potential.
Primary Persona
Secondary Persona
Wireframe
This website have two site architecture, one for the desktop version and one for the mobile version. Considering that we have adaptive design, the design for desktop and mobile is different.
Desktop Wireframe
Mobile Wireframe
UI Design
Inspiration
Colour
Typography
Icons & Buttons
Prototype
