Collaborative Design Practice - Task 4: Testing & Iteration
20 Nov 2024 - 04 Dec 2024 (Week 9 - Week 11)
Vincent Lee // 0359386
Collaborative Design Practice // Bachelor of Design (Hons) in Creative Media // Taylor's University
Task 4: Testing & Iteration
Following the initial website layout, I invited my groupmates to help refine the
color coordination and integrate the brand's graphic elements. This
collaboration aimed to make the website more cohesive and ensure it aligns with
the brand identity.
The graphic elements, patterns, and color palette of the brand were derived
from the packaging design, while real-life pictures were integrated to bring a
fun, playful touch to the social media feed. The graphics elements help
strengthen the brand identity. Overall, I’m happy with the changes made. I’ve
observed that the latest trend in effective social media marketing focuses on
the feeling the brand evokes, rather than showcasing the product in every
post.
After meeting with the clients, we outlined the tasks to be completed within
the remaining time. Below are the updates on our progress before the Week 10
class:
Completed the entire packaging design, including product labeling with
ingredients, key benefits, and the integration of barcodes and the logo.
Given the product mockups from the clients and Ben sourcing additional
mockups, we were able to enhance the carousel for both the website and social
media feeds. As wallet-style pocket tissues are quite rare in the market, we
faced challenges showcasing the product with our packaging design. Previously,
sizing issues prevented the design from being fully reflected, but with the
new mockups, we're able to present the product more effectively.
Based on the initial discussion regarding the final deliverables, it’s now
time to bring the mascot animation teaser to life. Originally, we planned for
the mascot to have a cool, sick vibe, pulling a tissue shaped like a cloud
from its arm. However, the client requested a more positive, energetic mascot
to better align with the brand message. As a result, the mascot design was
updated to feature food around its mouth, while the rest of the animation will
proceed as originally planned.
Since Joan has completed the other two 3D animation reels, she started
sourcing assets (due to the remaining time) to rebuild the scene based on the
sketches and the client's preferences.
Figure [..] is a rough ideation created after the class ended.
Considering the discovery and consideration stages, I listed out the content
for each post to provide a clearer understanding of how many posts,
carousels, and videos need to be created. This also helps clarify how many
are left to be visualized.
In short, the content planning doesn't differ much from the initial version, but this time, it includes clear direction and labels for each post, outlining who is responsible and what type of content we are creating. This ensures the clients are ready to start their social media marketing. I also made sure to include captions and hashtags for each post to effectively reach our targeted audience.
As a group of creative students, and with the assistance of technology, Sim
has been great in this field, helping with the integration of the product,
as shown in the image below. I would say the outcome turned out quite well,
especially when you zoom out to see the overall picture.
Additionally, as mentioned earlier, people are more drawn to the feelings they perceive from a brand. Therefore, it was important to incorporate real-life pictures and scenarios to effectively communicate the brand's message.
For this attempt, we made sure to incorporate our graphical elements,
integrate the brand's color palette, and maintain consistent font usage
throughout all deliverables, including the website and packaging. Overall,
everything was executed according to the plan outlined in our social media
timeline (Figure).
With Rachel's assistance, we were able to visualize and capture the playful
essence of the brand on the website, enhancing it by ensuring consistent
font usage, color coordination, and advanced layout designs that don’t
strictly adhere to a column system. After refining these elements, I took
part in reviewing the overall consistency, including alignment and spacing,
while also addressing the feedback given. Notably, we replaced the generic
cloud design with our own cloud design for the mascot and graphic
elements.
Left: Before; Right: After
While Rachel focused on the B2C website, I dedicated my time to creating the
B2B website. Although the overall content was similar to the B2C site, the
tone of writing was more professional. This is also reflected in the
website's color palette, which was derived from our brand colors. The deeper
blue-green serves as the main color for the overall design, while warm,
sunny yellow is used for the Call-to-Action buttons, and rich, earthy brown
is used for the text.
To showcase the product's unique selling points, I initially planned to have lines expanding from the product itself. However, this created a visually unbalanced and awkward look. To address this, I decided to search for images with circular angles and overlay them at the bottom of the lines. This adjustment allowed me to achieve the desired effect and meet my expectations.
To demonstrate my idea while considering the clients' preferences—whether to
focus on one website or include both for their business plan—I created a
landing gateway following the teaser animation by Joan. Once the animation
concludes, the gateway appears, allowing users to choose based on their
needs, whether for personal use or business purposes, directing them to the
respective website.
I initially felt disappointed and negative about the outcome, as it didn't meet my expectations. However, seeing the improvements in packaging design, website layout, and social media feeds reignited my motivation. Reflecting on this experience, I realized that everyone, including myself, has unique skills and standards. This taught me to adapt and cope with differences in teamwork. Consulting with Ms. Anis provided reassurance, as she reminded me to focus on progress rather than perfection, especially with so much left to complete.
Later in the week, we had a client meeting where we presented the brand guidelines and walked them through our progress. The session was productive and uplifting, as it motivated us to complete the remaining deliverables.
For the B2B website, the process was somewhat easier as I didn't have to deal with color distribution. However, I struggled with aligning the design to our brand colors, as the chosen red and blue hues initially clashed and failed to convey the desired image for a B2B company. Despite this, I was pleased with the final layout and content, although I wished I had more time to perfect the site further by adding elements like a toggle button to switch between B2B and B2C websites, partnership details, and testimonials to enhance credibility.
The time constraint was a significant challenge, and I worried that my efforts might be perceived as my limits. I wanted to include more but had to prioritize due to deadlines.
While I often focused on the negative aspects of each week, I see this as a process of self-improvement. It was a chance to refine my designer intuition and apply what I’ve learned over the past two years. Even though I initially felt confident during the planning stages, the execution often brought me back to reality, revealing gaps in time management and skill.
Working with clients was a typical experience, with ups and downs. As for my team, I appreciated their expertise in their respective specializations, even if their design styles didn’t fully align with mine. In hindsight, more frequent and open communication within the team would have made the process smoother and more cohesive.
Vincent Lee // 0359386
Collaborative Design Practice // Bachelor of Design (Hons) in Creative Media // Taylor's University
Task 4: Testing & Iteration
Instructions
<iframe
src="https://drive.google.com/file/d/1XvuCSHWO8oGSgIVRrANRM6apD2GmbB-S/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 4: Testing & Iteration
This task involves testing the final product to understand user behavior and
identify areas for improvement. Develop a testing strategy, document results,
and highlight what worked, what needs refinement, and any new insights. Use
videos for clarity, and present findings with a proposal for further iterations
if needed.
Week 9 - 20 Nov 2024
Days before the our meeting with clients, we mainly focus on the improvements
for website and social media feeds.
- Website (Rachel Madeline Purwanto)
|
| Figure 1.1 - Refined Website Design |
- Social Media Feeds Redesign (Agnes Fadhyllah)
|
| Figure 1.2 - New Feeds Layout and Design |
|
| Figure 1.3 - To-do List |
- Packaging Design (Rachel Madeline Purwanto)
|
| Figure 1.4 - Product Labelling |
- Mockups (Benjamin Ng Chii Wen)
|
| Figure 1.5 - Product Mockups |
- Teaser Video Rendering in Blender (Joan Chiam Zi Woei)
.jpeg)
|
| Figure 1.6 - Teaser Animation Sketches |
|
| Figure 1.7 - Progression: Teaser Scene Rendering |
Week 10 - 27 Nov 2024
Continue with the to-do list above, we now carrying out these steps:- Content Planning, Photo Manipulation and Finalised Feeds Design (Vincent Lee, Sim Jian Xiong, Agnes Fadhyllah, Rachel Madeline Purwanto)
Figure [..] is a rough ideation created after the class ended.
Figure 1.8 - Content Ideation
In short, the content planning doesn't differ much from the initial version, but this time, it includes clear direction and labels for each post, outlining who is responsible and what type of content we are creating. This ensures the clients are ready to start their social media marketing. I also made sure to include captions and hashtags for each post to effectively reach our targeted audience.
Figure 1.9 - Refined Timeline and Content Planning
Additionally, as mentioned earlier, people are more drawn to the feelings they perceive from a brand. Therefore, it was important to incorporate real-life pictures and scenarios to effectively communicate the brand's message.
|
| Figure 1.10 - Photo Manipulating |
|
|
Figure 1.11 - Finalised Feeds Designs
|
- Websites Design (Rachel Madeline Purwanto, Vincent Lee)
Left: Before; Right: After
|
| Figure 1.12 - Standardised/ Reduce the Used of Colours |
|
| Figure 1.13 - Overview of the Finalised B2C Website |
|
| Figure 1.14 - Progression 1: Using AI Image Generative in Figma |
To showcase the product's unique selling points, I initially planned to have lines expanding from the product itself. However, this created a visually unbalanced and awkward look. To address this, I decided to search for images with circular angles and overlay them at the bottom of the lines. This adjustment allowed me to achieve the desired effect and meet my expectations.
|
| Figure 1.15 - Progression 2: Angles in Circles |
Considering the spacing, gaps, and content placement, I aimed to ensure
everything was visually balanced. Multiple attempts were needed to find the
right placement for both the lines and the content. The result, as shown
below, is something I am quite satisfied with.
|
| Figure 1.16 - Outcome on Visualising the Product USP |
 |
