INSTRUCTIONS
LECTURES
Week 1 | March 29th, 2021
Our first day commenced as an introductory class where Mr. Anis summarized and briefed us through the module information booklet, the objectives, and the assessments. Design Exploration provides us options to either deepen our expertise, experiment from different fields of design through a self-generated brief. The project begins from the proposal stage all the way until its development and execution (prototypes only).
We were provided a list of topics of sustainable development goals from the United Nation General Assembly as a startup for the initial idea we can fit our project in and to work on for the rest of the semester. To properly manage the pace of our progress within the given timeline, we're expected to have come up with research and a solid idea by the next class.
Week 2 | April 5th, 2021
The class started with each of us presenting our initial idea as informed from the first week. Everyone tackled on the SDG topic they have chosen, and the medium/area of expertise as desired to explore or deepen. Ms. Anis kindly provided an hour for the class to work on research and backing up our project ideation. Once more, we each spent the next hour presenting our initial proposal with further research, while we share feedback and discussion with Ms. Anis (see week 2 reflection below for the details).
Week 3 | April 12th, 2021
Ms. Anis presented a lecture today on visual communication in campaigns, which introduced the explosion of visual images in the current age we live in. The visuals we process on a daily basis has been confirmed to have transmitted to the brain x60000 faster than text hence their important must not be understated and the impacts it has on our lives.
The interpretation of visuals differs from culture to the history behind the context, so we are to be aware of the message we want to communicate to the audiences.
Culture jamming plays a big role in the advertisement industry by pulling on the emotional strings to evoke reactions and behavioral change closely related to the four emotions (shock, shame, fear, anger). The technique and pattern is often commonly used by activists to spark social change.
Another way to implement this is through communicating visuals/message that puts viewers out of their comfort zone. The initial shock can quickly lead to a second look and reflection of the content.
Finally metamemes (a 2-level message that punctures a specific commercial image) are used to call for attention by challenging a larger aspect/group of the political culture of corporate domination.
The activity we did today was to identify a few examples (good and bad) that relates to our project, the pros & cons, and what we can learn from the examples. Mine is presented below:
https://www.notion.so/D-E-Case-Study-Activity-wk-3-00dde0bb64904508a25661b563bb306f
Week 4 | April 19th, 2021
The lecture today was dedicated on the cultural, ethical aspect of design and specifically cultural intelligence that we as designers should be aware of. As gatekeepers of information to reflect on the contemporary culture, it's essential for us to understand the challenges and the best practices.
As with any design project, studying the audience is always the starting the point, and their cultural or ethical aspects are no exception to the research. This may include studying their reading habit, artistic expressions, learning styles, and being aware of the cultural sensitivity.
To make sure we apply these studies to our current project, Ms. Anis gave us time in class to look into both these aspects in our scope of design execution. I studied the climate ethics, its cultural take and summarized them below:
https://www.notion.so/Class-Activity-Week-4-D-E-0bddb06cf3c24415872bcf98cf5145ae
Week 5 | April 26th, 2021
There was no lecture today. We presented each of our proposal deck and shared feedbacks with Ms. Anis.
TASK 1
Ideation | Week 1
Knowing that long project can easily lead to fatigue in later stages, I listened closely to what I wanted to do and through the process of brainstorming and planning seen in figure 1.1, I gained rough insights on the possible directions to walk to.
 |
| Figure 1.1. My initial decision-making table on the areas & approach of design exploration. |
I then browsed through a list of past projects to stay inspired for new ideas, and decided the top 3 projects that stood out to me in different industries (see figure 1.2). Recognizing the gap and need for improvement, I provided feedback on each project to gain additional insights into how I can fill the role using my skillset and what I can learn. The execution requirements were filled in for my own understanding of the process and requirements that I may or may not want to go through.
I will provide the link for each project below for reference (the link will open on a new window):
 |
| Figure 1.2. Main inspirations (including my feedback on each, and project execution requirements) |
To further enhance my decision-making, I studied the overview information and issues from the SDG goals I have selected based on interest and research (see figure 1.3). I favor Climate action and Clean water & sanitation.
 |
