Stembot
4 week period
Motion Design
Character Design
I.
Design Objective
Within the Design module of my studies at Devine Howest (BE) I am looking for interesting solutions for my chosen non-profit organization the Creative STEM. I experimented and explored within the design area to arrive at a finished digital product. I worked on this project for 4 weeks, from research to concept definition to design and animation. In this article I briefly discuss my work process and end result.
Initiation
I started my project by looking for design possibilities and thereby creating inspiration. I started looking for a non-profit organization for which I would work. Encountering a problem facing the non-profit organization was very difficult to find online. I have investigated several interesting non-profit organizations by exploring the non-profit organization's website and their social media platforms.
Eventually I ended up with non-profit organization De Creatieve STEM, or translated into English as the Creative STEM. I was immediately interested in the workshops that the Creative STEM organizes for children and I was surprised that these workshops sometimes take place in our school without us knowing. I found little promotional material from them which made me curious whether I could contribute to this. For more insights, I made contact with the Creative STEM for a collaboration and I had the pleasure of coming over for a conversation in Drongen, the headquarters of the organization.
About the organization
The Creative STEM has the educational objective of promoting the development of (talents of) young people. The association wishes to create a framework within which children develop their talents in technology, science and languages. With free walk-in moments, courses, workshops, special holiday programs and activities for schools and groups, the association puts this into practice. The association offers access to tools that people do not have at home and to less well-known materials and techniques, such as laser cutters, cutters and 3D printers. The goal is always to stimulate creativity, interest, development and entrepreneurship, with attention for equal opportunities for all children.
The Creative STEM is part of STEM-academy, a STEM action plan from the Flemish government. STEM is an acronym that stands for "Science, Technology, Engineering, Mathematics". This was established to prevent a structural shortage of technical and precise scientific profiles in the Flemish labor market. The STEM academy network gathers more than 100 officially recognized STEM academies. These are colleges and universities (for example Howest, Vives, VUB, KU Leuven), non-profit organizations (for example De Creatieve STEM, Ingegno), schools, public observatories (for example BUDA::lab), etc.
Target audience
The Creative STEM organizes workshops for children between 5 and 14 years, on average 9-year-olds (third year of primary school). There are two different types of workshop groups. The first group are young people who attend the fablab every Wednesday and / or Saturday. The second group are young people who participate in the workshops that are organized in schools (third to sixth grade). These workshops take place approximately once a month.
Workshops
The Creative STEM organizes workshops for children where they learn to work with tools that they do not have at home and with less well-known materials and techniques. For example, they design t-shirts with the printer. During these projects they follow the following phases: 1) Design a 2D drawing (based on basic shapes) in the design programs CanvasWorkspace from Brother or Inkscape. 2) Put the design file on the cloud to which the workshop supervisor has access. 3) Press the design onto the printers.
II.
Concept definition
First ideas
For my first ideas, I thought I'd design an animated promotional video to inspire young people to stimulate their creativity through activities and gain knowledge in the creative workspace with the latest technologies and gadgets. I hoped to bring more children together and to realize their ideas during the workshops of The Creative STEM. I have researched how I can best translate this promotional video and which scope of the organization I am mapping. There are two
scopes around which I can work: the Creative STEM as a whole as a non-profit organization, or the scope of a specific event of the organization (eg: environmental theme, holidays organized by the non-profit organization, etc.).
After further exploring the website I found that the manuals of the tools that the children work with during the workshops are less accessible to children. This seemed to me a more interesting problem to offer a digital solution. By means of an animated manual I wanted to teach children how to use tools from the fablab and they can start easily and safely.
During the conversation with the customer it turned out that the manuals for the machines from the fablab are not really a problem. The volunteers are working with the tools to guide the children, for example with the printing of t-shirts. The online process that the children go through to create a design and send it to the machines does not always run smoothly. During the workshops there are three phases that the children go through. The transition between these phases is difficult. A lot has to be repeated, so a lot of time is lost.
How can I make the work process that the children go through during the workshops easier and more accessible?
From the conversation with the customer the best solution for their problem turned out to be a tutorial video that the children can watch if they have questions. Through animated tutorial videos I can teach children to work in a visually attractive way with the software and tools from the fablab and the workshop goes a lot faster.
Final concept
After the feedback on my pitch presentation and further research I became aware that the final product that I was going to design, namely an animated manual, was not a too strong digital solution for my studies and that I missed opportunities here. I started brainstorming again for new innovative possibilities.
I did brainstorming on the basis of mind maps and by imagining that I was in the shoes of the workshop participant. I saw a possibility in: chatbots, online platforms and a robot that is physically present during the workshop. I remembered an important sentence that the workshop supervisor said during my conversation with the client: "The children have difficulties saving a document on their desktop, while they can play the Fortnite PC game without any problems". A
light came on -
What if I translate the manual as an interactive game?
Finally, after quite a while of research and brainstorming, I became satisfied with the following idea of the new translation of the manuals.
I designed an application that helps children find their way on their computer through the work process during the workshops. It is a tool that provides support with questions, a type of interactive game where a character gives the children tips & tricks when designing. This is a conceptual design where I did not build the software, but designed it. I tried to simulate the interactivity of this tool.
III.
Identity Design
Storyboarding
After a few days of research, I started to design the flow of the application. I have outlined the steps that a user goes through on paper. An important view that I received here was that there are many branches of the flow of the software, which means that I had to make a choice as to which branch I design (2D, 3D and experimental workshops of the non-profit organization). It is not possible to design all branches of the application in this limited time. Developing a certain branch is therefore important because here I must be able to clearly explain the meaning of the application. I design the work process for a workshop that makes 2D design for example a 2D t-shirt print. I have outlined a flow chart for the process during a group work. The workshop facilitator creates a lobby where the children can participate. For example, a young person does not have to deal with software settings and the supervisor has a good overview of where the children are throughout the process.
Wireframing and sketches
Wireframes and sketches of the character could be made on the basis of a storyboard. My first attempt was to sketch on paper which I subsequently designed in Adobe Illustrator and Sketch. Although at the beginning I thought this would be the easiest thing to do in Sketch, I found that working in Adobe Illustrator was much better. Adobe Illustrator was the best choice since my design consisted of unusual shapes. Later through my design project I dynamically animated this design in After Effects which works well from the Illustrator layers.
Character Design
By creating a mood board and inspiration board, I got a better picture of what kind of character I would design. It must be a character who is child-friendly (target group on average 9-year-olds) and pleasant to guide them through the work process. An important factor to take into account is the character's facial expressions. I have read some papers about designing a child-friendly product. With simplicity of the design, a message is explained more easily. I try to make an association between the style of the non-profit organization, the programs that the children use during the workshops and the creations of the workshops. From this I designed a character that is a kind of floating robot.
IV.
Application Design
Application design
By creating a mood board and inspiration board I was able to capture the branding of the application. I have recorded my corporate identity in an illustrator file so that I could use it as a color palette during designing. I started designing based on the wireframe, sketches and my corporate identity. I have had many different phases throughout my design process. At the start of my design I designed part of the application in full screen. I have designed several full-screen designs, but I was never completely satisfied with my result. Afterwards it turned out that I should process the entire application in the navigation bar. This way, the user never leaves his design project and the application hides as little as possible from the screen. This shift of design approach took a lot of time, but it was completely worth it. The feedback I received on this from outsiders was positive. I would like to have experienced this design method earlier when designing my wireframes.
Motion design
I designed the process for the animation video in Adobe After Effects. Before I could animate my design I had to create different files in Adobe Illustrator where I put all the design elements that I want to animate in a separate layer. I had to give these innumerable layers a clear name so that I could figure it out in After Effects. This took a lot of time. It was super cool to see my character come to life, dynamics makes everything more fun! During my last week my composition of my character suddenly became unusable. All layers were staggered in position and after several attempts at recovery, this did not appear to recover. I had to make my character composition again which I found very unfortunate. The most important phases of animations for the end result have been completed. However, I wanted to show even more. Mainly for the 'speech bubbles' and chatbot I would have liked to design more examples. All in all I am satisfied with my animation video. This provides a clear picture of how the application would work and gives a general example of how an user goes through a project.
Features
Start a design project
View the project description and get design examples. Earn XP and unlock achievements.
Participate in group works
Design in a team with an overview of all participants in the lobby. The host of the lobby (for example, the teacher of the workshop) sets up a project with personal settings.
Process follow-up
The different steps of the work process: from design to a finished product.
Get tips & tricks
Chatbot helps you at any time. You will receive tips & tricks to promote progress throughout the design process.
Ask your avatar questions
Chat with your avatar to ask questions and get feedback.
Easy installation
One-time installation. Compatible with Inkscape, CanvasWorkspace, Sketch and Adobe Illustrator. For operating systems Windows and Mac OS.
Application simulation
IV.
Conclusion
This application helps children to find their way through the design work process. The avatar / chatbot gives the children tips & tricks while designing. This interactive game makes for a fun experience and ensures that the workshop runs more smoothly.
I would have liked to animate more designs or build a prototype to test with the children, but overall I am satisfied with my end result that I got within my time limit and that I presented to the jury.
Thank you to The Creative STEM for welcoming me to their studio and thank you Devine for the coaching and positive feedback on my project.