Collaborative Design Practice - Task 2: Brainstorming Solutions
09 Oct 2024 - 30 Oct 2023 (Week 3 - Week 6)
Week 3 - 09 Oct 2024
Unsure about the typeface and font pairing, I selected a few options and
experimented with different combinations. For the headings and tagline, I
chose a mix of display, sans-serif, and serif typefaces, as each
contributes a unique purpose and aesthetic.
Display fonts closely align with the client’s vision, adding personality. Sans-serif fonts provide a clean, minimalist look, emphasizing readability and simplicity, while serif typefaces introduce a sense of luxury, enhancing both readability and legibility.
Similarly for the packaging, we gathered references to guide our design,
aiming to balance visual appeal with functionality. The graphics will
reflect the scent of the wipes, giving customers an immediate sense of the
product experience.
A newsletter panel was also incorporated based on my observations of various e-commerce websites. This feature allows users to subscribe for the latest brand updates, while also helping to boost user retention over time.
3. Packaging Design
These designs were developed based on the client's feedback. Our approach integrates cloud elements with the product’s flavors/scents, ensuring the design conveys both information and the light, soft qualities of the tissue. Meanwhile, we maintained a sense of cuteness in the logo and product details.
Explorations were made based on the initial proposed Scandinavian design
style. Scandinavian design typically emphasizes minimalism, simplicity,
and functionality, but it also includes abstract patterns across the
packaging. On the far right, we explored a more direct approach to convey
the product's scent by displaying a sliced apple resting on a cloud. This
design also aligns with the client's emphasis on including key product
information, such as ingredients and barcode.
During our meeting, we discussed integrating both seals with the cloud to enhance the design’s appeal, aligning with our designer’s initial mascot sketch. In this concept, the mascot sneezes and takes a tissue from another cloud. This time, however, users would be taking the tissue directly from the cloud element.
The clients expressed concerns about potential user confusion over distinguishing the wet and dry sections. To address this, they suggested adding water droplet icons on the side indicating the wet tissue, while the dry side could feature a simple cloud paired with brighter colors. However, the clients also mentioned potential cost implications, as adding these elements could increase material requirements for the packaging.
Reflection (Personal Thoughts):
I believe that people have an intuitive understanding, almost a cognitive mechanism, where they associate lighter elements with the top and heavier ones with the bottom. Given this, users should be able to tell the wet and dry sections apart naturally when handling the product.
We're also balancing the client’s suggestions with our own insights, trying to make a practical decision that respects both the design vision and production considerations.
For the back of the packaging, we were reminded to include essential product information and the barcode. The client also requested the addition of a QR code.
This is my attempt at the Home Page design, which will be sent to the
clients for confirmation.
The color scheme is primarily black and white, chosen for its timeless quality. These colors will primarily serve the borders, buttons, and text. The design style is playful and bold while maintaining a minimalist approach.
Week 4
- Consultation with Ms. Li Lian
We are tasked with continuing our remaining progress and preparing for our next presentation. In the meantime, we quickly scheduled a meeting with our clients to receive feedback on our current ideas before moving forward.
I thought there would be fewer people involved in this module, but I realize there are even fewer UI/UX people this semester, which makes it harder to ask for help. I’m unsure if my expectations are too high or if I’m simply not satisfied with my current wireframe layout, which feels a bit messy and underwhelming. Additionally, the workload feels heavy since I now have to handle the graphic elements for the website, which was previously managed by the graphic team. However, I understand this is part of a UI/UX designer’s role. Lastly, I need to create the slides for my section since I’ll be presenting my part, and I know the flow and rationale behind the design best.
- Meeting with Clients
The meeting went well, as usual. However, we encountered differing opinions and suggestions from the clients regarding the packaging and design. Lessons learned—we understand it’s important to know what the clients want, but it’s also crucial to keep them aligned with their brand objectives and guide them back when needed.
Ultimately, we decided to incorporate the clients' inputs while also presenting our own explorations and solutions to address their concerns.
- Wireframe
After the client meeting, I spent time processing the feedback while keeping the brand objectives as the top priority. I decided to create one full-page high-fidelity wireframe (without interactions) for this submission to gather client input and ensure we’re aligned in vision. The process required a lot of ideation and research, as I’m still gaining experience with different design styles and website layouts. After several attempts, I noticed the clients preferred minimalist, playful modern designs with thicker lines, shapes, and patterns.
Once I understood the concept, my goal was to maintain visual balance and avoid clutter that didn’t serve a purpose.
Upon completing the website, I reflected on my design and used ChatGPT for feedback. It mentioned that my design leaned more toward playful modern than Scandinavian, as Scandinavian typically uses sans-serif fonts, neutral palettes, and natural textures. Regardless, I’ve decided to present the current design to Ms. Li Lian and the clients before making any further adjustments to achieve a more Scandinavian style if necessary.
There are no regrets, but I will definitely address this issue in our next presentation. Additionally, when I shared the work with a designer friend, they pointed out that the layout felt stiff and rigid, lacking a sense of fluidity. This is something I noticed in my previous projects as well. While the layouts look good, they fail to capture the brand’s essence and the customization I aimed for. They don’t reflect the visual research and references I had initially planned. Moving forward, I’ll explore different layouts and compositions, along with more thorough research and careful font selection to improve this aspect.
09 Oct 2024 - 30 Oct 2023 (Week 3 - Week 6)
Vincent Lee // 0359386
Collaborative Design Practice // Bachelor of Design (Hons) in Creative Media
// Taylor's University
Task 2: Brainstorming Solutions
Instructions
<iframe
src="https://drive.google.com/file/d/1XvuCSHWO8oGSgIVRrANRM6apD2GmbB-S/preview"
width="640" height="480" allow="autoplay"></iframe>
List of deliverables for Week 4:
• mood board (including colour palettes, examples, range of fonts,
illustrations, visuals, inspo)
• character/ mascot sketches (showing personality and also various
sketches and diff designs of the character)
• sketched out storyboard for ex promotion video introducing the
brand
• website (potential wireframe)
• logo (inspo, sketches)
Task 2: Brainstorming Solutions
Use the defined human-centered problem statement to "think outside the box" and
explore new solutions. Apply ideation techniques like Brainstorming,
Brainwriting, Worst Possible Idea, or SCAMPER to encourage creative thinking and
broaden perspectives. After completing the ideation process, present your
findings to an expert for review.
The tasks and roles were assigned among members, and I will be focusing on
the development of website. But this is the overall progressions for the
brand branding and design process and progressions.
- Mood Board
|
| Figure 1.1 - Mood Board 1 |
|
|
Figure 1.2 - Mood Board 2 |
1. Logo and Mascot
As requested by the clients, we incorporated keywords like 'cloud' and
'softness' into the logo concept. We explored references that reflect both
elements, along with an origami-inspired heart-shaped leaf to represent the
brand's commitment to sustainability.
|
| Figure 1.3 - Inspiration/ References |
The clients wanted a cloud element in the logo to convey a sense of
'softness,' aligning with the gentle, comforting qualities of their tissue
brand.
|
| Figure 1.4 - Initial Exploration Ideation Sketches |
Our mascot is inspired by the simple act of using tissues when sneezing or
dealing with a cold, symbolising how people naturally clean up and fold
the tissue in half. The cloud shape represents the softness, reflecting
the gentle care our tissues provide.
|
| Figure 1.5 - Logo Designs Exploration 1: Cloud (with different fonts) |
Our mascot takes the form of a paper crane, embodying both care and
convenience. Imagine when you need a tissue, the paper crane gracefully
flies to you and gently unfolds itself, ready to be used.
|
| Figure 1.6 - logo design exploration 2: Paper Crane |
2. Font Pairing
After analyzing the references and reviewing the client's brief on their
desired website style, it was clear they were aiming for a retro, playful,
modern vibe. They emphasized using a cloud as the brand's central element,
so I focused on bold, curvy, and chunky fonts to align with this theme.
Ultimately, we chose 'Kooky Cloud' for its versatility.
|
| Figure 1.7 - Font Options for Logo and Title |
Display fonts closely align with the client’s vision, adding personality. Sans-serif fonts provide a clean, minimalist look, emphasizing readability and simplicity, while serif typefaces introduce a sense of luxury, enhancing both readability and legibility.
|
| Figure 1.8 - Font Options Mainly for Website |
3. Packaging Design
|
| Figure 1.9 - Packaging References |
Additionally, we plan to integrate the cloud element into the seal,
reinforcing the brand’s identity while maintaining a clean and modern
look.
|
| Figure 1.10 - Sketches for the Packaging Design |
4. Colour Palette
Based on the current product scents, we developed a colour combination
for each one, which will be applied once the final packaging design is
decided.
|
| Figure 1.11 - Colour Palette for Different Scent |
For the website, I chose black and white as the primary colours due to
their timeless elegance, aligning with the clients' preferences.
|
| Figure 1.12 - Primary Colour for Website |
5. Website Analysis
To enhance the UI/UX, I analysed the current website and identified key
issues. This helped me pinpoint areas for improvement and determine how
to integrate additional content for a better user experience. This
process also allowed me to refine our content strategy, making it more
user-centric and aligned with the brand’s objectives.
Figure 1.13 - Current Website Analysis [Link]
6. Sitemap and Content Planning
Browsing through different e-commerce websites and analysing their
structures, I identified the key content that needs to be included on each
page of our website. For the homepage, a hero section is essential to
immediately capture attention and showcase our brand's main offerings.
I focused on the flow of information, product presentation, and overall
user experience. By studying the layout of product descriptions, imagery,
navigation, and customer reviews, I was able to pinpoint what content
works best to engage users.
|
|
|
|
| Figure 1.15 - Header and Footer Content |
7. Wireframe
The entire website consists of five pages, as presented. Additionally, we
believe it would be beneficial to utilize the animations created for our
social media as the splash screen for the website. This would add playful
interactions while reinforcing the brand identity. A newsletter panel was also incorporated based on my observations of various e-commerce websites. This feature allows users to subscribe for the latest brand updates, while also helping to boost user retention over time.
|
|
Figure 1.16 - Low-Fidelity Wireframe
|
Week 4 - 16 Oct 2024 (Pre-Finalising Design Direction)
After consulting with Ms. Li Lian and meeting with our clients based on
the above design direction, they have provided us valuable inputs that
require us to take into considerations. And below are the changes/
improvements made and to finalise it for our next week
presentation.
1. Logo and Mascot
After consulting with the client, we developed a second set of idea
sketches, as the client felt that a ‘sick’ cloud did not align with their
brand and gave a negative impression. In this round, we experimented with
positive and negative space in the logo, which is why it appears in black.
Moving forward, we will refine this concept, incorporating brand colors
and the selected font.
|
| Figure 1.17 - More Logo Development, Week 4 (19 Oct 2024) |
These designs were developed based on the client's feedback. Our approach integrates cloud elements with the product’s flavors/scents, ensuring the design conveys both information and the light, soft qualities of the tissue. Meanwhile, we maintained a sense of cuteness in the logo and product details.
|
| Figure 1.18 - Packaging Exterior Design 1, , Week 4 (19 Oct 2024) |
|
| Figure 1.19 - Packaging Exterior Design 2, Week 4 (19 Oct 2024) |
During our meeting, we discussed integrating both seals with the cloud to enhance the design’s appeal, aligning with our designer’s initial mascot sketch. In this concept, the mascot sneezes and takes a tissue from another cloud. This time, however, users would be taking the tissue directly from the cloud element.
The clients expressed concerns about potential user confusion over distinguishing the wet and dry sections. To address this, they suggested adding water droplet icons on the side indicating the wet tissue, while the dry side could feature a simple cloud paired with brighter colors. However, the clients also mentioned potential cost implications, as adding these elements could increase material requirements for the packaging.
I believe that people have an intuitive understanding, almost a cognitive mechanism, where they associate lighter elements with the top and heavier ones with the bottom. Given this, users should be able to tell the wet and dry sections apart naturally when handling the product.
We're also balancing the client’s suggestions with our own insights, trying to make a practical decision that respects both the design vision and production considerations.
|
| Figure 1.20 - Packaging Interior Design, Week 4 (19 Oct 2024) |
For the back of the packaging, we were reminded to include essential product information and the barcode. The client also requested the addition of a QR code.
|
| Figure 1.21 - Key Product Information |
6. Sitemap and Content Planning
We made minor adjustments to the sitemap and content plan to emphasize the
innovative aspects of the product. We believe this will help prevent
confusion and satisfy users’ curiosity about the product and the business.
This approach also positions the business as thoughtful and focused on
enhancing the user experience.
 | |
