Case Study: Telegram Mini App UX/UI Redesign and Development of EdChess App

Project Overview:

The EdChess project focuses on redesigning and improving the UI/UX of an existing chess-based mobile application. The goal was to modernize the app, adapt it for Telegram integration, enhance user experience, and introduce new features such as CryptoGame, Daily Quest, and tournaments.

Timeline: April 2024 - July 2024

Design Team Lead: Vino Costa

Client: EdChess

Platform: Mobile (iOS/Android), Figma

Project Objectives:

• Redesign the App Interface:

  • Update the existing UI to a more modern, visually appealing style.

  • Adapt the app for integration with Telegram, considering its unique requirements.

• Feature Enhancements:

  • Introduce new sections like CryptoGame, Daily Quests, and an advanced leaderboard system.

  • Improve the chessboard design, including better visibility of the time and clear representation of moves.

• User Experience Improvements:

  • Ensure the app is compatible with older devices.

  • Enhance the onboarding process to guide users through app features.

  • Introduce anti-cheat mechanisms and a fair ranking system.

• Flexibility for Future Updates:

  • Create a design system that is flexible for adding future game modes and features.

Process:

1. Initial Client Meetings & Requirement Gathering (April 2024):

   • Initial discussions highlighted the need for a redesign focusing on CryptoGame integration and Telegram adaptation.

   • Client provided detailed requirements and preferred design approaches, emphasizing simplicity, modern aesthetics, and functional clarity.

2. Design Sprint 1 (April 2024):

   • Created the first version of the app redesign, focusing on the home screen and primary navigation.

   • Initial design iterations reviewed, with client feedback leading to adjustments in button placement, color schemes, and visual hierarchy.

3. Design Sprint 2 (May 2024):

   • Focused on the chessboard UI, addressing key issues like time display, move notation, and piece design.

   • Integrated client feedback to adjust design approaches, ensuring consistency and user-friendly navigation.

   • Implemented improvements based on usability testing, such as better piece visibility and simplified move tracking.

4. Introduction of New Features (June 2024):

   • Developed screens for new features like Daily Quest, Statistics, and Events.

   • Introduced onboarding for new users, including skill calibration with bot matches.

   • Designed anti-cheat reporting functionality to maintain fair play within the app.

5. Final Adjustments and Client Sign-off (July 2024):

   • Finalized UI elements for all major sections, including the player leaderboard, tournament pages, and individual user profiles.

   • Added flexibility for future updates, such as modular components and scalable elements.

Key Challenges:

• Design Adaptation for Old Devices: Ensuring compatibility across a wide range of screen resolutions and devices.

• Telegram Integration: Adapting the UI/UX to meet Telegram’s specific guidelines and platform standards.

• Feature Scalability: Creating a flexible design that accommodates future game modes and features without requiring a full redesign.

• Maintaining Consistency: Ensuring that all components align with the overall brand and user experience goals despite ongoing iterations.

Solutions:

• Responsive Design: Implemented scalable design principles to ensure smooth functionality on older devices.

• Modular Design System: Developed a system that allows easy updates and additions to the app's features.

• Proactive Feedback Loops: Regular client check-ins to align design choices with business goals and user needs.

Outcomes:

• Modernized UI/UX: The app now features a cleaner, more modern design with improved user navigation and engagement.

• Enhanced Features: New game modes, onboarding processes, and reporting systems have been successfully integrated.

• Client Satisfaction: The project progressed in line with client expectations, receiving positive feedback on the redesign and new features.

Conclusion:

The EdChess app redesign showcases the importance of iterative design, client collaboration, and adaptability in creating a flexible, user-centric product. With a strong foundation laid for future updates, the app is well-positioned to expand its feature set and user base.