| Figure 1.3. Exploring selected SDG issues in overview. |
In the end of the first phase of research and ideation, I gained a rough idea of the project scope, the requirements, hence the decision was finally put into the 4th idea on the list of figure 1.1, the interactive storytelling platform. Through inspirations from Stop the Stigma project, I felt touched and empowered by the execution, the learning opportunities, and the relevance to SDG issues that I have looked into. I then collect references that resonated with the execution and carefully addressed the reason behind each (see figure 1.4).
 |
| Figure 1.4. Interactive Story-telling References. |
Rough project idea: An interactive story-telling platform and a channel for taking actions for spreading awareness, educating, and providing donation for support.
Research | Week 2
The research phase was geared towards the SDG goal that I have selected, #13 Climate Action. To keep things in track, I kept a list of the information I have gathered from, it's sources and its key information that I will be utilizing on my project.
 |
| Research references list on Climate Change. |
Project Direction & Proposal | Week 3-4
Another week passed by with my hands on plenty of information to dissect. I collected more secondary studies and perspective from different platforms, media and audiences and decided on the scale of the project direction, thought through the story-telling structure and created for proposal deck for the upcoming presentation. The presentation is presented as below:
Advanced Prototyping Software | Week 4 - 5
The project rationale is decided, proposal deck presented with every research point to support my execution. Now it's all about exploring and learning these new tools and languages I have proposed. The time is spent on reading through resources, spending time with multiple softwares and figuring out the technical aspects of my project. Additionally, I've signed up for a few courses to get started.
 |
| Learning Framer X. |
Technical Skills Learning | Week 5 - 7
It took a week plus to get the hang of Framer X and its design-code tools, but despite its high capabilities, I found out that the software wasn't capable of prototyping the project I look forward to develop. As a result, I was forced to browse through other viable solutions to create the interactive website I wanted. From one source after another, I finally found the solution, and in simplest words, I'm required to hard code this website from scratch. It wasn't the solution I look forward to initially, but I took the challenge to research up the languages I needed to learn. After collecting enough resources, I filled my weeks ahead with Javascript, DOM, and GSAP learning.
 |
| Learning JavaScript Basic Algorithms and Data Structure (Codecademy). |
 |
| Learning JavaScript (W3S). |
 |
| Learning JavaScript DOM (KhanAcademy). |
Refining Narration and Planning | Week 8 - 9
It's finally the week to engage with my creative juices to start integrating the narration to the flow of the website, and essentially creating the story-telling structure I have planned weeks prior. I began sketching many ideas that has been stuck in my head throughout the process of learning the languages and codes. I've attached the sketches in the following images:
 |
| Narration flow overview planning. |
 |
| Sketches of the initial narration structure. |
 |
| More narration flow ideas and sketches. |
 |
| Extra sketch ideas. |
By the sketches were ready, I noticed the variations and ideas I've ended up with during the brainstorming and ideation, so I turned them into prototypes to visualise the flow and visual direction.
 |
| Website Direction #1. |
 |
| Website Direction #2. |
 |
| Website Direction #3. |
High-fidelity Prototypes and Assets | Week 9 - 10
I went through the story structure and spotted many improvement points to make, so I dedicated the time rationalising every part of the narrative from every section as shown in the screenshot below.
 |
| Refined Story Structure (in progress). |
I then refined the high-fidelity screens to prepare the visuals for the coding phase. Throughout the process, I have considered Ms. Madina advice on the art direction of the website and the scope of the project.
 |
| All screens high-fidelity prototypes. |
Project Development | Week 11 - 14
Once I'm satisfied about the prototypes, concept and research, I prepared the directions and steps I need to take to develop the website with codes (see figure 11.1 below). The project management greatly helped pacing the sprints that I take on a daily to weekly basis.
 |
| Figure 11.1. Project Development Tasks Management. |
The coding process took place in Visual Studio Code. The process are captured in the following screenshots:
 |
| Figure 11.2. VS Code: HTML & JS. |
 |
| Figure 11.3. VS Code: CSS & JS. |
The following are some screenshots of the beta prototype (final product):
 |
| Scene 1 Intro: The world is witnessing its beauty fading away. |
 |
| Scene 2 Introducing a problem: From time to time, we've seen it all happening. |
 |
| Scene 4 Impacts (near): Our health at risk. |
 |
| Scene 5 Major causes: Major contribution to CO2. |
 |
