Minor Project - SILIBLES

26 Apr 2024 - 26 July 2024 (Week 1 - Week 14)

Vincent Lee // 0359386

Minor Project // Bachelor of Design (Hons) in Creative Media // Taylor's University

SILIBLES

---

INDEX

Final Submission

- Project Tracking Document

- Presentation Slides [Week 9]

- MIRO Board

- Gantt Chart

- Website Prototype and Walkthrough Video

- Presentation Slides [Week 14]

- User Testing and Feedback

Feedback & Reflection

---

Instructions 

<iframe src="https://drive.google.com/file/d/16D714G19_8O2p7lnB6nhrRBLbzdKiAkH/preview" width="640" height="480" allow="autoplay"></iframe>

<iframe src="https://drive.google.com/file/d/1MwG9pHp25dJRK8yKCFdrk_7E7Atq_05C/preview" width="640" height="480" allow="autoplay"></iframe>

Project Progression

Week 1 - Module Briefing and Group Formation

Given several options to work on and a brief on the information and requirements of each topic, we were able to find our interest and understand how each specialisation could benefit the topic itself.

Week 2 - Contextual Research & Clients Meeting

After forming the group, we conducted a meeting and prepared materials and questions for the upcoming client meeting. Since we had not received exact information about the product, we also brainstormed several ideas to enhance the services and products aimed at satisfying the consumer's purchasing experience.

Figure 1.1 - Preliminary Research and Preparation for Clients Meeting

After the meeting with clients, each member was assigned the task of conducting research and analysis on their respective topics. My research mostly covered 4 sub-categories/ sections: 

1. Market research and opportunities for silicone food ware products. 
2. Different grades of silicone for different usages. 
3. Competitor analysis of existing food ware brands.
4. Brands that are well-known for their marketing and advertising strategies, which may be applicable to our case. 

Figure 1.2 - Contextual Research 

[latest update: Week 4 (14 May 2024)]

Week 3 - User Personas and Data Collection Methods

Advised to study marketing and advertising strategies from any successful food ware brands, in order to apply to our case. In addition, we created several user personas in ease of creating questions that may help us to identify the needs and the obstacles that frustrate our targeted users.  We also joined to a community in Facebook, called Bento Mama, hoping them could accept our invitation as an interviewee.

Notes:

• establish goals
• identify Pain points/ obstacles
• Survey
• empathy stage no need to solve problems yet just walk in their shoes. 
• Fun features/ playful - interact them to eat the food they don’t like 
• Customisable - chopstick with helper, attach and detach from the lunchbox, divider can move around 
• Look for specific community - Facebook

Figure 1.3 - User Personas, Week 3 (07 May 2024) 

Figure 1.4 - Targeted Audience [groups] & Preparation of Survey Questions

Week 4 - Distributing Surveys & Analyse Data Collected

Selecting suitable questions for our questionnaire and discussing them with Mr. Mike. Upon confirmation of the questionnaire questions, various channels for distributing the questionnaire were utilized, such as forums on Reddit. Since our target audience primarily consists of working adults, specifically mothers who prepare lunchboxes for their children to take to school, hikers, and hobbyist bakers, we need to collect more responses from them.

In this survey, we divided into 6 categories: 

1. Demographics
2. Usage Patterns
3. Motivations and Preferences
4. Participation and Purchasing Behavior
5. Storage and Issues

Figure 1.5 - Finalised Survey Questions

[created and posted on Week 4 (14 May 2024)]

 

Figure 1.6 - Revised Survey Data Compilation

[latest update: Week 6 (28 May 2024)]

Week 5 & 6 - Interviews and Empathy Mapping 

Mr. Mike analyzed and guided us with the collected survey data. Following that, we were tasked to based on the collected data, select 5 respondents for quantitative analysis to devise strategies for further convincing them to purchase within the premium price range. Additionally, we had the opportunity to interact with the product we are working on, testing its durability. This was crucial as durability emerged as one of the most highlighted aspects from our survey participants.

Upon collecting data through survey and interviews, Mr. Mike provide guidance on  ways to improve the clarity of our data collected  of our data and 

Weekly to-do:

1. Fill in Empathy Map 
2. Create User Personas and Users Stories [data and insight]
3. Users Journey Map [procedure of using the product, to identify the gap and come out with solutions] 

---

1. Empathy Map

We transcribed all the interviews and combined the data from both surveys and questionnaires. This comprehensive data set enabled us to fulfill the empathy map requirements, providing deep insights into user needs, pain points, and preferences. The empathy map allowed us to visualize the thoughts, feelings, and experiences of our users, helping to inform our design decisions and marketing strategies.

Figure 1.7 - Empathy Map, Week 6 (30 May 2024) 

2. User Personas and User Stories

With the transcribed interviews and combined data, we completed the empathy map, which played a crucial role in developing our user personas. These personas reflected the diverse needs and preferences of our target users:

1. A mother who values easy-to-clean, secure food containers for her family.
2. A working adult who seeks portable and environmentally responsible food containers.
3. A student who prioritizes convenience and keeping food warm on campus.

