A custom application design allowing the Customer Care team at Cluey to quickly and efficiently manage a high volume of online learning sessions.
Cluey Learning delivers a personalised tutoring experience for students in Years 2-12, across Maths, English and Chemistry.
I designed this application to help our excellent Customer Care manage the high volume of online learning sessions to ensure that everything operates smoothly.
✓ Planning the project
✓ Identifying problems to be solved
✓ Low fidelity design and Prototyping
✓ Accessible-friendly color palette
✓ High-fidelity design
✓ Implementation and outcomes
Planning the project
The Customer Care team had an existing tool they used to manage online learning sessions. A small, internal team built it with limited time resources, and no user experience design process. The application was not going to withstand the future growth of the company, and the Customer Care team was spending a lot of time doing repetitive and time inefficient tasks as they had outgrown the current tool.
I took some time to plan the project, laying out a course of action, and sharing this information with the team. The planning included clearly defining the problems to be solved, auditing the existing UI to understand what the critical tasks were, and what was and wasn't working well for the team. The plan also included time to discuss design ideas while including the larger group and a design process, which included two main phases: low-fidelity design and high-fidelity design.
Identifying and understanding problems to be solved
One of the main underlying activities which underpinned the entire project was identifying the problems to be solved. I needed to understand what was essential to the Customer Care team as a starting point to think about design solutions. Working in tandem with the team, we identified just under ten main problems to be solved.
Many of the original design solutions focused on retrieving information that existed elsewhere and pulling into the platform. I did an initial audit to see what data we could access. I worked in high-level filters so the team could easily filter the expansive list to view a subset of sessions, which allowed them to action a specific course (s) with ease. I also included better visual indicators throughout the UI so the team could, at a glance, see things like which sessions were missing something important, which ones where the student or tutor were not present past the start time and where there was an audio-video issue. I took into consideration the tasks the team needed to perform and made the path to completing those tasks quickly and easily.
↓ Below: two screens from a larger deck highlighting design solutions based on the specific problem to be solved.
Creating a low-fidelity design concept to prototype and test design solutions
I produced low-fidelity designs, which allows me to quickly and easily convey the concept, which I tested with the Customer Care team over a small handful of iterations. Once the concept solidified, the high-fidelity design became the focus and included visual design and branding. Instead of getting bogged down in rounds of high-fidelity wireframes, I prefer to produce low-fidelity concepts. From there, I move right into the high-fidelity visual design. This process allows me to move quickly and work through design challenges in a realistic context.
↓ Below: A low-fidelity design and prototype used to test an early design concept
Designing using an accessible-friendly color palette
I had previously designed an accessible-friendly color palette for the learning platform at Cluey Learning, which I used for this project, which helped to ensure consistency in visual identity across projects as well as an accessible-friendly interface. The color palette included WCAG indications for accessibility-safe foreground and background color combinations.
↓ Below: Accessible-friendly color palette
High-fidelity design, flows & interactions
Using a pre-existing color palette and branding assets, I took the concept and started designing in high-fidelity visual design. I worked out and illustrated all the essential tasks; user flows, interactions, and menus during this process and using Adobe XD. Through a small handful of iterations and testing with the Customer Care team, I completed the project and moved into implementation.
↓ Below: Screens as part of final, high-fidelity prototype showing all screens, and interactions
I worked with one of our excellent in-house developers to implement the user interface. All the screens were exported to Zeplin to make CSS properties transparent and more accessible for the developer. We had frequent check-ins and pairing sessions to do Design QA and make sure the user interface implementation was correct.
Through the new design, we were able to able to increase the overall efficiency of the Customer Care team, allowing them to do more with the time they have in addition to offering a better experience to the customer. The new user interface catered to specific tasks the team needed to do, such as log and make customer communications transparent, quickly retrieve customer contact information to call or SMS a customer. See what sessions are high-risk to know which ones to prioritize managing as well make apparent the reason a session is high-risk to manage it better. Through using visible signals via iconography in the user interface, the Customer Care team can scan the interface to see what sessions are missing a tutor, who is present (and not present) in a session that has started and when a session needs monitoring assigned to it.
“Jess was fantastic to work with. What I appreciated the most was the level initiative she took to understand the problem we were trying to solve. Jess took the time to consult various stakeholders and design a solution that completely met our needs. Thanks Jess!”
—Namrata, Head of Customer Operations
↓ Below: Nam, Head of Customer Activation and Cait, Team Leader of Operations