2021 Web UX / UI

Inventing a way to combine technology and skating for a fun learning experience.

Skatrixx was built as a short term school project involving myself and 3 others. The goal for this project was to build an innovative app using sensor data to provide accurate info on skateboarding movements, and then apply this data in an app idea of our choosing.

The concept we ended up going for was an informative skateboarding app that shows AR examples using Three.js animations to visualize data, giving users a unique experience and being shown their own skateboard movement in realtime. Users could also go through a campaign mode - having various levels that increase in difficulty where for example they would have to complete a certain trick to progress to the next level. The realtime data analysis would then check how well the trick was performed to judge wether or not the user passes the level.

The project

As said, Skatrixx was an app that helped users learn to skateboard and perfect their movements in a fun way. The project was made from scratch, however the sensor data was delivered to us beforehand and we had no particular involvement in the technological side of gathering the data based on sensors that are applied to the skateboard.

Instead, our assignment was to realize a concept, make designs, and build these designs into a working prototype application. My role in this was to be the lead designer and lead front-end developer. My colleagues on this project were 3 other FHICT students, that mainly focused on getting the AR animations based on sensor data to work, as well as helping on front-end UI when needed.

The project was designed in Adobe XD and then built with the React JavaScript framework.

Skatrixx - UI designs

Research

Before starting, we wanted to see what would be interesting to build. We quickly came to the conclusion that using realtime AR animations based on sensor data would be easy to apply to an informative and learning app. To spice it up a little, we implemented a campaign and leaderboard concept, adding a competitive edge to the application. The stakeholder of the project was very interested in seeing how we would apply this and approved of the idea.

I also made some empathy maps and user personas to really dive into how one of the users would approach the app.

Skatrixx - Jim mindmap

Skatrixx - Jim persona

Design

As the lead designer of this project, I was responsible for the UI designs that we would be using for the app. There were some previous designs made that the stakeholder provided to us, involving a black / red color palette. The stakeholder wanted us to somewhat adhere to this design but give it a modern edge.

Since the old design was somewhat outdated, I used modern UI elements such as rounded corners, gradients, and sans-serif fonts to transform it into a design that would interest the young-adult target audience.

Skatrixx - UI collage

Skatrixx - design file

Prototyping

Since we only had a couple of weeks to build this entire project, prototyping was quickly done by using the UI designs in Adobe XD and transforming them into a clickable prototype. I ended up handing out this clickable prototype to some of my colleagues, friends, and teachers over at FHICT. This would then show me that most of the flow was easy to use, and some improvements could be made within the campaign flow.

Skatrixx - UI prototype

Development

To develop the project, we used the React JavaScript framework. I was responsible for the front-end UI elements, making sure everything was made according to the UI design. My partners in this project worked on animations and developing a realtime AR prototype showing the skateboard based on sensor data provided to us by the stakeholder, such as an animated kickflip.

The development process went well and we were able to come up with a simple MVP prototype fairly soon, which surprised the stakeholder. We used Git to keep track of all code and had different branches in place for each feature that was added.

Developing this process helped me understand React alot more in terms of basic structure and navigation, since I hadn't used it much beforehand.

Results

As a result, the only final product the stakeholder was looking for is a prototype MVP of the developed app.

App

Below is a screen recording of the finished product. Keep in mind this is only an MVP, as it was a short term school project with limited developing time. The stakeholder was very impressed with the finished product we were able to come up with in such a short time.

We were able to develop key features such as UI elements, working navigation, AR animations based on sensor data, and a campaign mode that would track progress based on back-end data (using placeholder JSON data as an example for this MVP).

Skatrixx - App demo