Wearable / Home Automation Device Project

The first project of our second semester saw us work in groups to develop an idea for a device that could easily be worn, such as a watch, or that could fit into an average household, with the aim being to support SDG 2 of creating a vision for a world without hunger and malnutrition. We were asked to create a prototype of the device and explore and understand the design process from creating an initial concept through to designing a visual prototype and an interface design of an application on the device.

The project aimed to give us an introduction to the realm of Wearable/Home Automation Device technology as well as making us comfortable with developing concepts of IoT devices and applications. We were introduced to the constraints and possibilities of these technologies with a focus on physical qualities, UX and portable interfaces.

We were again placed into teams of mixed disciplines such as Designers and Game developers to understand the importance of communication between different teams and professions in a project. Obviously, this is a product design and UX design heavy project so, to add work for us game students the project included adding gamification. An example was given of shopping, generally at supermarkets, can allow you to build up points which you can use to get discounts of your next shop. We had to think of how we could add engaging and fitting gamification to our products.

Stage One:Ideation and Research



Our first step as a group was to brainstorm ideas for our product. There were many common roads we could take, such as a smart watch that can show you information about your health for example, or a smart kitchen appliance, take a kettle for example, that you set to boil water at a specific time in the morning. However, these ideas already exist and are hard to improve upon to make the product unique to its familiars, so our group wanted to make a household appliance that has not yet been developed or is starting to be developed so we could improve upon its existing designs. Here is a few images of products that we researched.

We concluded making some sort of smart bin as we thought it was unique and had not really been attempted much. We decided that we wanted our bin to promote the recycling of food waste and other recyclable waste, as this would meet the expectations of SDG 2. We decided on a brand name of 'Green Zero' but had yet to find a name for the bin itself. We wanted our product to reward the user for recycling as well encourage it. Here is where the gamification comes in.

We would pair the smart bin with an app that would act as a mini mobile game. This would consist of a levelling system that would grant XP every time the user recycled by using motion and weight sensors, for example, in the product. Once the user levels up they would gain rewards such as an in-app currency, which could then be used to purchase discounts at selected retailers or for specific products, that also promote the goal of Sustainable Development Goal 2 as well the 16 other Goals.
We also wanted to gamify the product even more, so we wanted to add some sort of UI panel to the product that would track the users levels and experience. In addition to this we wanted to create a system of collecting and looking after virtual pets in the app. These pets would be fed when waste is recycled, for example. This could also grant extra XP. We devised this with the intention of keeping the users engaged with recycling and initially aimed this at a younger audience, but we wanted it to appeal to a slightly older audience as well, so this was something to consider.

and example image of the bin app logo An example of the bin app logo.

The app would not only consist of feeding pets and levelling up, but also a loot box system in combination with customisable and unlockable cosmetics, and minigames for you to play with your pets. So, with all these ideas we split roles between team members and carried out small jobs over the following week or two and we would come back and share our progress.



Stage Two: Development Stage



My Tasks

I was given the role of designing the loot box system as well as the cosmetic rewards gained from them. The first thing I thought about is how I knew loot box systems can be controversial and how they can encourage the spending of real money, so I wanted to make our system the most fair and respectable it could be. I took the most common concept used in loot crate systems which was to have them revolve purely around cosmetic items, which was perfect for our mobile app as there were many different avenues that I could of gone down to create different cosmetics.

First, I wanted to design the actual loot crate so I took two main inspirations. These were the futuristic looking crate from Overwatch (Overwatch, 2016), and the old-fashioned treasure chest style from a mobile game that I had been playing at the time called Dragon City(Dragon City, 2012).

An image of a futuristic looking lootbox from Overwatch
A futuristic looking lootbox from Overwatch

An image of a vibrant green chest from the mobile game dragon city
A green chest from the mobile game Dragon City

I continued and made two sketches and templates one with the futuristic style and the other with the traditional chest style. My plan was to try some different variations of each loot box style and see which one had the best potential for variations that would best fit the theme of the app. Due to time constraints this was not something possible in this project but a side project I would decide to carry out at another time.

A sketch of a traditional chest style lootcrate
A sketch of a traditional chest style lootcrate

A sketch of a futuristic style lootcrate
A sketch of a futuristic style lootcrate

So due to the time limit I decided on using the futuristic style loot crate as I wanted to create a solid understanding for the whole system, so the appearance quality was not at the top of my priority list. I created the base template with the idea that many different styles could easily be applied to this design. All the sprites that I created in this project were made with Paint.net (Brewster.R, 2004).

A template of the futuristic style lootcrate
A template of the futuritic style lootcrate

