Challenge:
In 2014, IBM faced a challenge: how could they make their technical support services education program more engaging and enjoyable for their business partners and employees?
They wanted to develop an app to provide a fun and interactive learning experience, for the subject was not inherently interesting.
I was asked to rise to the challenge and create an engaging gamified application suite that effectively educated IBM’s business partners and employees on the relationship between hardware, software, and technical support services excitingly.
CLIENT
IBM CH (TSS EDU)
ROLE
Product Designer
PLATFORMS
SaaS, Online, Mobile (iPad)
TOOLS
Figma, InVision Freehand, Adobe XD, MS Excel, MS PowerPoint, MS Visio, Unity 3D
METHODS
Information Architecture, Use Cases, Personas, User Flow, Surveys/Interviews, Design Thinking, Design Doc/System, UI, A/B testing, Identity/Branding, Marketing, Usability Testing, and Customer Interaction Analytics
DURATION
Five years (1-year preproduction, 2 years production, 3 years customer Beta)
What is Simulcation?
The project was intended as a marketing and educational training system for IBM business partners and the internal sales team.
It utilized simulation and real-time 3D graphics to present IBM components and Technical Support Services in a novel and innovative fashion.
The purpose of Simulcation Datacenter was to instruct participants on a corporate data center’s comprehensive operation, including software and hardware decisions, business directives, and objectives. My previous experience designing successful entertainment and simulation digital products earned me the role of product design lead on the project.
Phase ONE
Ideation, Data Input & Information Architecture
We generated ideas through individual brainstorming sessions and design sketching, then organized and prioritized app features using affinity mapping.
We developed customer personas to help inform the ideation process and ensure that the ideas generated would be relevant and valuable for our target audience.
Using the information gathered from the customer personas, stakeholder meetings, and target customer interviews, I created an information architecture tailored to our target users’ needs and behaviors.
This involved organizing and labeling content to make it easy for them to find and understand by creating a hierarchy of content, defining categories and subcategories, and establishing conventions for labeling and organizing content.
Based on the resulting architecture, the stakeholders at IBM gathered data based on these sessions to simulate a data center at the application’s core. This data was assembled initially in Excel sheets.
Data Input & Information Architecture
We received data from IBM in the form of XLS tables and used it to inform the visual design, technical design, and implementation of the simulation code. The data input and information architecture phase allowed us to carefully review and understand the information provided by IBM, enabling us to effectively use it in the design and development of the simulation.
Phase TWO
Design Methodology
We chose to use an Agile Sprint-based methodology for the app design because it aligned well with our existing simulation development structure. This approach allowed us to collect data from IBM in the form of detailed Excel documentation and iteratively develop and test the app, ensuring that it meets the needs of IBM and its customers.
Customer Flows & Wires
Screen by screen, the application was visualized and refined by testing, stakeholder input, and scrum team challenges.
Mobile Prototypes
With a well-vetted design and stakeholder approval, I worked with my graphics team to create prototypes of the core features for testing and refinement with business partners and customer champions. This testing allowed us to further refine the technical documentation and prepare for the start of the development phase.
Project Timeline
After defining the core features of the simulation and application, we created a timeline for the project by mapping out the various development phases.
Detailed Documentation and Design System
As the simulation technical design and prototypes were tested and refined, I refined and detailed the wireframes and the simulation’s interface control sets. I began and then amended these interface sets’ visual library and design system.
Development team Sync and Production Kickoff
Having completed a thorough testing and design process, we had a wealth of documentation that the back-end and front-end development teams could use to start building the simulation and visual interface of the application. This collaboration allowed us to bring the different components of the app together and create a cohesive final product.
Initial Product Brand and Trademark
During an early design meeting with the stakeholders, we brainstormed several potential names for the product that would effectively communicate the themes of “Education” and “Simulation.” We eventually settled on the name “SIMULCATION,” which combines these two concepts and is unique and descriptive. IBM then began the process of securing a trademark for the name.
Phase THREE
UI Production (Mobile Client)
Deployment targets: Unity 3D on iPad and PCs
My team and I created final versions of the design assets, including 3D and 2D graphics, interface controls, and layouts, and prepared them for use in the final application. We used our design system to provide production-ready assets to developers for implementation. We collaborated with them and the stakeholders to ensure that the design was implemented correctly and met the project’s needs. Furthermore, we also provided the design for testing and validation by the QA and Usability groups and worked to resolve any issues that arose through Scrums and iterations.
SAMPLE UI:
INS (Intelligent Networking Support)
The team’s favorite design for the INS tool was a modern CTA-focused design we created in Figma. The benefits of the design approach presented the critical data objects and calls to action with a modern, subtle color palette.
Adherence in Design
Matching Real-World Tools
After a positive client review of the UI, The external tool provider requested we adhere to the app’s original plan/design for the best education/training regarding the real-world tools a customer may encounter.
A design decision to support existing tools in IBM’s software catalog had a decisive effect on the overall UI design. To create a familiar experience, the team adopted an older framework and approach from an earlier version of MS Windows.
Selected Production Modals and Readouts
The aesthetic of Microsoft Windows and the principles of Inclusive Theory influenced the design of the modals for the application. Project stakeholders requested that we adhere to a strict rule of pure forms, squares, circles, and simple shapes and create a functional, Windows-based design for ease of use. We minimally used bass relief and shadowing on active and default buttons and recesses for entry fields and meters. The color palette for the design was based on a selected palette for IBM applications, with other app-specific highlight hues added
All graphics in the application were created as Scalable Vector Objects in Adobe XD. This approach ensured the runtime footprint of the application on mobile devices was as small as possible.
Real-time 3D Models
3D modeling and simulating over three hundred IBM and Partner Datacenter Components
Each simulated component was modeled on real-world products from IBM, Cisco, Lenovo, and more. The product is accurately visually represented in real-time 3D, and functionality is also simulated.
Phase FOUR
Simulation and Component Production
3D Simulation: Inside the data center
A real-time simulation of all simulated components is realized in the applications 3D data center to highlight and educate on Technical Support Services and hardware component features.
Future learning modules (missions) are ready to be presented by the application’s animated technician characters and an avatar instructor. A session-based timeline interface was prepared to highlight any particular situation, condition, or incident.
Complete sets of services and products were completed to present important IT considerations. All the information a customer would need about potential real-world issues and how to avoid them in a real-world data center was in place.
Fully Operational Simulation
After two years of development, we had a server-based mobile (iOS) and desktop functional beta project that incorporated over 300 data center components, ranging from switches to servers, cooling systems to uninterruptible power supplies. These components were simulated using a 30,000 data point computational model of the data center, created by a team of experienced simulation modelers.
My role during this time was to ensure that the application was ready to use and aligned with the business objectives for the next step, educational success, with IBM’s critical international business partners.
VIDEO – Data Center Simulation Fly Through
A close-up view through the simulated data center at the heart of the desktop and mobile application.
VIDEO – Welcome to Simulcation
An introduction to the future of learning, the Simulcation Application Suite.
VIDEO – Example Education Module ‘INS’
A lesson sample from IBM’s Technical Support Services Academy education program.
2017 IBM Pilot Project Launch Event
After two solid years of developing the application into a business partner-ready application with a basic set of educational content, the app was ready for IBM Business partner testing and development of partner-ready lesson content.
Phase FIVE
Developing the Education Content
Designing with IBM Business Partners
After the successful launch and testing of the Beta project, I collaborated with IBM and other business partners to design educational content for the application. The goal was to address the difficulties in understanding the intricate connections between software, services, and hardware in real-world data centers and provide service support teams with the information and tools they need to communicate effectively with customers and potential clients.
We used Design Thinking to identify educational challenges and then used these insights to create ideas for marketing the product to business partners. These ideas were then developed into lessons and contest landing pages for future business partners who will participate in the program.
Cloud Deployed Tools for Content Creation
I worked with my development teams to create a comprehensive set of online tools for managing the application suite. We established various administrator roles to allow for team collaboration.
IBM System Administrators could add new hardware and software products and create accounts for business partners and participants using their existing IBM login credentials.
Educators could access the lesson tools and edit the educational content and create mission objectives and goals for group contests or individual lessons.
Business partner administrators could assign lessons to participants in their organization and recognize top performers in contests they hosted.
Realizing Lessons for IBM’s TSS (Technical Support Services) Academy
My team developed and delivered three pathways for participating in the educational content to educate IBM business partners working with TSS Academy. These pathways were:
- Participating in a group competition using gamified lessons. The highest performers in the lesson received prizes such as online shopping vouchers, simulation medals, and merchandise. They also received additional certifications and badges through IBM’s TSS Academy for participating in IBM’s TSS Education Program.
- Logging in via the TSS Academy site and then via the Application activated the TSS lessons. When the learner completed a lesson by achieving the mission’s goals, they were awarded the certification for the skill when they returned to TSS Academy.
- Watching the “Skill Series” learning modules online through the TSS Academy and then practicing the application lesson independently in the application. Participants could earn an official skills badge by completing a TSS Academy online portal questionnaire.
VIDEO – The Simulcation Site for Education Participants and Admins
The features of the Simulcation Datacenter Website for the learner and Administrator are explained.
VIDEO – Online Tools for Educators and Lesson Creation.
A step-by-step explanation of how the Simulcation educator creates a Simulcation Datacenter lesson.
