Week 1...
Week 2...
Week 3...
Goldthred "Eat China Special" mini series on Youtube
Youtube channel Goldthred conducted a four-part video series covering the four main cuisines in China. These videos are a really good starting point for topic research. I won't be returning to topic based research until I complete more experiments to test UI styles and aesthetics, as well as technological experiments to see if I can produce a fully functional website.
Week 4...
Before starting the research phase, I wanted to review my initial brief and really hammer down the concept. I refined the target audience and the purpose, as well as establishing a Project name which reflects the entirety of the concept. I am happy with this final brief and will use it to continue my project development.
Let's Begin the Research!
SAT (Subtle Asian Traits) is a Facebook group founded by a group of friends in 2018, which has now grown a following of over 2 million members from Asian and non-Asian backgrounds. The group focuses on "connecting Asian individuals globally and create a community that celebrates the similarities and differences within Asian culture and sub-culture" (sublteasiantraits.com) Group members are invited to share their personal experiences of growing up between cultures in a light-hearted format without judgement. It's an amazing group to be a part of to read other people's stories, funny memes, similarities and cultural differences - bringing a sense of openness to discuss different upbringings and being proud of our Asian heritage.
The group is made up of many demographics within the Asian global community (it's pretty big). From young adults to middle-age working adults, from those with Asian backgrounds, mixed-Asian backgrounds to non-Asian backgrounds (non-Asian heritage). The group has a big focus on sharing stories and funny/ relatable content, so no matter what knowledge you have about the Asian community, it will all be available in this group.
I want my website to tell a story about the importance of expressing your heritage (because growing up, that is what we did in school to 'fit in' with the Australian culture), respecting the cuisine and staying authentic. The website will serve as a place of connecting Australian-born-Chinese individuals to learning more about their culture through food, as well as informing non-Asian members about the vast culture that exists in Chinese cuisine.
Product Research
Parallax Scrolling Effect
Quick 5-minute tutorial on what the Parallax Effect is, how it works and a how-to example using Code. Basically, Parallax Effect is when objects that appear closer move at a faster rate than objects that appear further away on a screen. This is following the physical aspect of perspective where, if you're travelling in a car, objects immediately in front of you are moving much quicker than what's in the distance. It is a cool effect that can bring life and animation to an otherwise static website, however, sometimes it can be overused taking over the user experience. He used the example of Apple.com overusing this effect on their product pages.
I was curious to see whether a website building such as Webflow was capable of implementing this type of effect. I found that you can configure a parallax movement on Scroll, this is helpful because I will be using Webflow to develop the website.
An interesting yet really simple use of the parallax effect. The Fire Watch website uses a beautifully illustrated background that is layered and when the user scrolls down, each layer moves in a way that we end up 'underground'. It's so simple and doesn't overuse the effect - this might be something I look in to.
Interactive Websites examples
This website highlights the different ways a storytelling website can function. Some use the parallax effect, some are completely immersive with audio and visual elements, and some use simple interactivity like a full page scrolling design for easy navigation.
I looked at the Awwwards.com website because they often have some cool projects that people have done. I found one example that uses a single-full-page scrolling navigation to visualise a time-line of events. This could be the approach I take for my project, as I may be able to spend more time on the website content and achieving quality graphics/ images. The example can be found here...
Contextual Research
I am leaning towards this style of mixing photography with illustrated elements to create a more tactile design. Further, with the illustrated elements, I will be able to execute the parallax effect or animation in multiple ways. Such as, having the illustrations go across the screen, move closer or connect to another part of the website as the user scrolls. As the website content is quite educational, this style will enable me to take an 'infographic' approach and make it more playful.
Week 5...Time to Experiment
Experiment 1: Parallax Scrolling effect on Webflow
I gathered random images to use in this experiment. I followed this tutorial and focused on understanding how the trigger animations worked in Webflow. I found the process to be quite challenging (setting the position of the images and animating the scroll effect), and the outcome was not as I had hoped. I will continue to work on this and perhaps use less images for my final project.
Experiment 2: Show/Hide effect on Webflow
I have worked with the concept of show/hide before on other platforms, but wanted to test it out in Webflow as I have an idea on how I want to utilise this interaction. I want to be able to show/hide an image with a Chinese translation of the dish - this is just one idea but could be used in multiple scenarios. The process for this was also challenging and I had to rewind this tutorial video quite often because it became quite complicated. I managed to complete the experiment and am happy with the outcome. The good thing about doing these experiments is, I can reuse the animations in the future, so I won't have to repeat the process again.
Experiment 3: Scrolling animations using Lottie plugin
I want to implement little animations to my website to add some fun interactions. To do this, I had to learn the basics. I watched this Webflow University tutorial video on how to animate on scroll - using Adobe After Effects and a plugin called "Bodymovin". I first made this simple looping animation in AE, downloaded the plugin and used it export the animation as a .json file. Then, I imported that on to my Webflow assets panel and placed it inside my webpage. After making a page trigger, the animation was able to play when the page was scrolled. I quite enjoyed the process and I found it easy to understand.
[After further research and looking at other websites, I learnt about the 'infinite marquee/ endlessly looping' content interaction. I want to wireframe and prototype with this concept to see if I can integrate this design choice into my project and understand what purpose it serves]
Experiment 4: Illustration and finding a style
This was my first attempt at trying lineless artwork. I am not great at illustration (although I do enjoy it sometimes), so this took me about an hour to complete. I used procreate and a reference photo to carve out the general shapes of each dish on the table. I think I need to use individual dishes next time as reference, so I can add more detail. Also, the colour pallet is quite dark and I want there to be more colour/liveliness to my website. I'm going to experiment with photography to see if I want to work with that more than illustration.
I felt that there was a disconnect between the website concept and the target audience. So, I brainstormed a few ideas and came up with this idea of a storytelling character to lead the user through the website (to introduce the region, and pop in to say something funny/ typical/ relatable, for example). Since the topic is about food and Chinese cuisine, I thought what better way to establish community connection than the shared experience of your Asian grandma constantly worrying about the state of your hunger. In Chinese culture, food is a big thing - and even bigger when you're visiting family. This idea might need some more thought concept wise, but the basis is to incorporate a common trait in Chinese households to resonate with the target audience. The character/s would represent each cuisine region and could introduce the cuisine as well as give advice on what's in it, what it's good for and any other common phrases you might hear PoPo/ NaiNai say in relation to food.
Experiment 5: Background image for webpage
I really liked how this website had a continuous background with animated objects (clouds), rather than using a block colour or and image. I thought it made the design look seamless and unique and I wanted to experiment with making my own background. I opted to create a pattern with simple text and illustrations, but found I may need to create a background with less elements and stick to simple shades/ colours like the example above.
This was my first time creating a pattern in Illustrator and I am happy with how it turned out. I made the illustrations in Procreate, exported into Illustrator and added the typography. I followed this tutorial on how to create a pattern, which was helpful and gave some tips on how to best make a pattern.
I had some issues with figuring out how to get the background to be continuous. But after researching and playing around with webflow positions, I figured out that the background had to be set to "Sticky" so that it would remain when scrolling. Although the technical side was successful, the aesthetic side was far from it. I think for my final, I will use simple shades for the background image so it doesn't look so crowded.
Experiment 6: Photography
After experimenting with illustration and not achieving the best outcome, I switched to my other alternative - photography. I took these the other day when out for dinner with my phone. The lighting was quite dark inside the restaurant so I edited the images in Lightroom. I used the masking tool to brighten specific areas - it's probably unnoticeable but it makes the images appear bright and prominent.
To maintain authenticity, I want to go to local restaurants around Brisbane and take photos of popular dishes per region which could then go in to suggesting local restaurants in Brisbane where users can go and experience food from different regions in China. I could link the restaurants' location and name - enhancing the community feel.
Experiment 7: Crazy Eights
Crazy Eights is a fast paced, generative exercise to get you to think broadly about a problem. In this case, I experimented with this exercise to quickly brainstorm low-fi wireframe ideas for a section of the website (region panel). I gave myself 8 frames to fill out in one minute intervals - at the end I labelled the thumbnails in red to give more details and also chose 3 that I thought were good designs that could be developed.
3, 6 and 7 were my chosen favourites. I kept playing with the idea of having parallax images of the food, with a content section as well as a scrolling animation either vertically or horizontally across the section. I could see how I could make this in my head - as will be identified in my project scope, I will continue to wireframe and then prototype these designs.
Expanding Topic Research
Before I started wire-framing, I re-watched those Goldthred videos and noted some of the dishes that I thought were worth including in the website in some way. I divided the regions into a table and noted what each region is known for (E.g. SiChuan is known for its spicy, bold flavours and JiangSu is more delicate). I also noted some side dishes that I could perhaps use as extra imagery for the website. (Fish balls, baozi, xiaolongbao etc.) I still need to do more in-depth research about specific dishes and also find restaurants in Brisbane to try out so I can take original photos of the food and use it as a local recommendation to post on the website. Below is the table I made to organise my thoughts on this topic.
Wire-framing and UX research
Before I started to wireframe, I briefly looked into the principles of UX design and found a resource which explained the "TOP WEBSITE LAYOUTS THAT NEVER GROW OLD". I read through the article which provided examples of classic website layouts such as single-columns, grids, magazine and so on. This was really helpful as I was struggling to ideate a way to transform all the information in a stylish yet user-friendly way. Below are my thumbnail wire-frames - I used this process to map out the user flow and what kind of information will be presented. I aim to further these ideas in Figma to develop the overall design. I am happy with these wireframes and I can't wait to prototype.
Summary of the Types of layouts I will be using...
Final stage | Mood board to inspire Figma prototype
During this entire process, I struggled to envision a style for my website. I experimented with more illustrative styles as well as photographic styles. I didn't want to settle on a particular style because I had not yet wire-framed and I didn't want to narrow myself down to one option. Now that I have sketched out a few ideas, I can see a style emerging through those sketches. I collated a bunch of images where I felt inspired by the typography and image choices. I found it interesting because this style is calling back to the first experiment I did back in week 2 which was inspired by 80s-90s design that is still loved today. I like this mood board of images and I want to emulate this aesthetic through my design choices of nostalgia, to communicate with my target audience.
Reflection
The last 6 weeks was a true exploratory process. I found the importance of researching and experimenting, which ultimately lead me to where I am now. I will take these decisions and make a plan on the next phase for this project, which will aim to prototype and develop the website. I want to make this piece something I am proud of and I want to gain knowledge and experience working with new software and techniques. Now, its time for the work to begin.