| Ending scene 2 Resources. |
Final Presentation (note that page 2-4 is scrollable):
.
REFLECTIONS
Week 1 | March 29th, 2021
Based on the past experiences on long projects, I understood the designers fatigue that can easily occur in later stages of the execution process, so I listened closely to myself to created projects based on my own excitement and the impacts that the project may bring. I'm admittedly new to SDG issues (aware of its existence, not the details), but I see lots of opportunity and excitement in creating projects that matter to the world.
Week 2 | April 5th, 2021
After presenting on the first phase of research and ideation, Ms. Anis shared her thoughts and feedback of our progress. She was content with the amount of research and our understanding to the topic in which we have chosen. Seeing that I'm satisfied with my decision on the topic of research and the area to venture on, she advised that my story-telling interactive platform can begin by writing the narration once the research is set.
Week 3 | April 12th, 2021
As I finished brainstorming the medium of executing and the big idea of my design exploration project, I found myself lost in the traffic of climate change research, lost in the process of finding appropriate information to rationalize the issues and solutions. A week after reading through one source to another, I found the underlying issue that kept me in the loop. I was going through many sources that underlined a specific issue of carbon footprint without having a foundation to the issue from the first place. It’s not only about knowing the major impact human had caused to the environment, but understanding the reasoning behind those actions.
Week 4 | April 19th, 2021
The ethical and cultural aspects of design sounded unhelpful initially, but looking through them means more than some brownie points, but invaluable perspectives many may not be aware of. The way we make use of those information depends on us and we have our hands on it as designers to scale the impacts of our visual.
Week 5 | April 26th, 2021
Throughout the weeks, I learned the Framer software from basics to intermediate level. In the process, I faced several challenges and constraints while making my attempts to figure out how I can produce the expected outcome as presented in my proposal (otherwise, my project viability).
The challenges mainly involves technical constraints and requirements such as a more deliberate coding knowledge on Javascript, several APIs and front-end libraries that I did not expect from the beginning. The amount of technicality involved forced me to change my project priority to focus on those aspects, while taking up additional courses to stay up to the flow.
Week 6-7 | May 3rd - 10th, 2021
I spent the entire 2 weeks learning up raw JavaScript from different sources (Khan Academy, Codecademy, Free Code Camp). It took a while to understand basic lines of Javascript code and after taking up enough challenges to get started with basic Javascript codes, I moved to collecting and learning up basic GSAP (Java Script Library).
Week 9 | May 24th, 2021
The feedback from today's presentation encircled around my art direction and inconsistency in the design elements I have selected in the website wireframes. It was eye-opening, so I ran through my design choices and made changes to focus only on videos and typography, rather than combining them with illustrations and animation.
Week 10 | May 31st, 2021
I dedicated the week refining my story structure and high-fidelity wireframes this week. Although, there wasn't anyone to provide feedback due to the independent learning weeks, I approached peers from different industries and schools to provide basic constructive feedback to get my brain stimulated with different perspectives. The feedback were highly positive and motivating for me to keep moving forward.
Week 11-14 | June 7th - 28th, 2021
The project development weeks were extremely packed with final submissions and exams from other modules. Knowing so, I decided to mange my project directions and steps into a project management board to prevent myself from losing track and feeling overwhelmed in these final weeks.
Final Reflection
The Design Exploration module was full of excitement and adventurous paths that provides us complete freedom in choosing the project we believe in, and the technical approach we'd like to explore beyond our design knowledge. It is also highly motivating for me to push beyond my boundaries (and I really did with the codes) and set out my best work.
The project decision making was highly influenced by the inspiration I consumed on a daily basis, those are the animated and aesthetic websites on Behance, Dribbble, and Pinterest. I've always been amazed by how beautiful they are, so I went about to create one for myself.
Throughout the process, I was amazed, but overwhelmed by the amounts of hat I was required to wear to execute this project, from an empathising hat for the project concept, objectives, strategy to an objective researcher, planner, manager, to a creative and a technical developer. It became too easy to mix the roles up, get completely lost and demotivated, especially having to switch in between being technical and creative (not to mention hats from other modules).
In the end, I learn that it's best to carefully differentiate the roles and hats we wear to keep our vision clear and creative juice flowing.
Comments
Post a Comment