For this assignment, we had to pick a certain sport and link it with an animal that could have a certain purpose within the sport. Then design an app that fulfils the purpose of your chosen animal.
I ended up picking bowling and associated it with Oscar, an octopus. Oscar would be able to pick up the pins and put them back in place as well as roll the bowling ball back to the player.
The actual app became a mobile game that uses AR to physically place the bowling pins in the same room as the person playing the game. The player then has to move their phone as a way to throw the ball at those pins.
For the logo I decided to try and use the golden ratio to construct a logo featuring the octopus.
The logo features references to bowling by placing a bowling pin in front and the dots on Oscar’s head represent the holes in a bowling ball. Pictured below is the design process towards the final logo.
In order to properly figure out the flow of the app and the placement of certain functions I created a couple of wireframes. I started out putting drafts on paper and then transitioned to more detailed versions in Adobe Illustrator.
I’ve designed about fifty unique screens in four different colours to ensure every function is present in the app and works intuitively with the rest of the app.
Here are couple of major screens with a bit of info.
When a user logs into the app successfully, they are greeted by the home screen. The main function of this screen is to serve as a gateway to the most important aspects of the app.
From the home screen the user is able to view their notifications under the notification bell in the top right. Notifications can include friend requests, new challenge requests and reminders to continue a current challenge.
There’s also buttons to lead the user to the leaderboard, to their list of friends, to their achievements and also to their own profile.
However, most importantly, there’s the button to start bowling. This button guides the user to a screen from which they can start playing.
After pressing the above-mentioned button to start bowling, users are shown a screen containing their current games. From here they can pick up where they left off in a game against another player or send a reminder to a player that still has to complete their turn.
From this screen, users can start a new game. After initiating a new game they will be asked to choose an opponent. This can be one of their friends or a random person.
At the bottom users can play also pick a practice game, where the user won’t be playing against another player or take a look at the leaderboard.
For every score a player gets, there’s a different illustration of Oscar interacting with the amount of pins that were knocked over. As well as illustrations for when a player wins or loses a game. These screens also have the player’s current score displayed.
The game utilises AR to place the bowling pins in the room with the player and the player has to move their phone to throw the ball. Therefore, there has to be some form of UI on top of the camera feed. This UI had to be clear, while also not take up the entire screen.
Logging into the app is fairly easy. The user gets two options, either log in using their username and password or create a new account. When creating a new account, the user will need to provide some information about themselves and set up a password.
The user will also need to choose one of the four colours. This colour determines the profile image of the user and also changes certain small details in the app to that colour.
To further motivate the user to keep playing, there are a couple of achievements they can collect. How far they’ve progressed is visible on the Achievements page. Each achievement has five levels indicated by different colours.
The leaderboard is exactly what it is, a leaderboard to see who’s on top and where you stand in comparison to others. The leaderboard can viewed in three ways.
Friends - See which one of your friends you have to beat to be in first place
Country - Make your country proud and become their leading man or woman
Worldwide - Face off against the whole world and reach the top
Each time the user plays a game and wins, their score will be added to the total score. If they lose, those points will be substracted from their total score.
I’ve put all of the screens into a working prototype which you can go through below.
Keep in mind that there might be a bit of a loading time between transitions and that the AR aspect of the app doesn’t work within Adobe XD.