| Figure 1.17 - Overview of the Finalised B2B Website |
|
| Figure 1.17 - Interactions |
- Mascot/ Teaser Animation (Joan Chiam Zi Woei)
|
| Figure 1.18 - Teaser and Product Reveal Animation |
Task 4 Submission
Below is a compilation of the finalised deliverables, created in accordance
with the initial agreements outlined in Task 1 blog with the clients.
Figure 1.19 - Task 4: Finalised Brand Guidelines, Week 11 (04 Dec 2024)
Figure 1.20 - FOLD Website Prototype, Week 11 (04 Dec 2024)
Figure 1.21 - Fold Social Media Content & Timeline, Week 11 (04 Dec
2024)
Presentation Slides:
Link
Feedback
Week 9
- Meeting with Clients
- The overall deliverables were satisfactory, but due to a change in the target audience, the clients suggested a cleaner web design to better showcase the brand.
- They expressed a preference for a blue theme for the new website and requested the inclusion of a Minimum Order Quantity (MOQ) section and a Quotation Form on the Home Page and Product Details Page.
- Satisfied with maintaining the same layout due to time constraints.
- Pointed out that multiple shades of yellow were being used, recommending narrowing it down to a single shade for consistency.
- Suggested replacing the crying or sobbing mascot in the teaser video with a mascot that has a smudged face.
- Requested integration of the packaging design into the provided mockup.
- Proposed including key product information on the back of the packaging with a bordered area to make the information look cohesive and unified.
Week 10
Ms. Li Lian reviewed the updated deliverables and noted significant
improvements in cohesion, particularly with the consistent application of
fonts, design styles, and elements across the website and social media
feeds.
- She emphasized the need to adjust the design for the new target audience and acknowledged the client's preference for a cleaner web design.
- Although concerned about the limited time remaining, she approved proceeding with the changes since the project had been accepted.
- Highlighted that both versions of the website should be finalized and submitted for the upcoming Task 4 deadline.
Task 4 Submission
- Submit raw files to Ms. Li Lian to demonstrate work progression and authenticity.
- Update the brand guidelines to reflect the final deliverables and submit them.
- Complete the weekly assessments as required.
- Provide a PDF of the updated brand guidelines and final deliverables, including mockups, packaging designs, graphical elements, and patterns in JPG, PNG, and MP4 formats only.
- Raw files will not be handed over to the clients to maintain control over original work.
Week 11
Feedback highlighted that it was a missed opportunity not to elaborate
further on the 3D designs and animations. However, the overall work was
deemed neat and sufficient.
Reflection
Week 9
After the Task 3 presentation, I reached out to Rachel for assistance.
Despite some initial miscommunication and conflict, we managed to resolve
the issues and worked closely together, particularly on color coordination,
which had been a persistent challenge for me. With her help, the web design
became more vibrant and playful, aligning with our intended style. Agnes
also brought fresh designs to the social media feeds, providing a sense of
relief after the presentation's mixed reception.I initially felt disappointed and negative about the outcome, as it didn't meet my expectations. However, seeing the improvements in packaging design, website layout, and social media feeds reignited my motivation. Reflecting on this experience, I realized that everyone, including myself, has unique skills and standards. This taught me to adapt and cope with differences in teamwork. Consulting with Ms. Anis provided reassurance, as she reminded me to focus on progress rather than perfection, especially with so much left to complete.
Later in the week, we had a client meeting where we presented the brand guidelines and walked them through our progress. The session was productive and uplifting, as it motivated us to complete the remaining deliverables.
Week 10
Taking on a leadership role, I focused on refining social media content and
sketching layouts for posts. This was an intense and time-consuming process
but also a valuable learning experience. It pushed me to take on
responsibilities I'd previously avoided and work in a field I hadn't
explored deeply. While I managed to deliver decent results, I realized that
without teamwork and critical moments to guide decisions, I would have
struggled to sustain this effort on my own.For the B2B website, the process was somewhat easier as I didn't have to deal with color distribution. However, I struggled with aligning the design to our brand colors, as the chosen red and blue hues initially clashed and failed to convey the desired image for a B2B company. Despite this, I was pleased with the final layout and content, although I wished I had more time to perfect the site further by adding elements like a toggle button to switch between B2B and B2C websites, partnership details, and testimonials to enhance credibility.
The time constraint was a significant challenge, and I worried that my efforts might be perceived as my limits. I wanted to include more but had to prioritize due to deadlines.
Week 11
Finally, this intense journey came to an end. Although the experience was
challenging, I am grateful for the opportunity to strengthen my design
skills and knowledge. It helped me grow and better understand my strengths,
preferences, and areas for improvement.
While I often focused on the negative aspects of each week, I see this as a process of self-improvement. It was a chance to refine my designer intuition and apply what I’ve learned over the past two years. Even though I initially felt confident during the planning stages, the execution often brought me back to reality, revealing gaps in time management and skill.
Working with clients was a typical experience, with ups and downs. As for my team, I appreciated their expertise in their respective specializations, even if their design styles didn’t fully align with mine. In hindsight, more frequent and open communication within the team would have made the process smoother and more cohesive.
Quick Links
