Collaborative Design Practice: Task 4

20/11/2024 - 04/12/2024

Name: Joan Chiam Zi Woei 

Student ID: 0350211

Collaborative Design Practice

Task 4: Testing & Iteration

---

Instructions:

Module Information Booklet

---

Week 9

Task 4: Testing & Iteration

In preparation for our upcoming client meeting, our primary focus this week has been refining the website and social media feeds to enhance the brand experience and ensure cohesion across all platforms. Below are updates on our progress and team contributions:

Website Refinement

Building upon the initial website layout, Vincent and Rachel worked together to refine the color scheme and incorporate the brand’s graphic elements. This collective effort ensured a cohesive design that aligns with the brand identity and help to communicates its personality effectively.

Figure 1.0 - Refined Website Design

Social Media Feeds Redesign

The social media feed design evolved by integrating graphic elements, patterns, and the color palette derived from the packaging. Real-life imagery was incorporated to infuse a fun, playful tone. These updates not only reinforce the brand identity but also resonate with current social media marketing trends, which prioritize evoking emotions over merely showcasing products. The changes was nice and we're confident they enhance the brand's online presence.

After meeting with the clients, we outlined the remaining deliverables and focused on completing key tasks before Week 10:

Figure 1.1 - To-do List

Packaging Design

The packaging design has been finalized, including product labeling, a detailed list of ingredients, key benefits, barcodes, and logo integration.

Figure 1.2 - Product Labelling for Apple Scent

Figure 1.3 - Product Labelling for Rose Scent

Figure 1.4 - Product Labelling for Baby Powder Scent

Mockups

With the product mockups provided by the clients and Ben’s efforts in sourcing additional options, we successfully enhanced the designs for both the website and social media feeds. Given the rarity of wallet-style pocket tissues in the market, showcasing the product alongside our packaging design initially posed a challenge. Sizing inconsistencies in earlier mockups limited our ability to fully represent the design. However, the new mockups resolved these issues, allowing us to present the product more effectively and highlight its unique features.

Teaser Video Rendering in Blender

We’re now bringing the mascot animation teaser to life based on client feedback. Initially designed with a “cold, sick vibe” where the mascot pulls a cloud-shaped tissue from its arm, the client requested a more energetic and positive character to better reflect the brand.

The updated mascot design now features food around its mouth, embodying a lively and relatable personality. While the rest of the animation follows the original concept, Joan has begun sourcing additional assets to rebuild the scene in line with the updated sketches and client preferences.

Figure 1.5 - Progression on Animating

Figure 1.6 - Teaser Scene Rendering

I've also completed two other 3D animation reels beforehand, ensuring we stay on track despite time constraints.

Figure 1.7 - Advertisement Vid #1 

Figure 1.8 - Advertisement Vid #2

Figure 1.9 - Final Teaser Video

Content Planning, Photo Manipulation & Finalized Feeds Design

Vincent suggested a way to improve the current content planning and timeline slides. He visualize his ideas through simple sketches, creating a content grid, and reorganizing the timeline according to the discovery and consideration stages.

Figure 2.0 - Post arrangement sketch

Figure 2.1 - Post arrangement

Vincent took the lead in planning the content strategy for the discovery and consideration stages of the project. He meticulously outlined the content for each post, providing a clear breakdown of the number of posts, carousels, and videos required. This approach ensured the team had a clear understanding of what had been completed and what still needed to be visualized.

While the overall content plan remained similar to the initial version, Vincent added precise directions and labels for each post, specifying responsibilities and the type of content to be created. This organized approach prepared the clients to seamlessly launch their social media marketing efforts. Additionally, Vincent incorporated captions and hashtags for each post, optimizing the content to effectively reach the targeted audience.

Figure 2.2 - Refined Timeline and Content Planning

Jian Xiong has been instrumental in integrating the product into the overall brand vision, as illustrated in the image below. The results turned out well, especially when viewed from a broader perspective, showcasing the cohesive effort put into the design. 

Figure 2.3 - Photo Manipulating

Websites Design

With Rachel’s assistance, Vincent was able to captured and visualized the playful essence of the brand on the website. Together, they enhanced the design by ensuring consistent font usage, harmonious color coordination, and dynamic layout designs that moved beyond a traditional column-based structure.

Once these elements were refined, Vincent focused on reviewing the overall consistency, paying close attention to alignment, spacing, and addressing feedback provided by the team and clients. One notable improvement was the replacement of the generic cloud design with a custom cloud design that better represented the mascot and aligned with the brand's graphic elements. 

Figure 2.4 - Overview of the Finalized B2C Website

While Rachel is helping out on the B2C website, Vincent focused on the B2B website to make it look more professional instead and this is what he end up with.

Figure 2.4 - Overview of the Finalized B2B Website

Task 4 Submission

Finally, this is a compilation of the finalized deliverables.

Figure 2.5 - Task 4: Finalized Brand Guidelines

Figure 2.6 - Task 4: Final Website Prototype