logo Jonas
Oscar app

Oscar

UI Design

A concept design for a bowling app. The app utilises AR to place the pins in the room with you and you throw the ball by moving your phone. Play against your friends and rise up in the leaderboard.

Discover more

briefing

The briefing for this concept was 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.

logo design

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.

White circle White circle

Wireframes

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.

White circle White circle

Screens

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.

White circle

Home screen

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.

White circle

Start a game

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.

Game screens

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.

White circle White circle
White circle White circle

Log in

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.

White circle White circle

Achievements

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.

White circle

Leaderboard

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

White circle
All projects
Explore prototype
PREVIOUS PROJECT

NEXT PROJECT