Providing gamified and fast general training modules for BPO companies
Type
Web Application
Desktop Application
Role
UI/UX Designer
Front-End Developer
Game Developer
Security Engineer
Scrum Master
Tools
Figma
Invision
Photoshop
Phaser
Godot
NextJS
ReactJS
Timeline
2018 - 2021
Duration: 3 Years
The Problem
How might we design an application that provides an efficient training system for new hires while maintaining a cohesive workplace management system for current employees in BPO companies?
Process
Basic structure to help solve problems more effectively
Back in 2018, I wasn't formally trained in UI/UX or design thinking, as the field was still emerging. However, we engaged in product research, ideation, design, development, and testing as we created this product.
While working here, I dipped my hands into design, as I was the only one capable of using Photoshop. I noticed how delighted our users were when our interfaces began to apply UX principles. I love making people happy, and seeing them use our functional and usable product made me fall in love with design. I had no formal training, so my first prototype was a visual design mess (see Game UI v1). But thanks to that experience, I started learning more, taking courses, and reading books related to design. Although I love coding, I ultimately wanted to find a career path where I could spend my free time constantly learning, striving to become better, and never getting bored, all while being professionally productive. I believe design is the intersection of all the things I am passionate about: art, psychology, and technology. This work opportunity is what inspired me to shift from software engineering to product design.
Research
Empathizing with users
It is important to know who we’re solving for and what their needs and motivations are. However, our team, composed mostly of software engineers, had limited knowledge about the call center industry so we lacked understanding of what features we should build. This gap presented a challenge in identifying the right features for a training system that could efficiently serve BPO companies.
So, to empathize and understand our target users, we conducted multiple user interviews with call center agents who are part of the training and recruitment process. We also conducted user interviews with current call center agents regarding their experience during their recruitment phase and their situation now.
Key questions we wanted answered at the beginning of the project
Ideation
Brainstorming solutions
After empathizing with our target users using user interviews, we tried to brainstorm possible solutions that can help address users' needs. Our goal was to streamline the job application and training process for call centers while making it more engaging.
To achieve this, we explored various fields, including gamification, learning methodologies, and psychology. Our team conducted extensive secondary research, ranging from taking courses about how to learn, reading research papers, gamification books, blogs and articles from the internet.
We also employed competitive audit to understand existing products in the industry that shared similarities with our concept. Some applications we reviewed are Duolingo, Elevate, Torn, and other language learning applications.
To organize and analyze our research findings, we created an information architecture to lay out the subsystems and how they work together. Each module was clearly defined in terms of its responsibilities, and tasks were distributed accordingly. I managed six of these modules, which I will discuss later.
We also created various diagrams, including user flows, screen transitions, and class diagrams, to figure out key features we need to prioritize developing.
Design and Development
Creating a model of a product that demonstrates its functionality, flow, and goal
Wireframes and Hi-Fi Prototypes
After synthesizing the data from our research, we moved on to the design and development phase. Design and development was done side-by-side as I’m the only one in the team that can do both. Each sprint focused on a feature, starting with wireframes to outline page structure and element functions. I then presented the wireframes for team feedback. After incorporating their input, I will create a hi-fi prototype to ensure everyone was aligned on the final look and feel of the app. Once the hi-fi prototype was approved by our project lead, I translate the design into code.
Product Showcase
The solution
Game UI v1
This is a standalone game application published in the web. The player can train, get hired, and specialize in available BPO jobs using this application.
Made with Photoshop, Invision, and Godot.
Client UI v1
This is the module responsible for managing lessons, payments, jobs, and employees.
Designs can always improve with each feedback we get from a user. So as much as possible, we try to get feedback from end users by conducting moderated usability studies and in-house testing. With each feedback, we got invaluable insights. We then used these insights to create a better experience for users and improve our application.
After getting input from our end users, it is also important to consider stakeholder feedback to balance user and business needs, so we regularly have presentations with our CEO.
Key Insight
Thanks to this work opportunity, I got to wear different hats ranging from development, design, to management. While working, I learned to appreciate how design greatly affects our users. Most tech startups put the experience of a user on the back burner as they try to churn out a minimum viable product as fast as possible. I realized a recurring problem during my stint at AI-Pros: our end users needed to be taught, instead of them using our product intuitively. So I started deep diving into design. Technology should make our lives easier; not the other way around. I have since strived to create products with the users as the priority. As I got into design alongside technical product development, it felt extremely satisfying seeing our users at ease with our products.
