SIMBCM Redesign

Tool for business continuity and a global award-winning platform for resilient strategy games and simulations, providing an immersive experience that replicates real-world scenarios.

🧑🏼‍💼

Client

Saras Analytics & Consulting

🕑

Duration

3 months

👩🏽‍💻

My Role

UI/UX Designer | Front-end Developer

🛠️

Tools Used

Figma | Adobe XD

💼

The Team

Founder | 1x Developer | 1x UI/UX Designer

💡

My Key Contributions

User Research | Wireframing | Prototyping | HTML & CSS

Quick glimpse of the original vs the redesigned version

What does Saras Analytics & Consulting do?

Saras Analytics & Consulting is dedicated to providing a transformative learning experience, utilizing the power of interactive gamification and simulations. By crafting unique games, scenario simulators, quotient tests, and immersive training workshops, Saras Analytics & Consulting aims to equip the workforce with the skills required to navigate emerging situations, events, and crisis. Their innovative approach leverages adaptive scenarios powered by AI and ML, ensuring a dynamic and effective learning experience.

From the Founder's table

For this opportunity, I worked with Saras Analytics & Consulting and closely collaborated with the Founder, Ilango Vasudevan. Ilango's ideas aimed to develop interactive games and simulations centered around crisis management, business continuity, and resilience.

To accomplish this, he created SIMBCM, a global award-winning platform for resilient strategy games and simulations. It is an immersive experience that replicates real-world scenarios through the familiar framework of games such as Monopoly. SIMBCM promotes a spirit of healthy competition by leveraging the power of simulation and has garnered the trust of global clients such as AstraZeneca, Cognizant, Amadeus, BCI, and more in the process.

Ilango Vasudevan

CEO/Founder

Our Challenge ⛰️

Re-design the app to enhance the user experience while maintaining familiarity with the previous interface.

Requirements Gathering + Designing

During the initial phase, I collaborated with the Founder to collect the business requirements and gain a clear understanding of the intended audience, the feature’s purpose, and the reasoning behind its implementation.

Gather feedback + Re-iterate

After completing the initial mid-fidelity designs, I presented the various versions to the team to gather feedback and decide on the preferred option.

Tech team: Handoff + Support

I now hand over the high-fidelity, iterated versions to the developer. I was available to explain any discrepancies or doubts.

Research 🔬

Research Steps

01

To review user feedback and support communications for in-depth understanding of challenges encountered.

02

To observe and analyze user behavior during gameplay sessions for direct insights into user experiences.

03

To gather expert insights and documented issues for a broader perspective on user challenges.

04

To synthesize and analyze collected data for identifying recurring themes and actionable insights.

Key Insights 🔍

Overwhelming Icons and Controls

Users encountered difficulties in navigating the interface due to the overwhelming amount of elements. The presence of multiple icons and controls resulted in confusion regarding the appropriate click locations to access the desired information.

Result: The noisy interface with confusing click targets leads to user frustration and difficulty in accessing the necessary information, indicating a need for interface simplification and clearer visual hierarchy to enhance usability and ease of navigation.

Gap in Interactive Gaming Experiences

Many users had preconceived expectations of greater interactivity and engagement when they encountered the terms "gaming" or "simulation." However, the website primarily exhibited a module-based e-Learning approach, lacking a personalized touch. As the activity involved teamwork, users struggled to establish a sense of connection and engagement during gameplay.

Result: Users anticipate immersive and interactive experiences in gaming and simulation contexts. A design that incorporates visually engaging elements promotes longer user attention and fosters a stronger sense of connection during gameplay.

Navigational Roadblocks

Despite the intention for the game to be played independently, users encountered challenges in navigation and understanding the next steps. Questions piled up regarding when to submit or save their work, as well as how to effectively interact with fellow team members. The lack of intuitive controls resulted in users seeking guidance through moderated sessions.

Result: Users face difficulties in navigating and comprehending the game flow and interaction elements without external help or clearly labeled controls. Providing intuitive cues and comprehensive instructions can promote a more Do-It-Yourself (DIY) approach.

User Persona 🙂

The research conducted helped identify common themes and patterns, leading to the creation of the following user persona.

Goals 🎯

The redesigned version aims to enhance the learning process while integrating existing services to help users save time and have a seamless experience.

Goal 01

Users can find the information they require at ease

Goal 02

Interactive elements to increase user engagement

Goal 03

Users can confidently navigate to completion without client moderation

Goal 04

