Labels

Collaborative Design Practice / Task 3

10.10.2023 - 24.10.2023(Week 7 - Week 9)
Chang Jia Yee / 0350402 / Bachelor of Design in Creative Mediac
Collaborative Design Practice
Task 3: Produce rapid prototypes, test and iterative design

INSTRUCTION


Group 3 Oatlicious

  • 0349223 Ny Vey Han (Leader)
  • 0349352 Teo Javin
  • 0350402 Chang Jia Yee
  • 0352548 Lim Jia Yet 
  • 0349760 Michelle Angeline
  • 0342714 Caelan Ng 
  • 0351470 Riko Matsuyama

RESEARCH
Website

Video 1. Tutorial of website interactive part


Video 2. Tutorial of website interactive part

Oatbedient: https://oatbedient.com.my/pages/who-we-are
This is a food website based on oats. I refer to this website as a reference and inspiration. The website includes interesting interactive design and the art style that is very cute and simple. The overall feeling of the website is harmonious and vivid.

PROCESS

What I did from week 7 - week 9

  1. Final masscot done in AI
  2. Packaging design
  3. Graphic elements used in website and packaging
  4. Website layout and interaction of home page and product page
  5. Product showcase layout
  6. Website showcase layout

Week 7
Meeting Agenda (time spent 40mins)

  1. Confirm packaging design detail
  2. Refine our brand logo
  3. Refine the logo, add detail on the first letter "O" of Oatlicious
  4. Discuss the continuous design of packaging


    Logo
Fig 1. Three logo design on packaging design

After the discussion and voting of our whole group, we chose the middle one as our final logo design. The reason for choosing it is that it is simple but nice, and it will not be abrupt and strange when put together with other words. The shape of this one on the left will be more controversial because at first glance it looks a bit like the shape of tears/water drops, which may mislead consumers. The design on the right may give people a little heavy feeling because the whole "O" is filled with colour, which makes the words behind it light and has a top-heavy feeling.



Packaging
Fig 2. Layout 1 I did


Fig 3. Layout 2 done by Riko

Because SOMAC said that they need to have product shooting for week 8, they asked us to finish the packaging design as soon as possible so that they could print out the cups for shooting, so Riko and I finished our design in a hurry at week 7. Finally, we finished 2 layout designs, and then let TBS choose which layout is more in line with their brand. In layout 1 and layout 2, TBS chose layout 1 as their final packaging design.

Continuous design of packaging

Fig 4. Initial idea of continuous design


Fig 5. Final idea of continuous design

At first, Riko and I were struggling with the idea of this continuous design, because there was not much room left after putting the ingredients list and some other information required by TBS. Plus, we don't want the overall packaging design to be too complicated and complicated. The above two kinds of sketches are our initial ideas, but they feel that they will take up a lot of space, and the final effect is not what we want to express, so this has made us struggle for a long time. Finally, I am quite satisfied with the continuous design we finished, which is the result of my joint work with Riko. I came up with the original idea, which is to connect each cup in the form of an oat, and then our mascot and oat have some simple interactions. Then I gave my first draft idea to Riko, and she finished the final design of this edition.


Week 8
Meeting Agenda (time spent 30 mins)
  1. Discuss about the gif of website and confirm the amount of the gif we need in website
  2. Update the progression of promotional video
  3. Confirm graphic elements we use in website
  4. Assign the job of the website pages
Website

Fig 6. Refine home page

I made some changes to the website's home page based on the feedback that Miss Lilian gave us. The falling ice cream may be the first element that comes to mind in ice cream-related products, which is relatively lack of creativity. Miss Lilian suggested that we can change it to fluffy cloud in our packaging design, which not only can be linked with the packaging design, but also reflects the integrity. It can also deepen users' exclusive impression of our brand.
Fig 7. Refine promotion & event section

For the promotion and event section, my first design at the beginning was not very harmonious in the arrangement of blank spaces. Because of the limitation of place, it can only see the upper part first, and user have to slide down to see the lower part, which will cause some problem, it will be a bit strange to look at the first half and the lower part separately.

The version 3(Final) will be visually more harmonious and balanced. The elements used and the typesetting of elements have also been adjusted to make them more unified and balanced.


Week 9
Meeting Agenda (time spent 1 hour)

  1. Do slides together
  2. Discuss and decide to do ice cream cup packaging showcase poster
