Teleguard is a collaboration project of me as a designer and two other developers to practice collaboration between designer and developers. This project is still ongoing for a month and still on progress.
Overview
003
Problem
Every business from time to time is facing spam calls. They distract from work and sometimes even annoy the Call Center agents.
Outcome
A desktop application that help call centre identify call all at once.
Details
002
Role
Product Designer
Timeline
1 month and still on progress
Tools
Figma Adobe Photoshop Adobe Illustrator
Context
1 Designer 2 Developers.
The Solution
004
Acknowledging our persona's poor symptoms, Sama want to make it quick and straight forward!
Different countries has different medicine, Sama helps you to know what to expect!
Typing and searching? Let's speed up the process of searching your medicine!
We asked you once and Sama got you covered in the future!
Seeting Expectations
005
What this project is and what to expect
My goal with this project wis to practice collaboration between designer and developers.
01
Designer and Developer Collaboration
Highlights the importance of fostering effective collaboration between designers and developers, promoting seamless communication, shared understanding, and mutual respect to create cohesive and successful projects.
02
UI Exploration
exploring different user interface (UI) design possibilities, experimenting with various layouts, color schemes, and interactive elements to create visually appealing and user-friendly interfaces that enhance the overall user experience.
How can we design a future-proof desktop application for call centers that optimizes the identification and handling of spam calls, empowering agents with efficient call screening capabilities and intuitive call handling options?
Uncovering Issues
006
The average Call Center receives 10-20 spam calls daily.
Taking into consideration the fact that the phone line is usually pretty busy, there is no time to be wasted on the nuisance calls.
Building Solutions
008
Knowing Our Persona
I depicted our Persona and stakeholders as genuine as possible by conducting user interviews. They walked us through their experience and responded to follow-up questions to pull out the goals, struggles, thoughts, and feelings of each Persona and stakeholder.
Findings
010
Every minute counts for a call centre agent!
We discussed the design decisions to collaboratively design the application by listening to what they want to see, what features would be helpful, and how they react to the service.
Before: Dashboard
The wireframe shows nothing useful in a glance. There are no important data that pops out .
After: Dashboard
This way we know where to look when we have a call and when to see the data.
Creating Consistency
013
Building a robust design system & library
I created design library that will be use in the interface. I focus on learning the on UI sizing, creating icons. building assets, and all the details.
High Fidelity Prototype
014
Introducing Teleguard
We end up in a high fidelity prototype in our first sprint as we treat this project as a practice and is still in-progress on developing it.
Final Wireframes
With everything laid out and ready to go, I moved on to the (arguably) most fun phase of the whole design process: designing the Hi-Fi prototypes. Still utilizing Figma, I began bringing our wireframes to life with wonderful design entities such as: colors, illustrations, content writing, etc.
Sign Up page
Admin View showing other
Customer Call Agent view while got a call
Customer Call Agent view while on call
Lesson Learned
015
Reflecting on the project outcomes
As a designer, it is very important to know not just how we can collaborate but also understanding each other language. From this, I understand how can I communicate with them in an agile way. On the other note, I have also take a deep exploration in UI elements sizing and assets.
Appreciation | Documentation
016
Special thanks!
Special thanks to all survey, interview, and usability testing participants who helped the Teleguard development process journey. All documentation published has been acknowledged by all parties involved. Most importantly, my talented developer peers!
Final Outcome
004
Sama
Find the right medicine to relieve your symptoms despite the language barrier.
SAMAis an individual, one-term project that I completed at Emily Carr University of Art + Design. We were challenged to create a product in response to the theme of low bandwidth. So I created SAMA, an app that aims to help international travellers find similar medicine in other countries to relieve their symptoms despite the language barrier.
.png){kind=small}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