Figure 1.8 - User Personas and User Stories, Week 6 (30 May 2024)

3. User Journey Map

Following the development of user personas, our next steps involved creating detailed journey maps for each persona. These tools would help us understand the specific scenarios in which our products would be used and identify further opportunities for improvement.

Figure 1.9 - User Journey Map, Week 6 (01 Jun 2024)

Week 7 - Insights Discovery, The Problem Statement and How Might We...? 

In week 7 consultation, Mr. Mike reviewed our user journey map and highlighted several issues that needed to be addressed for each persona. Moving forward, he suggested that each group member contribute five ideas based on the research data, with overlapping ideas forming the main project themes. The "How Might We..." section should guide our project goals, focusing on design elements such as the brand name, logo, and colour scheme.

Figure 1.10 - Insights Discovery, The Problem Statement and How Might We...?, Week 7 (04 Jun 2024)

Figure 1.11 - Categories of Issues, Week 7 (07 Jun 2024)

Week 8 & 9 - Design System and Proposal Preparation

1. Moodboard

In week 7 to week 8, our team held discussions to define brand objectives and research ideas and styles for rebranding and website creation. 

Figure 1.12 - Visual and Art Direction, Week 8 (11 June 2024)

As the UI/UX specialist, I created a mood board to convey my vision for the website, compiling various styles and layouts with detailed descriptions to explain my choices. This helped Mr. Mike and my team members understand my vision. 

Figure 1.13 - Website Layout and Style Reference, Week 8 (11 June 2024)

Meanwhile, Jiamin and Xinyan, specializing in Graphic Design, focused on developing the brand identity. Their expertise was crucial in creating a strong brand identity and message that resonates with our users.

Figure 1.14 - Design System, Week 8 (11 June 2024)

After that, we consulted with Mr. Mike to present our mood board, brand logo attempts, and color scheme ideas. Mr. Mike provided feedback, noting that our brand logo needed further research and a more creative approach. While he found Logo Style 1 interesting due to its integration of the alphabet "S," he pointed out that the pattern was too similar to the concept of Yorokobi and stressed the importance of avoiding visual plagiarism.

Figure 1.15 - Logo Style 1, Week 8 (11 June 2024)

2. Content Planning and Sitemap

After weeks of familiarising myself with the brand and its products, I have compiled a comprehensive list of necessary pages for the website and thoughtfully considered the content for each section. By thoroughly understanding the brand's identity and values, I ensured that each page would effectively communicate the product offerings and engage the target audience. This strategic planning laid a strong foundation for creating a user-friendly and visually appealing website that aligns with the brand's goals.

Figure 1.16 - Sitemap Planning,Week 8 (16 June 2024)

After that, we discussed combining some of the content to make room for additional material. Additionally, I conducted more visual research and competitor analysis of other foodware brands. This allowed me to expand the details for each page and section, helping me determine the specific content I wanted to include in my prototype.

By analyzing competitors, I gained insights into effective design strategies and identified areas for improvement in our own content. This comprehensive approach ensured that the website would not only be visually appealing but also user-friendly and aligned with industry standards.

Figure 1.17 - Refined_Sitemap, Week 8 (16 June 2024) 

3. Wireframe

Figma Link: Attempt 1_Low-Fidelity Wireframe

Figure 1.18 - Low-Fidelity Wireframe, Week 8 (16 Jun 2024)

A revised version was made after receiving feedback from my friend, who is also a target audience of our brand. For more details on the improvements been made, kindly visit the slides in Final Submission.

Figma Link: Revised_Low-Fidelity Wireframe

Figure 1.19 - Refined_Low-Fidelity Wireframe, Week 8 (16 Jun 2024) 

Week 10 - Brand Strategies and Implementation

In today’s lecture, we had a discussion with Mr. Mike to determine the next steps. The customer journey map was reviewed among team members and presented to Mr. Mike to identify any gaps or unclear information. Meanwhile, we were also tasked with planning content and starting the process of building the prototype, including packaging design, posters, manuals, and the website for our brand. Mr. Mike emphasized the importance of distributing roles and tasks equally among team members.

 

Figure 1.20 - Customer Journey Map, Week 10 (25 Jun 2024)

After that, we were also tasked with constructing a Gantt chart to list all the to-dos and to track the progress of each team member after specific tasks had been assigned. Rather than simply distributing tasks, we aimed to ensure that everyone could perform and implement their specialized skills in this project. This approach not only enhances our portfolios but also ensures that everyone has the opportunity to showcase their knowledge and expertise in their own unique ways.

Figure 1.21 - Gantt Chart, Week 10 (25 Jun 2024)

Week 11 & Week 12 - Website Developing and Prototyping

During these two weeks, team members focused on photoshopping product images to match the website's style. This task was challenging due to the varying colors and orientations of the original product photos. They had to carefully consider the color tones to ensure consistency and visual appeal across the site. The process required attention to detail and creativity to harmonise different images, ultimately enhancing the overall aesthetic of the website.

 

Figure 1.22 - Images and Content, Week 11 & 12

By the end of Week 12, I created the high-fidelity wireframe for our brand's website and made several amendments based on feedback from my group mates and friends.