What I did this week
  • Design packaging product showcase
  • Design website showcase
  • Finalise website detail(interaction, position)
  • Based on Miss Lilian feedback refine the website design

  • Some photos taken by SOMAC in studio


    Fig 8. Spooky sensation product showcase


    Fig 9. Spooky sensation product showcase


    Fig 10. Honey almond swirl product showcase


    Fig 11. Honey almond swirl product showcase


    Fig 12. Berry basil bliss product showcase


    Fig 13. Berry basil bliss product showcase


    Fig 14. Three flavours products showcase


    Fig 15. Three flavours product showcase

    SOMAC told us that week 8 was going to carry out product shooting, so we were asked to complete the packaging design as soon as possible. This is the finished product of our packaging design and the result presented in the real cup. The above photos and props were prepared and shot by SOMAC. The elements in the photo are the materials of our ice cream flavor, which are taken with different placement orders and angles.


    Some interactive design I did for Oatlicious website


    Video 3. Interactive part of website
    Video 4. Interactive part of website





    Figma prototype


    Website showcase I did


    Fig 16. Website showcase


    Fig 17. Website showcase




    Fig 18. Website showcase



    Layout I did for product showcase

    Fig 19. Product showcase


    Fig 20. Product showcase


    Fig 21. Product showcase


    Fig 22. Product showcase


    Fig 23. Product showcase


    Fig 24. Product showcase


    Fig 25. TBS InnoFast 2/11/2023

FEEDBACK

Week 7
- At this stage uguys should think is it logical to attempt another completely different style of logo, because it will affect the overall of your progression and art direction.
- The logo shape is not really look like an oat, is a bit sharp at the top, a little bit look like a tear drop.
- The packaging design can utilise the small mascot like the bee and the pumpkin, and the packaging design in on the right track. 

Week 8
Self Learning Week

Week 9
- Finilise the prototype and deliverables this week.
- set deadline by yourself to hand it over to business school.
- The packaging design did good job.
- Can do the artwork they stack up together, because uguys work on this illustration being continuous, so can provide a artwork to show them.
- The graphic element can try to assimilate to what u already have in the packaging, like the droping ice cream can change to the fluffy cloud we use in packaging.
- The typeface should be consistent through all website pages
- The promotion and event section can be some improvement, the layout is quite clean, thee use of space is a bit weird
- The promotional video's graphic elements can just adapt back the same with packaging element
- The promotional video can be more information putting in for example what oatlicious and etc.

NEXT COURSE OF ACTION

Week 7

  1. Apply colour and refine the design of website(JiaYee, Kim, Michelle)
  2. Draw out elements used in website in AI (JiaYee)
  3. Do GIF for website (Javin, Caelan)
  4. Sketch benefit icons (Javin)
  5. Edit promotional video (VeyHan)

Week 8
  1. Do interactive part of website
  2. Finish first draft of promotional video
  3. Do benefits icons in AI

Week 9
  1. Finalise website design and interactive part
  2. Record video to walkthrough the website
  3. Do slides for next week presentation
  4. Finish second draft of promotional video

Week 10
  1. Apply design to cooler bag and event collaterals


SUBMISSION

Fig. Presentation slides, week 9(24/10/2024)


Fig. Packaging Design, week 9(24/10/2024)


Fig. Product showcase, week 9(24/10/2024)


Fig. Mascot GIF

Fig. Mascot GIF


Fig. Logo Oatlicious, week 9(24/10/2024)


Video.Promotional video, week 9(24/10/2024)

REFLECTION

Experience
I feel that these three weeks are the most productive three weeks, and I think it is very challenging to go from draft to practice. Because some designs may be feasible in the draft stage, but the actual results may be biased, so many modifications and improvements are needed, and sometimes new schemes are needed to replace the original schemes. I think this is the most difficult part.


Observation
I feel that these three weeks are the most productive three weeks, and I think it is very challenging to practice from the draft. Because some designs may be feasible in the draft stage, but the actual results may be biased, so many modifications and improvements are needed, and sometimes new schemes are needed to replace the original schemes. I think this is the most difficult part. As for the part of web design, I think I still have a lot of room for improvement. I think I can try more different design and presentation methods for the use of space and colour matching, and even some interactive parts to increase my knowledge in this area.


Findings
Task 3 I spent more energy and time designing the deliverables of this project, which I think is very worthwhile and rewarding. Usually, the designs are finished products that stop at electronic files, and there is no real print to see the actual effect. This is the first time to print the design on the product, and I feel a sense of accomplishment, which is the joy of watching my design be actually applied.



Labels:

Comments

Post a Comment

Popular Posts