Skip to content

Prototyping Process

Harreh1 edited this page Oct 26, 2018 · 2 revisions

The Prototyping Process

The prototype that we made is developed using the Ionic 3 framework to and is simulating the interface of a wearable.

What is Ionic 3 Framework

The Ionic 3 framework is an open source SDK that allows developers to build a hybrid mobile application by using familiar web technologies such as HTML, CSS and Javascript. In 2015, there are about 1.3 million mobile applications built using this framework and the numbers keep rising till this day. Ionic uses the Angular framework and Typescript, which is a superset of Javascript. Ionic uses the browser which is a common function that all mobile platforms have. It allows the mobile application to run in a web view, which is sort of a browserless web page loader, enabling the application to run across different platforms. However, even though it runs in a web view, it still allows the application to use native functions such as the accelerometer by utilising Apache Cordova.

Why are we using Ionic 3 Framework

The reason we are using the Ionic 3 framework to develop our prototype is that we are familiar with the existing web technologies so it will be easier for us to get a head start with the framework. This also means that future maintenance and development will be easier as this is an easier type of code based. However, by choosing to use Ionic, it means that the application’s performance will not be as great as native code. Nevertheless, as our application does not require high performance, by using Ionic, the app will still run smoothly.

##Creating the initial prototype

Once we were familiar with ionic the first task was to get a basic creature on the page that would evolve when the user exercised. We used Cordova to access the phones accelerator and when it detected a change in the phone's orientation it adds a small amount of experience to the user. After the user gains enough experience to level up the sprite will change and the experience will reset. We chose to initially have four different sprites so that the users will get a representative experience. This was the state of the prototype we gave to the testers. It had four evolution's, three different hats that the user could put on and a static stats page.

monstero

We found that after the testing session there were lots of positives and negatives we found about our application. We found that all of the kids we tested really liked the monsters and enjoyed levelling them up. There were a lot of additional feedback we gathered though that we did not expect. The main one of these was how quickly there attention spans would shift. This was partially due to the form of the prototype since it was a quick mobile app whereas the final product would be more of a ubiquitous device that wouldn't require 100% attention. Whilst this issue wouldn't be as big in the final product we still decided that we should try to remedy these concerns. Our solution was to add in a mini game that the users would unlock after evolving. This would keep them more engaged for longer and would also inspire them to evolve so that they unlock more games. Before the showcase we finished implementing the friends list and integrated it with the accessories. This way the user can add a certain number of friends to unlock an accessory. Following this we added in the rest of the monster sprites and dynamic, changing states which brought our prototype to a good state for the showcase.

monstero