Collaborative Design Practice - Task 3: Produce Rapid Prototypes, Test and Iterative Designs
10.102023 - 24.10.2023 ( Week 7 - Week 9 )
Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative
Media
Collaborative Design Practice
Task 3: Produce Rapid
Prototypes, Test and Iterative Designs
INSTRUCTIONS
E-Portfolio Requirements Format
- Instructions
- Research
- Process
- Feedback
- Next course of action
- Submission
- Reflection: Experience | Observation | Findings
RESEARCH
Since we are going to add interactive elements and animation to our website, we are required to find some references. Here is one of the references that I found on YouTube. So, for the product page, I was thinking of making it changing its background and graphic element each time we click the left and right buttons which are used to show the other ice cream flavors.
And this is one of the websites from Behance that I chose as a references
PROCESS
Week 7
Logo
In week seven, we had a meeting as usual and discussed several
things. One of them is for refining our logo. Previously, we
got feedback that the letter "O" from our logo does not look
like an oat but is more similar to a teardrop. The member
who is in charge of creating the logo came up with 3 ideas.
Then, each of us voted. These are the ideas.
Figure 1.1 Logo Design New Attempts
The final logo chosen is the third logo. We felt that the logo chosen was in accordance with what TBS requested and the "O" letter represented the oats well. As a result, the overall look of the logo looks simple but can go along with our art direction.
Packaging
Figure 1.1 Logo Design New Attempts
The final logo chosen is the third logo. We felt that the logo chosen was in accordance with what TBS requested and the "O" letter represented the oats well. As a result, the overall look of the logo looks simple but can go along with our art direction.
Packaging
The next thing we discussed was to finalize the packaging design
because SOMAC will do product shooting in week 8. They needed
our design as soon as possible because they had to print first.
Then finally Riko and Jiayee finished their job with 2 final
results. We let TBS choose the design they want. The following
is a design done by Jiayee and Riko.
Figure 1.2 Packaging Design by Jiayee
Figure 1.3 Packaging Design by Riko
In addition, Riko and Jiayee also need to make continuous designs. Initially, they had difficulty because of the lack of space on the packaging after it was filled with ingredients and nutritional lists. They ended up making some designs.
Figure 1.4 Initial Continuous Design
Figure 1.5 Final Continuous Design
Website
Our job on this part of the website is to start coloring the prototype. Here I tried to experiment with some colors of packaging. In addition, we tried to implement our interactive elements from the references we had been looking for in the previous week.
Figure 1.6 Website Coloring Attempt
Week 8
On week 8, we held a meeting to delve into the topic of GIFs and determine the necessary graphic elements for integration into our website. Our UI/UX team initiated discussions with Javin and Caelan to enlist their expertise in crafting GIFs.
Figure 1.7 GIF
Then me, Jiayee and Kim were assigned our respective jobs. Based on the last feedback, I tried to help Jiayee with her homepage in the layout-ing section of promotions and events. Here is my attempt to change the layout.
Figure 1.2 Packaging Design by Jiayee
Figure 1.3 Packaging Design by Riko
In addition, Riko and Jiayee also need to make continuous designs. Initially, they had difficulty because of the lack of space on the packaging after it was filled with ingredients and nutritional lists. They ended up making some designs.
Figure 1.4 Initial Continuous Design
Figure 1.5 Final Continuous Design
Website
Our job on this part of the website is to start coloring the prototype. Here I tried to experiment with some colors of packaging. In addition, we tried to implement our interactive elements from the references we had been looking for in the previous week.
Figure 1.6 Website Coloring Attempt
Week 8
On week 8, we held a meeting to delve into the topic of GIFs and determine the necessary graphic elements for integration into our website. Our UI/UX team initiated discussions with Javin and Caelan to enlist their expertise in crafting GIFs.
Figure 1.7 GIF
Then me, Jiayee and Kim were assigned our respective jobs. Based on the last feedback, I tried to help Jiayee with her homepage in the layout-ing section of promotions and events. Here is my attempt to change the layout.
Figure 1.8 Website Layout Design Attempt
Week 9
On week 9, we need to start doing the website for the
presentation on week 10. I shared a template from Canva and let
the other members fill the slide.
Figure 1.9 Presentation Slide Template on Canva
On week 9, Veyhan accompanied SOMAC to do the product shooting. Later the results will be displayed on the website product page in the product showcase section. These are the results.
Figure 1.10 SOMAC Product Shooting Image
But then me and Jiayee noticed that the color was a bit off, so Jiayee asked me if I could change the coloring on the image. So then, I need to choose 5 images of each ice cream flavor because the template on the section is 5 images. After selecting the images, I started to import them one by one and edit them by putting some filter to fix the color. After finishing it, I put the images into the template.
Figure 1.11 Product Showcase
Because Veyhan finished the promotional video, I chose one of the frames to be selected as the thumbnail that will be shown in the promotional video section on the product page.
Figure 1.12 Promotional Video Thumbnail
Finally, the website is done. Me, Jiayee and Kim planned to
record a video of the website walkthrough and later we put it on
the presentation slide. We met on Discord. Kim is in charge of
recording the video. First, we make sure that the video has
sound and then we start the recording after. We made a few
attempts at recording it but we did it.
These are the product showcase done by Jiayee.
Figure 1.13 Product Showcase
Figure 1.9 Presentation Slide Template on Canva
On week 9, Veyhan accompanied SOMAC to do the product shooting. Later the results will be displayed on the website product page in the product showcase section. These are the results.
Figure 1.10 SOMAC Product Shooting Image
But then me and Jiayee noticed that the color was a bit off, so Jiayee asked me if I could change the coloring on the image. So then, I need to choose 5 images of each ice cream flavor because the template on the section is 5 images. After selecting the images, I started to import them one by one and edit them by putting some filter to fix the color. After finishing it, I put the images into the template.
Figure 1.11 Product Showcase
Because Veyhan finished the promotional video, I chose one of the frames to be selected as the thumbnail that will be shown in the promotional video section on the product page.
These are the product showcase done by Jiayee.
Figure 1.13 Product Showcase
FEEDBACK
Week 7
- The letter "O" on the logo looks more like a teardrop rather than an oat
- The packaging design can include the small mascot
- Rethink again about doing another attempt at the logo design because matter of time and art direction.
Week 8
ILW
Week 9
ILW
Week 9
- Finalize all of the deliverables by this week
- Hand over the deliverables to TBS
- The graphic elements for the website need to be in the same style as the packaging design
- The layout of promotions and events needs improvement because it is not aligned with the art direction
- Promotional Video should use colors and font according to the art direction
Week 10
- The line art for the GIF needs to be aligned with the mascot design
- The packaging design is very cheerful
- Has been very consistent
- All of the members worked very hard
NEXT COURSE OF ACTION
Week 7
- Website: Apply color and refine the design
- Sketch the graphic elements used in the website
- Refine the graphic elements in Adobe Illustrator
- Sketch benefits of Oatlicious icons
- Continue working on the promotional video
Week 8
- Website: Prepare the interactive element for the website (references)
- Finalize the benefits of Oatlicious using Adobe Illustrator
Week 9
- Finalize the website layout design and interactive element
- Record a video walkthrough of the website
- Finish the slides for next week's presentation
Week 10
- Finishing all of the deliverables
SUBMISSION
Task 3:
Presentation Slide
Link: https://drive.google.com/file/d/1S6BsH7A_EJEZbf5AU4Wk0aTk95ubESw_/view?usp=sharing
Presentation Slide (PDF)
REFLECTION
Experience
In task 3, I believe that finalizing
the draft will be a smoother process
compared to starting from scratch.
This is because we have a foundation
to build upon, and our primary goal
is to refine the existing draft.
However, it's important to note that
it may not be entirely problem-free,
as we might need to address feedback
and make improvements. But, these
challenges are welcomed because they
provide us with valuable learning
opportunities.
What brings me joy and satisfaction
is the high level of cooperation
among my team members. Throughout
the project, we have maintained
clear communication and have kept
each other informed about our
progress. While each of us has our
own set of responsibilities, we are
not limited by these roles and are
always ready to assist each other
when needed. This collaboration and
mutual support within the team have
been crucial in ensuring our
project's success and making the
overall experience enjoyable.
Observation
I observed that feedback and
improvement go hand in hand. When I
receive feedback and make changes
based on it, I see the most growth and
progress. I also observed that
teamwork is crucial. Working well with
my team and communicating clearly has
been essential for reaching our goals
and making the journey enjoyable and
successful. Lastly, I observed that
adaptability is key. Being open to
change and ready to adjust to new
circumstances has helped me navigate
unexpected challenges and find
innovative solutions.
Findings
I found that that even when team members have different design styles, we can still reach our desired result by following the initial art direction. The important things are talking to each other and being open to feedback.
Comments
Post a Comment