Revamping Saboteur: A UX Case Study
Introduction
Saboteur is a thrilling game of strategy, deception, and teamwork where one team seeks hidden gold while the other attempts to thwart their efforts. In the midst of a solitary pandemic experience, I turned to the unofficial app version of Saboteur for entertainment. However, I found the app's user interface (UI) to be quite basic and lacking thoughtful design. Determined to enhance the user experience, I embarked on a journey to redesign Saboteur's app UI while also addressing key user experience (UX) issues. Here's the story of the transformation.
Project Overview
The Challenge:
Improve the UI and UX of the Saboteur game app.
The Goals:
1. Enhance the app's UI for a more engaging and intuitive experience.
2. Address the issue of players not being able to adjust game settings easily.
3. Create a consistent and user-friendly flow for setting up and playing the game.
The Existing Experience
The original app featured a simple UI that lacked polish and usability. Notably, clicking the top 'play' button took players directly into the game without allowing for adjustments to game settings. This created a significant pain point for users, which I aimed to alleviate through redesign.
The Redesign Process
1. Research and Analysis
- I began by analyzing the existing app and its user flows to identify pain points.
- I delved into understanding the game mechanics and the nuances of Saboteur.
2. User-Centered Design
- The redesign focused on enhancing the user experience and modernizing the UI.
- A crucial part of this effort was to facilitate game setup, allowing players to choose between offline and online play, select opponents, and determine the game duration.
3. UI and UX Improvements
- I revamped the gameplay screen, ensuring it remained consistent with the new UI.
- I optimized the layout to eliminate unused space, maximizing the visual elements.
4. Redesigned Game Screens
- All screens within the game received a design overhaul to ensure a cohesive and enjoyable experience.
Key Redesign Highlights
Enhanced Game Setup:
1. Enhance the app's UI for a more engaging and intuitive experience.
2. Address the issue of players not being able to adjust game settings easily.
3. Create a consistent and user-friendly flow for setting up and playing the game.
The Existing Experience
The original app featured a simple UI that lacked polish and usability. Notably, clicking the top 'play' button took players directly into the game without allowing for adjustments to game settings. This created a significant pain point for users, which I aimed to alleviate through redesign.
The Redesign Process
1. Research and Analysis
- I began by analyzing the existing app and its user flows to identify pain points.
- I delved into understanding the game mechanics and the nuances of Saboteur.
2. User-Centered Design
- The redesign focused on enhancing the user experience and modernizing the UI.
- A crucial part of this effort was to facilitate game setup, allowing players to choose between offline and online play, select opponents, and determine the game duration.
3. UI and UX Improvements
- I revamped the gameplay screen, ensuring it remained consistent with the new UI.
- I optimized the layout to eliminate unused space, maximizing the visual elements.
4. Redesigned Game Screens
- All screens within the game received a design overhaul to ensure a cohesive and enjoyable experience.
Key Redesign Highlights
Enhanced Game Setup:
The top 'play' button now guides players through a structured setup process, offering choices between offline and online play, selecting opponents, and specifying the game duration.
Streamlined Gameplay:
Streamlined Gameplay:
The redesigned UI now creates a seamless transition from setup to gameplay, maintaining consistency throughout the app.
Optimized Space Usage:
Optimized Space Usage:
All screens within the game have been optimized to eliminate unnecessary space, providing a cleaner and more engaging experience.
Interactive Prototype:
I constructed a prototype of the redesigned app, allowing users to playtest the updated Saboteur app and provide feedback.
Conclusion
The transformation of the Saboteur app demonstrates the power of user-centric design in enhancing the user experience. The redesign has not only modernized the app's UI but also addressed a significant user pain point related to game setup. By providing a more engaging and streamlined experience, Saboteur players can now fully enjoy the excitement and suspense of the game while navigating the app with ease.
Interactive Prototype:
I constructed a prototype of the redesigned app, allowing users to playtest the updated Saboteur app and provide feedback.
Conclusion
The transformation of the Saboteur app demonstrates the power of user-centric design in enhancing the user experience. The redesign has not only modernized the app's UI but also addressed a significant user pain point related to game setup. By providing a more engaging and streamlined experience, Saboteur players can now fully enjoy the excitement and suspense of the game while navigating the app with ease.
