Chem Connect
Brief
Design and develop an interactive solution that will offer visitors an interactive engaging experience through the development of an interactive exhibit.
Timeframe
6 weeks
Programs Used:
Illustrator
Procreate
Chem Connect is an augmented reality educational card game aimed at school students designed for the interactive game project. Its purpose is to help primary school children learn about how various elements react with each other. The player will be able to use an AR camera that will allow them to visually see the reactions between the two cards, displaying a fun and creative animation. The four elements of the game are ice, water, fire and steam.
Children ages 8+: Since the purpose of the product is to help educate school children through our interactive game our main target audience is primary school children.
Parents & Primary Teachers: The product will also have to appeal to the parents and teachers of the children who will be using Chem Connect.
Since there were two designers in our group, I took the role of:
Designing the logo
Creating the customer profiles
Designing two of the four characters (Fire & Ice)
Drawing the storyboards
Designing the format of the playing cards
Designing the format of the character cards
Designing the app UI
Designing the packaging
Designing the display boxes
For the logo design I looked into four different types of logos which were: game logos, chemistry logos, hexagon logos and logos that included two “C’s” as the name of our game, Chem Connect, has the alliteration of two “C’s.” Here are some of those logo that I drew inspiration from.
Here are some sketches I did of potential logos. On the top row, I played around with different formats for having the two “C’s” interact with each other. I also gave them an almost hexagonal shape to link them to the theme of hexagons that my team wanted to include in the design of the game. The ones below those are more chemistry inspired.
Original Font
These logos started as an idea I got when I found a font on ‘Fontspace.’ The font was chemistry inspired which was exactly what I was trying to find. After finding the font, I still wanted to add my own design to it so I replaced the two capital “C’s” with my own design of a C with a hexagonal shape but still following the design of the existing font.
These three logos were my initial idea for having to “C’s” and these were the three ways I thought they could interact together to make a logo. Although I liked this idea, it didn’t give any information on the actual product was. I thought they were too generic and not marketed to the target audience.
These are two designs I played around with while I was trying to see if I could make the logo more kid-friendly, however, I quickly came to realise that these designs were two big to be logos.
Larger Logo
Smaller Logo
The feedback from our team presentation in week 12 was very helpful for me to conclude the final design for the logo. My feedback was that I would have to be aware of the legibility of the logo, as in how will it look in different sizes or placed on top of different designs. Following this feedback, I went back and redesign the logo, this time giving it a thicker line and font. This made the logo stand out much more.
There are two variations to the logo: the one on the top is the larger logo that I have used on the cards and packaging and the one on the left is the logo I used on the app icon and the UI design for the app.
For inspiration for the character designs, my teammates and I really like the idea of having characters with a similar design style to the ones from “Adventure Time” which is a fantasy animated TV series. We wanted to design four characters in total and since there were two designers in the group we split them up so that each designer had to create two characters. Having an agreed-upon design style before we designed them was extremely helpful in allowing our designs to have consistency.
These are my pencil sketches of the fire and ice characters.
These are my digital drawings of the characters.
Here are some sketches I did of potential card layouts. On the top row are my sketches that I then digitalised using Procreate so it could give me a better idea of what they would look like. I played around with the orientation for the character bio cards which are the three on the right and the left one is the design for the just regular playing card.
These are the final format of the playing cards of the game. These will be the cards that the player will scan with their phone camera to view the AR animations and interactions between the characters.
These are the final format of the playing cards that the user will use to scan and view the AR animations.
These are the final format of the bio cards of the game. These act as additional cards to the game and are just to give the player more information on the elements to help further educate them.
Here is my initial packaging design, which is a hexagonal box to fit in with the shape of the cards. Since we planned on selling the product in display boxes in stores, I thought that this design of the box would be ideal as it is small in size and relatively thin therefore the boxes would be able to be stacked up more easily.
This is my final packaging design. I kept the same hexagonal shape to the box to fit in with the shape of the cards. I updated the design with the final logo, added the character designs onto the box to make it more kid-friendly and then added some small details like the sticker on the front mentioning the AR aspect of the game. On the back of the box, I added a small description of the game and a mockup of what the game would look like on a phone screen.
These 3D mockups are not done by me but by my team’s 3D environment designer, Nikita Sineiko. I only include them as a reference to what my designs look like when they are mocked up and for better understanding.
As part of the marketing of the product, my team thought it would be good to also think about how the game would be displayed and sold in a store. We decided that our best option would be to design a cardboard display box similar to the reference picture. I created the above designs following the same packaging theme and colours.
We also decided that it would be better to have two options and sizes for the cardboard display box so I designed a larger version of it.
Once i finished the designs for both boxes, I sent them to the 3D environment designer in my group where he then created a 3D mockup of the box.
The 3D mockups are not done by me but my team’s 3D environment designer, Nikita Sineiko. I only include them as a reference to what my designs look like when they are mocked up and for better understanding.
Since our game revolves around augmented reality, I though that it would be important to design an app that the customers can download and use to see the AR characters interact. These are my UI designs for the app.
Looking back on the Interactive project, I can confidently say that this is so far the Year 1 project that I have created and developed the most work for. As it was our longest-running project of the year, it gave my team and me an opportunity to really find and develop an interactive game that we all could look back on and be proud of. Chem connect was a great team project that allowed both my design skills and communication skills to grow.
On my part of the project, since I did the majority of the design work, I am very pleased with the outcome. Even though it was not necessarily my design style, I used the opportunity to push myself to discover new areas of design and create a kid-friendly interactive game that I truly believe would work in the real world. It taught me how to manage my time well and how to communicate with my team on a weekly basis in order to ensure progress in the project.
Overall, I am happy with both my personal outcome and my team’s outcome for the project, as ‘Chem Connect’ was positively received by both our professors and year group and the feedback was overall positive. I have learnt an excess of new skills and techniques throughout this project that I know I will carry on into my second year of university and I cannot wait to see how I use them.