Minor Project - Part B (Production)
Week 6 - Week 16 (23/08/21 - 12/12/21)
Ng Mei Ying (0340563)
Ng Mei Ying (0340563)
PRJ62204 Minor Project
Part B - Design Execution & Presentation Deck
INSTRUCTION
(W6) User Journey Map + Gantt Chart + LoFi Design
Before the Monday class, our group leader Kyra took the initiative to
guide the creation of the user journey map as she had a better
understanding of how to create a correct user journey map based on her new
media design background knowledge. Soon we attended the lecturer class and
proceeded to show Mr Mike the first version of the user journey map. The
overall feedback given by Mr Mike was to look out for a thorough
consideration to the advertising marketing strategy instead of overly
relying on the digital method.
During the Friday discussion meeting with the EAP & SCE Team, business
students mentioned that they agreed that it's important to give meaning to
the logo design as they only simply design it without any special concept.
They would need some time to go through the logo, mascot and app interface
design. The SCE team had not had many issues with the app interface design
and they were working on the architectural wireframe design.
|
| User Journey Map (created by Kyra) |
|
| Gannt Chart created by ExTrash Design Team |
# Consultation Note:
-
Mr Mike mentioned that business students would tend to be over-optimistic when it comes to an exciting business project, and it would tend to blind the students from reality. A great idea does not guarantee success in the future although it's a good start.
-
A thorough marketing strategy for the “TouchPoint” in the Discovery and Consideration Stage in the user journey map was crucial to ensure the brand could successfully get ideal involvement from the target audience. It was also to ensure the ExTrash app could stand out from the
-
Double confirm the target audience: ensure your targeted audience includes both of the people who are aware and not aware of recycling or only targeted at the audience who are already aware of recycling? Confirming the right target audience without confusion is crucial for design development.
-
Ensure the logo design did not resemble the available logo that already existed in the market in order to avoid the design embarrassing ourselves as a designer (the existing logo design looked too generic than those generated from the logo generator). Ensure to make use of the keywords from the “How Might We” statements like reliability, flexibility, social importance, and incentives as the strongest visual elements/grounding idea to develop a solid/unique design for the logo. Always show the design development (sketches, brainstorm) for the whole team instead of just showing the end outcome to ensure overlooking the potential design.
- Regarding the app design, ensure the information was well arranged to avoid users getting lost in the app at the same time ensure there was sufficient information available in the app. Need to do user testing on the user’s navigation (swiping) flow too.
# Reflection: I found that the design team was not that aware of the
aspect regarding the marketing or business budget. The lecturer
would always remind students regarding the understanding of the
business model financial plan and it’s always been a realistic
consideration when it comes to a real-life working industry. The
lecturer was able to think about the dead angle that is often
neglected by the design students. On the other hand, I found that
our team had confusion about our actual target user as the written
target user in the EAP team proposal and what had been confirmed
based on the latest meeting conversation were not parallel.
(W7) Logo Design Development & Refinement
Logo Design (First Stage)
During the Monday class, our team decided to further develop the logo
design after getting feedback from the lecturer as the logo design still
needs some more refinement. After that, our team had a short meeting to
discuss the tasks to do. Hanbo and I proceed to further develop the logo
design based on the existing concept and ideas. To start with, I went
through all logo design sketches provided by Hanbo and we tried to extract
the key design concept from the potential logo design and came out with
the ideal way to blend those key design elements together.
|
| The extracted design keywords from HMW statements. (by Hanbo, Mei Ying) |
Preliminary logo & character design concept (by Hanbo, Fazal, Jon)
# Consultation Note: Mr Mike mentioned that the smile idea for the logo design sounds
good. However, he was not sure how we were going to blend the idea with the
keywords. On the other hand, Mr Mike also reminded us to make good use of
the Gantt Chart to keep track of the progression (also ensure that tasks
were all evenly distributed). We also needed to be mindful that to not make
the Gantt chart become a to-do list. All of the tasks should break down into
a reasonable section but also avoid including too many unnecessary details.
Lastly, the brand identity and art direction should be in full swing. Try to
produce key visuals according to the art direction.
Logo Design (Second Stage)
Below are some images showing the process of logo design analysis and
reference study. After the discussion, Hanbo and I had come out with a
couple of design ideas that included the composable logo design in which the
logo shape could be utilized to develop key visuals. We also thought about
utilizing the shape from the character design to design a logo. However,
Hanbo mentioned that the logo design may not be able to stand out if the
logo was highly similar to the character design.
|
| Logo concept sketches (by Hanbo) |
|
| Discussing logo design in Miro with Hanbo |
|
| References for logo design |
While Hanbo was working on some of the logo development design, I
continued to help develop the logo design which was to combine the concept
of smile, coin, the letter “e” and so on. I started the design with a
circle and I divided the circle to get the rest of the shape element (a
half and a quarter of a circle) as a base shape for logo design. While
playing around with the shape composition, a sound possibility of logo
design had been discovered.
|
| New logo design concept sketches (by Mei Ying) |
|
| New logo design in Adobe Illustrator (by Mei Ying) |
|
| New logo design 01 |
|
| New logo design 02 |
|
| New logo design 03 |
|
| New logo design 04 |
|
| New logo design 05 |
|
| New logo design 06 |
|
|
The refined concept behind the logo design (by Mei
Ying) |
|
| Final logo design refinement (by Hanbo) |
# Consultation Note:
Mr Mike mentioned that the logo design was good as it was supported by
solid concepts and ideas. The next task was to dress them up in a proper
presentation slide and present it to the collaborators. Graphic teams need
to work fast to complete art direction & brand identity. Furthermore,
the app Ui interface visual design could only start after the art
direction is confirmed.
# Reflection: I
found that we were spending too much time on the research as it almost
took 6 weeks to confirm the contextual, problem statement research etc,
and the time was quite tight to confirm the logo design in 4 days. I was
quite worried that I would not be able to twist the logo design to a
better direction at the beginning as I might be stuck in the creative
corner. Luckily the process for the logo design development was pretty
smooth thanks to Hanbo’s brilliant collaboration. I also found that Hanbo
was a practical young designer and his advice helped a lot in stabilizing
the logo design. I very appreciated that my knowledge regarding logo and
graphic design had improved during the discussion with Hanbo.
(W8 - W9) Art Direction, Storyboard
Brand Identity & Art Direction (Progression)
During week 8, our teammates continued to work on their respective tasks.
Below are some latest updates for the brand identity and art direction.
During the weekly meeting with our collaborators, we presented the latest
brand identity and art direction that included the final logo design. The
feedback was given by the business team leader saying that he will show his
team regarding the design proposal and he personally thought that the
concept behind the logo design was good and convincing.
Logo development & Rational Slides (created by Hanbo)
Logo Guideline Slides (created by Hanbo)
Design Proposal Slides for EAP Team (created by Mei Ying, Hanbo,
Fazal, Jon, Kyra)
|
| The Art Direction Board |
|
| App Style Guide (by Kyra) |
Youtube Explainer Video
|
| Video scriptwriting (by Farissa) |
|
|
Video style frame & storyboard (by Ming Fen) |
Key Art Design (Discussion)
On the other hand, I proceed to lend a helping hand to Jonathan by providing
guidance and ideas on the key art design. Although we both have learned the
collateral design with key art in the advanced typography class, both of us
seemed to have a different understanding of the key art design. Jonathan was
not sure of the exact definition of key art that built up the key visual for
the brand due to the lack of good references. I tried to get some reference
images I had collected in the earlier days and to show him some good examples
of the key art design. While Jonathan was creating the composition on his
side, I tried to compose the key art pattern and played with the composition
on my side as well. I sent the Ai file that included my example key art and
gridline template for him and he would further finalise the key art design.
|
| Key art design discussion sketches in Miro (Mei Ying & Jonathan) |
|
| Key art exploration on my adobe illustrator |
Social Media Content Planning (Discussion)
Aside from that, I had done some research on the social media post idea that
helps to gain user traffic through interactive post content. I started to plan
the social media content post sequence on miro board as well in order to get
the best posting sequence on Instagram. The content created for Instagram will
be used in the Facebook post too. After completing the content planning, some
feedback was given from my teammate to do some minor changes to the posting
sequence.
|
| Social Media Content Planning (by Mei Ying) |
3D Virtual Space Design Reference
Moreover, I had done some research on the 3D models as the virtual space for
our team final presentation. Several exhibition stalls/stand with the
various design was selected and shown in Miroboard for discussion and
sharing purpose. I had received some feedback from my teammates mentioning
the turquoise or the natural wooden materials seemed to fit our brand
concept well.
|
| 3D space modelling reference (by Mei Ying) |
# Consultation Note:
- The character and the logo design looks fine
-
Storyboard: should pay more attention to the perspective of the background
design. “Dumb Way To Die” could be a good reference in terms of
environment and background design.
-
Students should plan to do the animatics earlier if the video will need
someone to do the voice-over due to the consideration of video shots
timing.
-
The mosaic-like pattern design that uses the key shapes extracted from the
logo design looks cool and it is a good design idea.
- 3D Space Modeling: should consider a conceptual and experimental space design that will bring memorable virtual on-the-spot experience which isn’t bound by the physical condition.
# Reflection: The weekly progression after week 7 started to slow down a little as most of the group members needed to consolidate the assignments from the other modules. I appreciated that most of my teammates will actively update their current progression in the main group to keep the other teammates up to date regarding the team weekly progress. I found myself feeling uncertain to move on to the next task as the whole design touchpoint were closely linked to each other especially the art direction and the key art were the key thing that decide the whole design direction. On top of that, I found that my teammate was not confident enough to come out with a solid key art design at the beginning. However, the active guidance provided by the teammates ensured the design develop in a better direction.
(W10) Sticker Design & 3D Space Design Research
Week 10 Design Progression
During week 10, our teammates proceed to work on their respective tasks
based on the given feedback. Below were some of the touchpoint design
updates from our group. While presenting the high fertility design to Mr
Mike, I realised that the mascot colour designs were too dark and some of
the facial expression was blending with the body colour. I decided to help
with the mascot colour adjustment based on the given colour scheme.
|
| In-App illustration colour tone before adjustment (by teammates) |
|
| In-App illustration colour tone after adjustment (by Mei Ying) |
Sticker Design Progression
After completing the illustration colour adjustment for Kyra to insert into
the high fertility mobile app design, I proceed to work on the sticker
design for Instagram. Some sticker design images were collected from
Pinterest as visual references last week. The design idea was to create an
artsy sticker GIF with a vibrant and playful vibe. The character design by
my teammates will be applied in the design of the stickers with typography
art as well.
|
|
Sticker Design Reference (by Mei Ying) |
|
| Sticker Design Sketches (by Mei Ying) |
|
| Sticker Design Progress in Ai (part 1) |
|
| Sticker Design Progress in Ai (part 2) |
|
| Sticker Design (Part 1) |
|
| Sticker Design (Part 2) |
|
| Sticker Design (Part 3) |
# Consultation Note:
-
Sticker Design: Mr Mike mentioned that we could decide what the sticker design among the group will do. Besides, It's better to label the stickers with numbers and also avoid adding drop-down shadows for the stickers as it might not present the actual look of the final sticker design.
- Animatics: The designer should avoid a wordy scene in the explainer video as it actually reflected that the designer was running out of ideas. Besides, the designer needs to apply the animation principles to the animation after getting the assets from the illustration team.
# Reflection: I found
that it was challenging to manage my time efficiently to meet the stipulated
deadline for each of the tasks. On the other hand, the design process might
tend to be even stressful when our collaborators keep chasing the progression
for their presentation purposes. Sometimes I felt pretty shocked that our
collaborator would come out with some requirements beyond the actual scope of
cooperation. When it came to this situation, I found that our teammates would
tend to be at a loss and not sure how to reject the request such as providing
a quick presentation slides design or Instagram post design for TBS team. I
learnt that knowing the proper way to reject unreasonable requests that are
beyond our duty to avoid any misunderstanding is truly important. We also
learn that we should never receive take negative feedback and disagreement
during collaboration personally for the sake of mutual improvement.
(W11) Design Refinement & 3D Space Design Research
IG Post & Stickers Design Progression
There was no meeting from the EAP team this week and our team just need to
mainly focus on completing the prototype and sending the prototype to the
EAP team on week 12. During the consultation with Mr Mike, Farissa and I
showed the design update for the Instagram post and stickers pack design. I
had come out with four different sticker background designs in which the
design elements were extracted from the key art.
|
| IG Post Design (by Farissa) |
|
| Extrash Sticker Collection Design 01 |
|
|
Extrash Sticker Collection Design 02 (voted by teammates) |
|
| Extrash Sticker Collection Design 03 |
|
|
Extrash Sticker Collection Design 04 |
# Consultation Note:
-
Sticker & IG Post Design: The final sticker design looked nice and the key art was well applied. However, the design and colour scheme for both the IG post and sticker background design did not seem to match. The design team should have a discussion to ensure the visual design was consistent.
- Mobile App Walkthrough Video: the character in the video content need to be animated as well to achieve a vibrant and energetic vibe according to the brand identity. The character animation could be a squashing motion instead of animating the body parts like hands or eyes in detail.
Stickers Design Adjustment & Gif Creating
After receiving the feedback from the lecturer, I proceed to have a
discussion with Farissa regarding the issue of inconsistent visual design.
We decided to use the background pattern design that was preferred by most
of the teammates. In terms of the colour adjustments, I decided to change
the dark blue background colour into a light turquoise colour as this
colour would echo with the Instagram post design in a better way.
|
| Colour design adjustment in Ai |
|
| Animation adjustment in AE |
|
| Link the Pr file to Ae and export the video in Gif format |
|
| Final Sticker Design (Gif) |
3D Virtual Space Design Reference Update
On the other side, I had updated the 3D Space design in several styles and
concepts. the two major concepts include the conceptual exhibition space
design and the low-poly environment design which was suggested by Mr Mike.
After getting some feedback from the lecturer, our team continued to have a
discussion on the 3D space design. My teammates mentioned that they
preferred the boxy modelling style that resemble the Crossy Road and
Minecraft game.
|
| 3D Space Design Style 2: Conceptual Space Design |
|
| 3D Space Design Style 3: Lowpoly Space Design |
|
| 3D Space Design Recommendation by teammate |
# Consultation Note:
-
3D Space Design: Can consider the low-poly environment design to iron out the concern of the large file size due to the high-poly 3D space modelling. Besides, introducing the low-poly environment as the virtual presentation space would bring a fresh experience to the visitors. Should have the mascot to live in the low-poly artsy world as well. Also to build a fence or other things to limit the visitors' movement within the central activity area.
-
General Feedback: All students should go beyond the
specialization for the collaboration as this was the core mission in the
minor project. Never afraid of trying new stuff and experimenting with
it.
# Reflection: While
dealing with the sticker design, I found that I should be aware of the
consistency of the visual style for the touchpoint design especially the
Instagram post design. As I thought I had a missed understanding that the
Instagram post design would be updated, hence I did not conduct a full
communication with Farissa. As a result, the Instagram post and sticker post
designs were totally different. I've learnt that it's important to always
update the design progress in Miroboard and fully communicate with the
teammates from time to time.
(W12) 3D Space Sketches + Video Review
Today, our team mainly presented the current progress for the sticker post
design, 3D virtual space sketches as well as the YouTube explainer video. Mr
Mike was fine with the current sticker post design and 3D virtual space
sketches during the consultation, and he reminded me again regarding putting
the fence to limit the visitor's activity area (which I planned to insert the
transparent glass around the whole island for aesthetic consideration). On
other hand, Ming Fen had done the first version of the explainer video as
well. Our team proceeded to have a discussion after the consultation with Mr
Mike, the meeting was mainly to get approval for the 3D virtual space sketches
as well as to provide feedback and assistant for the YouTube explainer video.
Instagram Post Design Update
These were the current updates Instagram post design from Farissa with the
major visual adjustment on the background colour and the usage and patterns.
During the discussion with Farissa, I gave some suggestions in adjusting the
colour saturation, typography scale & proportion, paragraph length and
the visibility of the Extrash logo to ensure the post readability was up to
par.
|
| Instagram Post Design Update (By Farissa) |
Style frame & Explainer Video 1st Version
|
| Style frame 01 (by a teammate) |
|
| Style frame 02 (by a teammate) |
3D Virtual Space Design Sketches
After getting agreement upon the low-poly 3D design idea from my teammates, I
proceeded to produce some idea sketches on the environment modelling. Our
leader suggested having a house located on an island and surrounded by
rubbish, and the Extrash truck could be included as well. While in my opinion,
I suggested making the idea more conceptual by emphasizing the idea of a
floating island as an opened space to display our final design outcome. As a
result, I came out with some floating utopia island sketches that combined the
ideas from different members, and my teammates were fine with the current idea
sketches.
|
| 3D Space Design Sketches (Unpolished) |
|
| 3D Space Design Sketches (Polished) |
# Consultation Note:
-
Sticker & IG Post Design: the sticker post
looked fine but ensure the Instagram post matches the design
direction as well.
-
3D Space Design: you should get the agreement from the
team and you can proceed to do the modelling once you’ve gotten the
approval from the teammates.
- Explainer Video:
- entertainment design students always need to check and control the visual style the colour scheme and the visual layout/depth was missing a visual hierarchy.
-
It will be a waste if the team was not putting much effort into
the video. The visual design of the video started losing track
when the video duration got longer.
-
animation student should be aware of the animation principles was
well applied to the video as well. The character motion should be
more energetic and interactive.
- General Feedback: the whole team should be more demanding on the final outcomes by giving virtual feedback to the teammates. All teammates should strive for the quality of the outputs but not just for submission.
Explainer Video Visual Evaluation
After receiving critical feedback from our lecturer, our group proceeded
to conduct a meeting to find out a solution to solve the video visual
design problem especially the colour and the animation issues. During
the discussion, we reviewed the video and identify and dissect the
visual problems together. Considering that our main animation student
did not have sufficient time to complete a thorough animation
composition for all scenes, we decided to assign 3 or 4 more teammates
to assist with the visual adjustment and video composition. Based on the
discussion, I would the in charge of doing the animation file
preparation and colour design checking.
After the discussion, I proceed to update the key messages we had
discussed regarding the video scene visual adjustment during the
meeting. All of the sticky notes feedback and suggestion was posted on
the miroboard together with some sketches as an extra visual guide.
Other teammates also help with adding on other feedback and comments
which I had missed. The main issues with our current explainer video
include the lack of visual hierarchy due to the flat and dull colour
design, poor animation staging (assets keep blocking the main character)
and bad animation timing.
|
| Video visual evaluation scene by scene in Miroboard (By Mei Ying) |
|
| Video visual evaluation scene by scene in Miroboard (Zoom in view) |
Video Assets Visual Adjustment & File Preparation
After the video key scene evaluation, our Entertainment Design student
proceeds to help with the assets colour adjustment and add on the
missing visual assets on Friday. While checking the second version of
the colour adjustment outcome, I found it still had room for improvement
to reach the par. Therefore I decided to help with the colour and design
adjustment and below was the progression.
|
| Asset Colour Adjustment - Version 2 (By Entertainment Design Student) |
|
| Characters Final Colour Adjustment (By Mei Ying) |
|
| Asset Colour Adjustment - Version 3 (By Mei Ying) |
|
| Brown Environment Colour & Design Adjustment (By Mei Ying) |
|
| Green Environment Colour & Design Adjustment (By Mei Ying) |
|
| Trash Hill Colour & Design Adjustment (By Mei Ying) |
|
|
Title Scene Colour & Design Adjustment (By Mei Ying) |
# Consultation Note:
- IG Post Design: The designer should ensure the logo is not drowning in the background. The latest design progression was getting better and all the design was getting into a consistent design style.
- Explainer Video: The current asset and background colour design looked much better and it's good to see that all team members were coming together to assist the explainer video making.
# Reflection: There was a lot of stuff happening this particular week. I updated
some idea sketches for the 3D space and expect to get approval from the
teammates and proceed to do the 3D modelling using Maya software. Our
lecturer mentioned that the current explainer video outcome was totally
not up to par and all teammates were expected to redelegate the current
task and put our full force to assist the video remaking. I was not
surprised by the feedback given by the lecturer on the explainer video as
I was going to give similar feedback before the video was shown to the
lecturer as well. However, I'm glad that our teammates were highly
dedicative to reworking the video, I'm grateful that our group is blessed
with versatile people. I especially realized that Kyra was pretty good at
doing animation using After Effect. While dealing with the
(W13) Video Visual Adjustment + Video Recreation
In this coming week, I continue to arrange and prepare the AE animation
file for my teammates to proceed with their parts assisting the animation
making. I import the assets files into Ae and arrange them properly in a
separate folder. Each of the layers was named properly and all video
sequences and timing were pre-arranged to ensure that our animators could
produce an effective animation work. Apart from that, I made a simple
explanation guide in miroboard regarding the AE file layers to ensure that
our teammates would get overwhelmed by a large number of animation layers.
the guide also aimed to ensure that our teammates would accidentally
modify some unnecessary layers and pre-comps.
|
| AE file layering arrangements |
|
| AE File Layers Explanation |
Due to the consideration of time constraints, we had to work smart and fast
to get things done. I had done the transition scene animation before passing
the files to my teammates to ensure that all of the transition scenes got
the same timing. Based on the consideration that our teammates were having
different levels of animation skills, our original animation student Ming
Fen would be the lead animator to do the animation for scenes 01 - 04 as
these scenes involved more intermediate animation skills, Kyra was doing
scenes 05 - 07 and Fazal was doing the scenes 08 - 09. A character animation
guide was included in miroboard as well just to ensure that our teammates
could create an effective character animation within a very short timeframe.
|
| Character Animation Guide |
|
| Video Scene Explanation |
(W14 - W16) Presentation Deck + 3D Space Modelling
In week 14, I had done the first version of 3D space modelling and
assets arrangement. Most of the low-poly assets were downloaded from the
internet jus ensure that I could complete preparing the 3D space for our
spatial virtual room within the limited timeframe. I mainly model
the boxy item such as the flooring as well as the imported image. On the
other hand, I had to re-assigned materials to the meshes as most of the
materials were gone after importing into Maya. I also got some feedback
from my teammates saying that they were happy with the current design
and my next step to do was to export the model in Fbx format and import
it into the spatial for further checking.
During the Friday meeting with Mr Mike, all teammates and Mr Mike were
invited to the Extrash spatial to experience and check the space together.
A path that redirects to the main minor project spatial is added in the
Extrash spatial by Mr Mike as well, and we need to import some keynotes
from the miroboard into the spatial room. On the other hand, my teammate
would be helping on preparing the final presentation deck and adding
sticky notes in the spatial. meanwhile, my main task to do was to finalise
the 3D space design and update the weekly feedback from our lecture in the
weekly report.
|
| 3D Space Modeling (Front View) |
|
| 3D Space Modeling (Perspective View) |
|
| Importing 3D model into Spatial in FBX format |
|
| 3D Space Modelling Adjustment |
# Consultation Note: The ratio of the 3D space was a large as the football field and our team don't need that huge space. You needed to resize the 3D ratio on a smaller scale later. I could see there's a lot of modelling filling up the 3D space for aesthetic purposes. Need to consider discussing with your teammates to remove some decoration models to reduce the 3D space file size. For the presentation deck, remember to add on the following things: the monochrome logo, user persona, user journey map, low-fi app design as well as video.
Design Prototype Final Presentation in Zoom
Mr Mike mentioned that the 3D space could be done later, and we need
to finalise the presentation deck by this Thursday. Therefore, I put
aside the e3d modelling and assist my teammates to adjust the slide
visual design for our presentation deck as well as doing the
final slides checking. Our team proceeded to conduct a meeting for
presentation rehearsal before the Friday presentation to the academic
panels.
# Feedback From Academic Panels:
- The academics panel were very happy and satisfied with the final outcome produced by the Extrash design team as everything was presented in a clear and easy understand manner.
# Reflection: I very appreciated all of the hard works contributed by all of
my teammates to make things happen. Although there's a lot of challenges
and confusion while executing the design, at least we are always there
to back up each other. Moreover, I've learned that collaboration that
involves multiple professional disciplines including business school and
computer science school can be a very challenging and taxing process as
we are not working on a personal task anymore that allows us to have
more freedom to execute our preferable ideas and it needs more
toleration and negotiation. Even so, I understand that the biggest
benefit of multidisciplinary collaboration allows us to make something
impossible to something possible through the integration of knowledge
and skills from different study backgrounds. In a nutshell, learning
extra knowledge and skills through multidisciplinary collaboration
allows us to have a wider interpretation and understanding of certain
things that will greatly benefit our future development.
Comments
Post a Comment