Figure 1.23 - Attempt 1_Hi-Fi Wireframe, Week 12

In the 2 attempt, I have made these changes: 

• Incorporate the brand logo with the brand name on the Home Page top navigation bar.
• Reposition the headline and CTA button on the Hero Image.
• Change the copywriting of the title, header, and description.
• Adjust font weight, alignments, and spacing.

Hi-Fi Wireframe: Figma Link

Figure 1.24 - Attempt 2_Hi-Fi Wireframe, Week 12

Week 13 - Prototype Refinement

Continuing from last week, I worked on our brand's website. Unfortunately, I discovered that the screen size was incorrect, so I had to rebuild my design before creating the prototype.

Building the interactive elements took a lot of time and effort to achieve the desired effects. As proposed, I aimed to create an image carousel with automatic expanding and hover effects on the categories. Below are the details of how the components were built, along with other elements such as buttons.

Most of the components created include these types of interactive features:
- Hovering (image and text expand, button state changes, image carousel)
- Click (product image, buttons and icons)
- Mouse Enter/Leave (product carousel)
- After Delay (products carousel)
- On Drag (scroll bar)

Figure 1.25 - Component: Product Carousel and Reviews, Week 13

Figure, 1.26 - Component: Navigation Bar, Icons and Buttons, Week 13

As the screen size changed, the images and text, including icons and buttons, were adjusted to fit the website's new column layout. Creating the column layout allowed me to ensure proper alignment and spacing between contents and sections, resulting in a consistent design and enhanced user experience while navigating through our website.

Figure 1.27 - Columns, Week 13

While the prototype was still in progress, we consulted Mr. Mike in class. He suggested that including animations and transitions would be costly for a new brand/company. Hence, I was advised to make the Home Page interactive, while keeping the rest static, with a top navigation bar that still has animations. The clickable images, buttons, and links to other pages aim to show the steps/flows of how the website will look and how users will interact with it.

Below are the complete designs attached in .pdf format and the prototype in Figma. These include descriptions as an introduction to the 5 pages, providing clients and users with an overview of the website.

 

Figure 1.28 - Refined UI Design and Animation Planning

Introduction to the 5 Pages:
Page 1 - Home:

• Features interactive elements such as an image carousel with hover effects.
• Includes a top navigation bar with animations.
• Designed to engage users with a dynamic and welcoming introduction to our brand.

Page 2 - About Us:

• Provides information about our brand's mission, values, and story.
• Static content with a focus on readability and user engagement through storytelling.

Page 3 - Shop:

• Displays product categories with clickable images and buttons.
• Static layout designed to showcase our products clearly and attractively.

Page 4 - Product Details:

• Detailed information about individual products.
• Includes images, descriptions, and specifications with static interaction elements.

Page 5 - Resources:

• Contains articles, tips, and FAQs related to our products.
• Static layout with clickable links to provide users with additional information and support.

These descriptions and the accompanying designs aim to provide a comprehensive view of our website, illustrating how users will navigate and interact with the different sections.

Figure 1.29 - Prototype, with one full page of animations

Week 14 - Final Refinement and Preparation for Final Submission

Each member continues to focus on their respective tasks, making necessary refinements to ensure everything is ready for the upcoming project submission and final proposal presentation. 

I added a loading screen and integrated a CTA button in the product benefits section. This approach not only encourages users to take action but also allows them to directly navigate to the Shop page without scrolling back to the top of the screen.

Figure 1.30 - Loading Screen with loading animation and integration of brand logo.

Figure 1.31 - Product Benefits section integrated with a CTA button.

---

Final Submissions

- Project Tracking Document: Link

Figure 2.1 - Project Tracking Document

- Presentation Slides [Week 9]: Link

Figure 2.2 - Brand Proposal Presentation

- MIRO Board: Link

 

Figure 2.3 - Miro Board

- Gantt Chart: Link

Figure 2.4 - Gantt chart (progress tracking)

- Website Prototype in Figma: Link

Figure 2.5 - SILIBLES Website Prototype

- SILIBLES Website Walkthrough Video

Figure 2.6 - SILIBLES Website Walkthrough Video

- Presentation Slides [Week 14]

Figure 2.7 - Brand Final Submission Proposal

- User Testing and Feedback: Link

Figure 2.8 - Website Design User Feedback

---

Feedback & Reflection

*kindly refer to Project Tracking Document.

Materials

1. Tool for Transcription: YouTube Tutorial
- A great tool to assist with transcriptions.

2.Material 3 Design Kit: Figma Community
- A comprehensive design kit for Material 3.

3. Wireframing for Landing Page: Figma Sample
- A useful guide for creating wireframes for landing pages.

4. Footer Design: Justinmind Blog
- Tips and examples for designing effective website footers.

5. Fylla Template: Gola Templates
- A versatile template for various design needs.

6. Layout Grid: Figma Community
- Guidelines for using layout grids in your designs.

7. Phosphor Icons: Phosphor Icons
- A collection of flexible and stylish icons for your projects.

8. Loading Animation: Lottiefiles

- The world's largest free, ready-to-use, customizable animation library