Next, I researched some what actual cosmetics are popular in video games. I looked at games like Among Us (Among Us, 2018) and Rocket League (Rocket League, 2015) and concluded that most games lock items that are used to customise your character and/or profile behind loot crates.

An image of the customisation screen in Among Us
The Among Us customisation screen

With this information I created a sprite sheet for cosmetic ideas that could be used to customise our in-app pets. The sheet that I had devised consisted of some pretty common customisable hats, as I mainly wanted to show off the idea of cosmetics rather than spend too much time making a full-blown cosmetics system leaving little room for my other tasks. Also, the idea of different cosmetics could be taken down many different roads, from rewards like hats to other items such as player profile customisation, such as avatars. My main pitch was that I would want the actual cosmetics to stick to the theme of promoting SDG 2, while also adding some fun ones in here and there.

An image showing a spritesheet of cosmetics
A spritesheet showing the basic cosmetics I had created

These cosmetics were still missing something, and I wanted the experience of seeing a rare item appear from a loot crate to feel like it was rare and rewarding, as just seeing a .png of a top hat appear from a box probably wouldn't meet that expectation. This is where I looked to other games with loot crate systems yet again to see how they presented their loot crates and rewards when they were opened. Looking at games like Clash Royale (Clash Royale, 2016) and Overwatch, different rarities were a common theme with coloured glows accompanying the opening that grew brighter with the higher rarity of the item opened.

An image showing a rare card in Clash Royale
A lootcrate reward in Clash Royale

So, I really liked the idea of making the loot crate opening visually appealing with glows and other VFX, but with time being short I wanted to create a more simple way of showing this. I also really liked the idea of placing the reward on trading card style object, just like Clash Royale, so I made a base template of a trading card along with four different coloured versions showing the different rarity tiers.

An image showing the different rarity loot cards
Different rarity loot cards

I created four different rarities, grey being common, blue being rare, purple being epic and gold being legendary. These are pretty standard colours and rarity tiers for a rewards system, so I thought it was a good place to start and I wanted to create some even rarer or more special rarity tiers or different ways to present rewards.
To properly present these loot cards I took one the pet designs from a team member and implemented it onto the legendary rarity card to create a preview of how the reward would look upon opening a loot crate.

An image showing a legendary loot card with the Dragon pet
Legendary card with a new Dragon pet

With time running low I wanted to create one more thing to make my work stand out in the project, so I decided to try something completlely new to me, which was animation. I wanted to create a simple animation that also had character and felt like it belonged in a cartoony mobile app.
I used Photoshop (Knoll.J, Knoll.T 1987) to create a gif of frame animation for the loot crate. I started with making the crate rise and become slightly slimmer in the first few frames. Then the loot crate started to fall back into place and appears to squish and become slightly shorter in height before the hatch door along the top of the crate opens to reveal the reward.

A frame aniamtion of the lootcrate opening
Animation of the lootcrate opening

The motion of the different animations was inspired by the cartoony opening of chests from Clash Royale and is perfect for that cartoony theme.

Stage Three: Conclusion and Reflection



This project had a large focus on my skills to design game assets that suited a theme and tried to keep consistency throughout, as well as devising an in-game system to be fair and enjoyable for players. While I found it enjoyable to create the different assets and did take my first look at asset animation, I feel like I could've included more development aspects into my work, such as creating an actual loot crate opening sequence.
When we shared our work between team members at the end of the project it was nice to see that we had all been consistent in the design style of the assets as well as all producing something worthy of being part of the app.
Again, I could of fitted in more work if I managed time better such as making different themed loot crates or like I mentioned an actual opening sequence. Overall, I see this to be a success in terms of practicing basic asset creation and keeping consistency between a team in our work.

There are many different avenues we could go down if were wanted to develop this product further. A few notable aspects would be focusing more on the aim of the product (meeting the goal of SDG2) and less on the gamification side of the product as we would not want users to lose sight of the true purpose of our product. The green zero brand could introduce SDG friendly products such as the smart bin to neighbourhoods and facilities across the country with the focus on making the world a more sustainable place to live.

On the gamification side, there is obvious path of adding new cosmetics, pets etc to make sure users are always getting new rewards when using the app. We could introduce limited time events to celebrate things like Earth Day with exclusive minigames and cosmetics and more ways to earn real-life rewards to support SDG 2 further, such as vouchers for sustainable businesses.

In terms of my specific work, I would like to create multiple new loot crate styles each having their own line of matching theme cosmetics. I would aim to create more exciting ways to earn rewards through the app and ultimately creating a fully working system that has the potential to be continuously developed.