JIOI 2019 App

UI/UX Design

Overview

JIOI is short for Jeux Des Îles de l'Océan Indien. It is a mini Olympic event for the islands of the Indian Ocean. I participated in this project during my internship at Mauritius Telecom with the Innovation team.

The app we designed and developed was used to keep track of the games, medal ranking, and other news regarding the event.

My Contributions

In this project, I was responsible for the animations, wireframing, hi-fi prototype designs, and user testing.

Team: Innovation Department (Team of 15 people)

Tools used:

Adobe XD, Adobe Illustrator, Adobe Photoshop

User Research

According to the primary research conducted by my colleagues, we were able to identify the main features our users would like to have in the upcoming app. Those main features were:

Live updates on game events
Game event detail
Country ranking
Maps (showing where the games are being held)
News regarding the JIOI
Calendar

Wireframing

With the information collected, I was then tasked to build the core wireframe. Using Adobe XD I built the main screens in lo-fi wireframes to help the developing team understand the overall app architecture. During this process, I learned a lot about the limitations and constraints of what can be developed and this prepared me for my visual designs.

Visual Design

The style guide was given to us by the COJI team (Comité d'Organisation des Jeux des Îles). They were the ones who were responsible for organising the whole event. Most of our design work had to be validated by this committee before publishing it to the public. When it came to designing the UIs, we split it between colleagues. Below you will see my designs.

Walkthrough screens to show users what the app can deliver.

Showing how the calendar screen works will work. Also giving a preview of how the results screen will look like.

Some sports do not only have ranking winners (1st, 2nd, 3rd place) but some only have a winner and a loser. Thus, I had to design another results screen UI.

I also animated the Mascot's hand, to helps users understand which direction to swipe for the walkthrough.

Polishing

We then merged all the UIs and had a critique analysis with the design team. After modifying some UIs, we were set to deliver the designs to the developing team. Working with them closely they also asked for a custom loading animation. I was tasked to build a couple of animations but following the sports theme.

With the original and official psd file available to us (from the COJI team), we were allowed to use the sports mascote. I then created 4 different loading animations that would randomly trigger.

Results

After publishing the app to the public, the team received many positive feedbacks. The app can be found on the Apple App Store and Android Play Store.

Article Link: https://ict.io/application-mobile-jioi-2019/

Google Sites

Report abuse