“Let’s go: Bingo” App
I designed the entire UI interface for “Let’s go: Bingo“ App when the implementation of wireframes was completed on the test flight. The app was released in app store in May, 2020.
To download: Download on App Store
Project Summary
Background: The Bingo app has already been implemented and published on test flight but only showing placeholder designs (basic wireframes). I joined the team to work on the entire UI design to help its final launch on the app store.
Problem: People were encouraged to stay home during the pandemic, and it’s hard to connect families and friends especially when they are away from each other.
Solution: The Bingo game app allows people to play Bingo with an unlimited amount of friends and family, no matter where they are located.
Role: UI Designer (100% UI)
Time: May, 2020
Team: David Pochaplin - (Owner), Steven Pochaplin - (Owner and developer)
Tools: Sketch, Invision
Approach
Though the UX part of the app has already been finished - the basic wireframes have been implemented and there were some users have already started using the app via test flight, it’s still important for me to go through the user flows for a better understanding of the app itself.
Understand the product
During the pandemic when everyone was quarantined, the app was born with an idea of “connecting friends and families“. Same as the traditional Bingo game that people play at home, the app requires a user (game creator) to control the Bingo number while one or more players to look at the Bingo Boards to cross the number. Users can play the game with each other even when they are far apart.
The app is composed with 2 simple user flows, which are also the two main features.
One user creates a game and controls the game
Other users use the game ID to join and play the game
2. Design overview
By understanding the app, I did some research and came up with 3 different design themes for the owners to choose from.
Vintage - Bingo is a traditional board game ;
Modern - Bingo is now currently popular in casinos;
New - A new Bingo idea for new generation.
The 2nd theme was picked by David and Steven, they really like the gradient color as background and expect a few more options. By holding the keyword of “Fun” and “Colorful“, I explored more options:
3. Apply the confirmed design to all screens
Once the design theme was confirmed, I applied the design elements to all screens. The “create a game” screen was a bit more challenging because users need to make a few interactions on this screen: choose game type, create new game board, get number and the ability to reset the game. I had to keep the same button styles but also make them easier to tell from each other.
“Get Number” was placed as a CTA button and “Reset“ was place on the top right corner. I put the actual name of “Game type“ on the top of the screen to indicate the user what game he is creating, which saved users an extra step to actually click “Game Type“ and read the information. I also created a new button style for “Create a new board” using a different texts color as a secondary button design.
4. Assets Handoff
All screens were uploaded to Invision and developers were able to inspect all assets from there.