Project
1
Info
2
Tokio Sushi 🍣
this is a restaurant in Serbia in the city of Novi sad.
My Role
UX/UI Designer
Tools
Procreate
I have a habit of noticing things that I could improve. That's what happened with the online menu at this small restaurant. I noticed nuances that would make it easier to find the dish I needed, and also added an element of play and learning.
Timeline
2 weeks
Figma
Overview
3
The Need
We needed to create a simple yet engaging neon-style interface for a browser-based game that could bring colleagues together during a corporate party.
Process
4
Before
The initial version of the game was coded in Python by my friend, but the interface was basic and lacked polish. My role was to take this foundation, develop a cohesive visual style, and refine the user experience to deliver a complete, user-friendly product.
Process
5
Changes
Here are the key improvements I suggested during the initial design phase:
- Word Counter: Adding a counter to show how many words remain in the round, increasing excitement and urgency.
- MIX Category: Introducing a category with words from all themes to keep the gameplay dynamic.
- Expanded Categories: Ensuring replayability by offering 4-6 categories with enough words for multiple rounds.
- Timer Adjustment: Correcting the countdown direction for clarity and ease of use.
- Optimised Timing: Testing and refining the timer settings to balance challenge and fun — for instance, reducing the timer to 01:00 for added intensity.
Process
6
Moodboard
To align our vision, I created a mood board featuring potential visuals and colour palettes. This ensured that both of us had shared expectations for the look and feel of the game.
Process
7
Game Map
Next, I developed a game map to outline the logical flow of the app and identify all necessary screens. This included accounting for scenarios such as running out of time without guessing any words.
Process
8
Wireframes
I then created wireframes to plan the layout and content placement, ensuring clarity and usability. This step helped eliminate unnecessary elements while refining the initial concept. With the structure in place, the game’s design started to come alive!
Process
9
Onboarding
To simplify the user experience, I added an onboarding that appears when the game loads. This step introduces the rules clearly and concisely. For returning users, a “Skip” button provides quick access to the game.
Process
10
Main Screen
The menu screen serves as the entry point to the game. For the MVP, we included six categories. However, I designed the interface with scalability in mind, ensuring room for additional categories and features in future updates.
Process
11
Task Management
To effectively track tasks, we maintained a task list in Notion. This tool provided clear visibility into our progress and allowed us to stay organsed.
Additionally, we documented problems, bugs, and relevant code snippets in the same workspace, ensuring that all project information was centralised and easily accessible.
Additionally, we documented problems, bugs, and relevant code snippets in the same workspace, ensuring that all project information was centralised and easily accessible.
Process
12
The Game
Here’s how the game worked: After selecting a category, the countdown timer began, and players were presented with cards displaying words that needed to be explained to their team. We reduced the time limit to 1 minute to keep the gameplay fast-paced and engaging.
The "GOT" button was designed in bright pink to draw attention, while the "SKIP" button featured a calmer purple shade for balance. At the end of the round, the game displayed a count of correctly guessed words.
To encourage further gameplay, a gradient "Go on!" button invited players to continue, while a neutral "Enough" button provided the option to end the session.
The "GOT" button was designed in bright pink to draw attention, while the "SKIP" button featured a calmer purple shade for balance. At the end of the round, the game displayed a count of correctly guessed words.
To encourage further gameplay, a gradient "Go on!" button invited players to continue, while a neutral "Enough" button provided the option to end the session.
Lessons Learned
13
Project Reflections
and Future Potential
and Future Potential
This project was a fantastic opportunity to enhance my skills in mobile interface design and collaborative development. Daniil and I worked closely, iteratively improving both the design and functionality. The process was not only productive but also incredibly enjoyable.
The final product was a success — Daniil and his colleagues played the game at their New Year’s corporate party, where it received glowing feedback! 🥳
Looking ahead, this game has the potential to evolve into a fully-fledged mobile application for the App Store and Play Market, bringing fun and connection to even more teams around the world.
The final product was a success — Daniil and his colleagues played the game at their New Year’s corporate party, where it received glowing feedback! 🥳
Looking ahead, this game has the potential to evolve into a fully-fledged mobile application for the App Store and Play Market, bringing fun and connection to even more teams around the world.
Process
14
We’re hard at work
But really, what’s work without a cuppa tea?☺️