|
7. Wireframe
As I still have some remaining time, I gathered all the references
provided by the client and analyzed the design style of each before I
began exploring the wireframe with color, image, and content integration.
|
| Figure 1.23 - Website Design References |
The color scheme is primarily black and white, chosen for its timeless quality. These colors will primarily serve the borders, buttons, and text. The design style is playful and bold while maintaining a minimalist approach.
Figure 1.24 - High-Fidelity Wireframe_Home Page (1st Attempt), Week 4 (20 Oct 2024)
Task 2 Submission
Figure 1.25 - Task 2 Project Document PPT, Week 5 (23 Oct 2024)
Canva Whiteboard: Link
Presentation Slides:
Link
Task 2 Project Document Submission:
Link
Feedback
Week 4
- development and process is important. Remember to write the rationale
for each decision.
Week 5
- For the presentation itself, we should start with a brand introduction instead of beginning with the mood board. Treat it as if we are presenting directly to our clients. This should include more details and information, elaborating as clearly as possible.
- Ensure that the microphone quality is good, as it currently does not reflect well.
- Encompass the establishment of the initial and basic ideation process.
- We can only provide digital artwork; no physical packaging or actual product will be produced or carried out.
Reflection
- Consultation with Ms. Li Lian
We are tasked with continuing our remaining progress and preparing for our next presentation. In the meantime, we quickly scheduled a meeting with our clients to receive feedback on our current ideas before moving forward.
I thought there would be fewer people involved in this module, but I realize there are even fewer UI/UX people this semester, which makes it harder to ask for help. I’m unsure if my expectations are too high or if I’m simply not satisfied with my current wireframe layout, which feels a bit messy and underwhelming. Additionally, the workload feels heavy since I now have to handle the graphic elements for the website, which was previously managed by the graphic team. However, I understand this is part of a UI/UX designer’s role. Lastly, I need to create the slides for my section since I’ll be presenting my part, and I know the flow and rationale behind the design best.
- Meeting with Clients
The meeting went well, as usual. However, we encountered differing opinions and suggestions from the clients regarding the packaging and design. Lessons learned—we understand it’s important to know what the clients want, but it’s also crucial to keep them aligned with their brand objectives and guide them back when needed.
Ultimately, we decided to incorporate the clients' inputs while also presenting our own explorations and solutions to address their concerns.
- Wireframe
After the client meeting, I spent time processing the feedback while keeping the brand objectives as the top priority. I decided to create one full-page high-fidelity wireframe (without interactions) for this submission to gather client input and ensure we’re aligned in vision. The process required a lot of ideation and research, as I’m still gaining experience with different design styles and website layouts. After several attempts, I noticed the clients preferred minimalist, playful modern designs with thicker lines, shapes, and patterns.
Once I understood the concept, my goal was to maintain visual balance and avoid clutter that didn’t serve a purpose.
Upon completing the website, I reflected on my design and used ChatGPT for feedback. It mentioned that my design leaned more toward playful modern than Scandinavian, as Scandinavian typically uses sans-serif fonts, neutral palettes, and natural textures. Regardless, I’ve decided to present the current design to Ms. Li Lian and the clients before making any further adjustments to achieve a more Scandinavian style if necessary.
Week 5
After compiling all the improvised sketches, including the additional one
based on client feedback, the project felt rushed for our graphics team,
but they still delivered! This time, the presentation went better than our
last, though we completed it at the last minute again. After receiving
feedback from Ms. Li Liam, I realized we had issues with presenting our
artwork and the overall flow of the presentation. I believe part of the
problem was the lack of proper planning and rehearsal. I also felt nervous
and rushed through my part, failing to explain my work and deliverables in
detail.There are no regrets, but I will definitely address this issue in our next presentation. Additionally, when I shared the work with a designer friend, they pointed out that the layout felt stiff and rigid, lacking a sense of fluidity. This is something I noticed in my previous projects as well. While the layouts look good, they fail to capture the brand’s essence and the customization I aimed for. They don’t reflect the visual research and references I had initially planned. Moving forward, I’ll explore different layouts and compositions, along with more thorough research and careful font selection to improve this aspect.
Material
1. Google Font: Link
2. Guidelines for a perfect website wireframe:
Link
3. Best Free Sans-Serif Google Fonts of 2021:
Link
Quick Links
Task 1:
Insight to Action
Task 3: Testing & Refinement
Task 4: Testing & Iteration
