VK
iLead Simulation
Redesign
Overview:
iLead is an innovative software simulation that helps business leaders hone their leadership styles. In this simulation, participants/learners play the role of a team manager, who is required to achieve business objectives by energizing and inspiring the team while responding to their needs. To succeed, they are expected to use a variety of leadership styles in response to tough situations that emerge within the simulation. This simulation is built to overcome the challenges faced in traditional learning environment.
Challenges:
-
Convincing the internal stakeholders to redesign the simulation
-
Lack of technical knowledge in co-designers
-
Tight schedule
Problems:
-
Bad User Experience
-
Cluttered UI
-
Product walkthrough is missing
-
Support option not provided
-
Increased support tickets
-
Report is not provided at the end of simulation
Goals:
-
Improve User Experience
-
Provide a fresh look to the simulation
-
Provide support option
-
Provide detailed user report and group report
-
Reduce the number of support tickets
-
Add guided tour for the simulation
My Role:
Product Designer
My Responsibilities:
-
Leading the Project
-
User Research
-
Product Design
-
Design System
Core Team:
-
Visual Designer
-
Design Intern
-
Product Manager
-
Project Manager
-
Two Developers
-
Tester
Sector:
Business to Business (B2B)
Duration:
8 weeks
IMPACT
Our design strategy, user research helped successful adoption of the new simulation design with an
increase in its adoption rate by
21%
Simulation rating - 4.45/5 and recommended by - 94.32% participants.
A Screen before the redesign
Fig: Dashboard page of the simulation
Design Process Model
The well-known ‘Double Diamond’ model was followed. The 4 D's.
DELIVER
DISCOVER
DEFINE
DEVELOP
Fig: Four Phases of the Double Diamond Model
Before I talk about the Discover phase, let me give you a brief on how the overall process of redesigning the simulation started. In the initial meetings with the internal stakeholders, one of them raised a request for revamping the iLead simulation:
​
-
The development code of the simulation has to be changed as Adobe Flash will discontinue
-
And let's provide a fresh look to the simulation
​​
​For the design changes, I was assigned with this task and the timeline provided was 3 weeks. But, later we concluded to do a redesign. Let's see how it happened.
​
As per the request I had to do a revamp but before directly jumping into the design changes, I had to understand the simulation.
- Understanding the simulation -
I was provided with the Product Requirements Document (PRD) and was given Knowledge Transfer (KT) about the simulation (Sim). I played the simulation to understand the areas that need design improvement. Apart from the UI issues, I wasn't comfortable with the sim flow as well. I faced multiple hurdles before I finished the simulation. Things like:
​
-
I wasn't sure how to play the simulation
-
I wasn't aware which action I have selected, until I see the results in the feedback panel
Around 150 issues related to UI, UX, Development and Content were raised and documented by me​. A redesign was needed but to convince the internal stakeholders, I had to do further research. To begin with, I started focusing on Internal research (Research within the office premises). Idea was to:
​
-
Understand the perspective of the internal stakeholders and
-
Understand the existing user data available.
- Survey (for internal stakeholders) -
Survey was sent to all the internal stakeholders with questions like:
​
-
Mention the top 3 things you feel improvement is needed
-
How would you rate the overall experience of the simulation? (out of 10)
-
Do you think that a redesign is needed?​
-
How well do other stakeholders communicate with you before making a decision?
The internal stakeholders involved in this survey were completely aware of the simulation.
The responses received were:
-
4 out of 7 internal stakeholders didn't know about User Experience
-
2 suggested that a redesign is needed
-
Average simulation rating was 6 out of 10
-
Few mentioned that content needs to be improved
-
A detailed report could help users understand their capabilities
-
Communication between the internal stakeholders was moderate
- Stakeholder Interviews -
A one to one conversation with the internal stakeholders helped to find: ​
​
-
The business goals and the user needs
-
Their role in this project
-
Why the product was built?
-
Our target audience
-
Our major competitors
-
and what is a successful product in their perspective?
​​
After analyzing the individual interviews, below were the key findings -
Business Goals:
-
To get more clients, which will lead to an increase in revenue
-
Provide a better service
-
Build a brand in the market
User needs:
-
Better experience
-
To learn quickly and efficiently
Other findings:
-
This simulation was built to provide an immersive and real life-like experiences to the users and overcome the challenges they face in a traditional learning environment
-
Target audience are First Time Managers, Mid-level Managers and the people who will become Managers
-
There are 2 direct competitors to the company but, for this simulation and its storyline, there are no direct competitors
-
A successful product is something which is easy to use, brings profit to the company, gains credibility in the market
​
With the insights gathered, a document was created (Document 1). Next step was to gather and analyze existing user data.
- Collecting user data from the customer success team -
The user data was collected from the Customer Success team. This team collects data from "live simulation runs" and from the tickets raised by users. The data collected from the simulation runs were single liner statements like:
​
-
This simulation is awesome or
-
Content could have been better
​​
But the data collected from the tickets raised by users helped me target specific areas and find the problems they were facing. Few questions raised in the tickets were silly, but those are the areas which we had to focus on to keep the sim play smooth and effective.
​
All the user data gathered was analyzed and documented (Document 2).
- A decision was made -
Though the data collected during the internal research was important and useful, it was not sufficient for a redesign to happen. To get in-depth knowledge of the issues users were facing, user interviews, competitive analysis and many other User Research processes should be performed. To do this effectively we would require more time. Out of the 3 weeks provided, one week was already utilized for the internal research, we needed 7 more weeks to finish the redesign.
A meeting was set up and the documents ( Document 1 and Document 2 ) were presented to the internal stakeholders.
Half of them got convinced for a redesign and the other half denied due to lack of time for the development. Multiple meetings happened and finally, the decider (Product Owner) concluded to do a redesign.
​​​
A documented proof helped the design team gain trust from the Product owner and a new timeline with 8 weeks was provided for the redesign. From here on, further exploration started.
- Competitive analysis -
There are direct competitors (For confidentiality reasons, names were omitted) for our company but not for this simulation. Few competencies addressed in this simulation match with our competitor's simulations but the storylines and the frameworks used are completely different keeping the focus on improving the leadership skills.
​
We visited our competitor's websites, used competitive analysis tools to gather the information but the details we collected were company-specific. Tools helped us find that our company was leading as our simulations were performing slightly better in the market, but the positions can change anytime.
Getting the details of our competitor's product was very difficult but somehow we managed to get access to their
simulation's screens. The details were confidential so it was presented by our Product Manager and we had to observe and note down the details required. We were not able to find the data on how the users were responding to our competitor's products but with the available details, we were able to discover things like:
-
Onboarding was not informative
-
Usability issues
-
User analytics report was not available
-
No innovations made to engage the users
​
All the information gathered above might not be accurate, so we had a quick meeting with the sales team to understand what our existing clients expect from the simulations present in the market. Few comments from our clients:
-
“Simulations lack in user engagement and user experience. It should not be must learn thing for the learners, they should be able to enjoy and love the experience of it.”
-
“Content in the simulations is not intense.”
-
“Detailed analytical reports could help users understand their capabilities and focus on the areas they need to improve on. Just showing the overall performance and ranking doesn't help much. They should be able to know how they are in that position.”
-
“When the Internet is slow, loading of the simulation takes time”
The data collected was documented for further research. It was minimum but was useful.
- Heuristic Evaluation -
To evaluate the product's usability, Heuristic Evaluation method was used. A Usability Expert was hired for examining the user interface and to identify the user experience issues. All the screens were analysed by the expert identifying the key issues and the areas for improvement. Few screenshots from the usability inspection are given below:
- User Interviews -
A simulation run happened at our client's office and approx. 200 users participated in it. Myself along with my design team attended the run as observers and once it was finished we requested 10 users to participate in the interview. The purpose of the interview was to find out more details in terms of the user needs and their frustrations.
Questions asked were like:
​
-
Tell me about your experience using the simulation
-
Can you please explain more about the issues you faced?
-
Do you think this simulation helps you to learn and grow?
-
Any confusions while playing the simulation?
​
The interviews were audio-recorded and the key findings were:
​
-
Users were not sure how to play the simulation
-
Average rating on the simulation was 5.7 out of 10
-
Users wanted to know their position among their colleagues
-
After an action was taken, users were finding it difficult to understand who responded in the feedback panel
-
Few users missed reviewing the leadership styles before proceeding to next week
-
Users were facing issues with the placements of the call to action buttons and feedback panel
-
Few users suggested to have a walkthrough in a video or audio format
-
There was no option provided for the users to raise an issue
-
Users faced confusions while playing the sim
-
A user suggested to have an option for selecting the team members from the list provided and create their team
- Usability Testing -
Qualitative Usability testing was conducted. The insights we gathered in the usability testing surprised us. Users were facing issues even if finding those things were easy. The sessions were video-recorded and the concerns raised by the users were:
​
-
How to go back to the home page from the history page?
-
Not able to access the logout button.
-
What is S, M, R below the affected members title in the history page?
-
In the dashboard screen, below the Role: Sales lead, there are only 2 actors visible then why does text below the 2nd actor shows "sales leads: 6"?
-
A lot of scrolling in the history page is annoying
-
Able to hire multiple team members for 1 vacancy
-
What is the use of an action column in the history page?
-
In the dashboard, Negotiated contracts were "0" but Converted were "1". How is it possible?
-
Once I send a team member for training, his skill, morale and result were unseen
-
I don't remember which style I have selected for the team members. It's not visible on the screen
All the research data was documented and the next step was to filter the data gathered and develop a clear design objective.
- Information Architecture -
Though the Information Architecture (IA) is built based on the existing design, we followed Card Sorting method for categorizing existing and new features to keep the sim flow smooth and effective. Few features like Video, Leaderboard and other improvements were added. After multiple iterations, we came up with the above hierarchy which includes both existing and new features.
- Persona -
Meet Richard, he works for an MNC as a Manager for the development team. He loves to explore and learn new things which help him grow professionally as well as an individual. He is in search of a safe platform where he can apply his learnings to understand his capabilities and the areas of improvement.
- Empathy Map -
Based on the insights gathered in the user research, we came up with an Empathy Map.
- Journey Map -
Based on the research data gathered, we created a journey map to find the pain-points and generate solutions at different stages of the simulation.
- Narrowing Focus -
A meeting was held with 7 members from different teams. Agenda was to collect the Problem Statements and generate How Might We (HMW) questions. We presented all the research findings to everyone in the room. Each member was told to write down at least 10 Problem statements. A total of 83 Problem statements were made and after eliminating duplicates we had 34 Problem statements. With the help of these statements, we generated 40 HMW questions. After voting, top prioritized questions were:
​
-
HMW make the onboarding informative and easy to understand?
-
HMW help users gain trust on the results?
-
HMW make the interface look better?
-
HMW improve user engagement?
-
HMW help the users easily understand different Actions?
-
HMW make the feedback panel less cluttered?
-
HMW help users understand their capabilities and areas of improvement?
-
HMW make different leadership styles upfront for the users to choose?
- Ideation + Wireframes -
Based on the key findings and Information Architecture, our design team came up with the initial sketches. The initial sketches helped us validate and eliminate different ideas at the early stages and find solutions. Then I converted those solutions into the wireframes. The image above shows sketching out ideas to high fidelity wireframes. Multiple iterations happened and we followed Agile methodology throughout the design process.
I presented the wireframes to the Product Manager to check if the flow and the designs meet with its objectives and the user requirements. Once the wireframes were finalized, I created an interactive prototype built using Axure RP and presented it to the internal stakeholders. All the feedback was gathered and the further iterations happened. Once the feedback was incorporated, it was tested with the users.
Based on the key findings and Information Architecture, our design team came up with the initial sketches. The initial sketches helped us validate and eliminate different ideas at the early stages and find solutions. Then I converted those solutions into the wireframes. The image above shows sketching out ideas to high fidelity wireframes. Multiple iterations happened and we followed Agile methodology throughout the design process.
I presented the wireframes to the Product Manager to check if the flow and the designs meet with its objectives and the user requirements. Once the wireframes were finalized, I created an interactive prototype built using Axure RP and presented it to the internal stakeholders. All the feedback was gathered and the further iterations happened. Once the feedback was incorporated, it was tested with the users.
- Prototype Testing -
Now that we have a strong prototype approved by all the stakeholders, it was the time to test it with the real users. Usability testing was conducted and we invited 10 users (colleagues who were First Time Managers). The tasks given to them were:
​
-
Understand the onboarding
-
Play the simulation
-
Understand the results
​
We observed every participants behaviour and collected feedback from them. Other than minor alignment issues and suggestions we mostly received positive feedback from all the users. Based on the feedback I came up with the Final Prototype. Once it was approved, the next step was to define the style guide.
- Styleguide -
Based on the user's request and a need to provide a fresh look to the simulation, I came up with a style guide keeping blue as a primary colour as it symbolizes trust. Using the style guide we developed the final screens. Below is the dashboard screen from the new design.
- What changed in the dashboard screen -
Fig: 1st image is old design, 2nd image is new design
​In the dashboard screen:
-
Made the objectives and tutorial options upfront
-
Added video option to understand the simulation
-
Leaderboard is added
-
The feedback panel moved to top at the eye level
-
Total conversions from the old design made as a button (Sales Funnel) on the right
-
Leadership styles selected are made upfront
-
Description of each Action is added in "i" on the right
-
Provided support option at the bottom
- Interactive Prototype -
With the real content and styling in place, I came up with the final prototype. This was presented to all the internal stakeholders including the CEO. The goal of this meeting was to find out if all the issues gathered in the research phase were addressed and solved in the new design. The feedback was positive and all the internal stakeholders were happy with the new design changes. Next step was to code the simulation and test it before the release.
All the screens were shared with the development team explaining each screen. They took approx. 8 weeks to program the simulation. With the programmed simulation in hand, we attended iLead simulation (old version) run and asked 5 participants to participate in the testing process. The screens were recorded and the feedback was captured.
Issues were related to:
​
-
Resolution
-
Content
-
and the programming bugs
Participants were happy with the new iLead design changes. Based on their feedback, we improved the content, fixed the resolution issues and the programming bugs. Next step was to release the product in the market.
- Release and Measuring success -
Product was successfully released in the market and feedback from the participants were collected after every run happened. We received amazingly positive response from the participants. Few comments from the participants:Product was successfully released in the market and feedback from the participants were collected after every run happened. We received amazingly positive response from the participants. Few comments from the participants:
Continuous feedback, action recommendations, and alerts on leadership styles helped me understand where I can improve
The simulation helped me practice and evaluate what I learnt in theory
The dynamism of the thoughts and emotions of the people is captured so well and appears to be real time
​Success can be measured using the feedback received and the outcomes:
​
-
Adoption rate - Increased by 21% within a month of release
-
Simulation rating - 4.45/5
-
Simulation recommended by 94.32% participants
-
Reduced support tickets
- Takeaways -
Before the project started, almost everyone involved in this project did not have clarity on UI/UX. They were just behind finishing the project asap. Convincing everyone for a redesign and making them understand the importance of UI/UX was a big challenge. I took this project as a responsibility because the Product owner believed in me and agreed upon 8 weeks time to finish the project. There is a lot of hard work involved and the key learnings were:
​
-
If the research is done properly and the information gathered is strong enough then the rest of the process will be easy
-
To involve developers early on to understand their challenges
-
Proofs play a key role in convincing the stakeholders
-
Only one decision-maker in the room
-
Design system is the key for scalability