Reduce support emails received by the client overall

Design Concepts 🧠

The VIMM model

VISUAL

Reduce visual clutter by streamlining major buttons to the left panel.
Use spaced out cards to hold individual questions.
Ensuring main content occupies majority screen space.

INTELLECTUAL

Having major buttons organized in one area so the user does not have to think much on where to look.
Efficiently colored CTA buttons for clear emphasis.

MEMORY

Providing easy access for users to identify their progress in the course.
Labeling all buttons to reduce memorization of functionality and save time.

MOTOR

Placing primary buttons in the left panel to prevent moving around the screen.
Having multiple ways to navigate through course items.

And finally, let's get designing 🎨

paper & digital wireframes → mockups → hi-fidelity prototypes

Wireframes ✏️

Based on the user research and insights gathered, I jotted down multiple paper wireframes depicting various screens. Through iterative collaboration with both the founder and developer, we carefully assessed the elements within each design, determining which aspects were appealing and should be retained, while also identifying components that needed to be removed. I translated the selected design elements into a cohesive digital wireframe, integrating the chosen features. Finally, I used the Figma design tool to bring the ideations to life. While developing the user interface (UI), I stuck to the brand's established color palette to maintain visual consistency and created mockups that provided a realistic representation of the final screens.

Paper

Digital

Mockups

High- fidelity Prototypes 💻

Let's walk through the final outcome

Getting started

Easy and visually engaging Login

The login screen redesign prominently focuses on enhancing visual engagement, establishing an emotional connection, and integrating storytelling elements. Through the use of illustrations, the interface fosters a sense of interactivity that captivates the users' attention. I thoughtfully integrated white space to direct users' toward critical actions, optimizing usability.

Gaming instructions

Clear guidance before the game begins

One of the key challenges encountered by users was their tendency to overlook or quickly close the gaming instructions and scenarios upon entering the game. This led to difficulties during gameplay since the instructions provided crucial information for completing the game. Another major issue identified was related to findability, as users struggled to comprehend the meaning of various icons on the original screen.

To solve this, I introduced a left panel that featured a combination of icons and text, ensuring easy understanding. Additionally, the placement of the instructions on the left panel resolved the initial difficulty users faced in locating them. Implementing dynamic movement in the second set of instructions across the screen served as a visual cue, guiding users and emphasizing the importance of the instructions. I also incorporated a blurred background, so the users' attention is naturally drawn toward the location where the instructions are presented.

Viewing details

Left panel menu navigation

By consolidating all the essential elements into a single menu, the left panel streamlined the user journey, minimizing the time spent searching for specific features on the screen. This feature not only enhanced user efficiency but also contributed to increased engagement within the game.

The expandable nature of the left menu panel offers users the flexibility to display additional information on the screen during gameplay. They can expand the panel when they require more detailed information or want to access specific features without disrupting their gameplay. This feature allows for a wider view, enhancing focus and concentration.

Bringing to a close

Personalized gaming experience

The bottom section of the left panel introduces the layout feature, catering to users who prefer a personalized interface. This feature allows users to seamlessly switch between multiple layout options, empowering them to choose the one that best suits their preferences, thus creating a more enjoyable and intuitive gaming experience.

Additionally, the convenience of logging out eliminates the need for users to navigate through their user profile screen, providing a quick and effortless way to end their session.

Final Thoughts

We, as a team, were successful in transforming the original interface into a user-friendly and navigable design that resonated well with the target users. The process was intensive, spanning a few demanding weeks, marked by numerous iterations of designs, constant collaboration, and communication with the team. However, the effort invested proved to be highly rewarding. Ilango, the founder, was pleased with the end result and was excited to see his visionary ideas come to life.

Thank you for your time and dedication to this project. This is great work and I cannot wait for my clients to play the simulation games.

Ilango Vasudevan, CEO/Founder

Future Considerations 🔮

How to take this forward and what to keep in mind while doing so.

01

Micro-Games for Bite-Sized Learning

Implement micro-games that focus on delivering bite-sized learning of key concepts to facilitate quick and effective understanding, making the learning process more manageable for users.

02

Leaderboards and Achievements

Introduce leaderboards to enhance the gamification experience by fostering healthy competition and promoting badges and achievements, motivating users to excel and stay engaged in a dynamic learning environment.

03

Mobile Accessibility

Making the platform available on mobile devices will allow a wider audience to participate and benefit from the training programs anytime, anywhere.

Svastha

Go to projects list ☰