BluePrint Redesign
BluePrints redesign is a Flow System helps Bell customer support centre agent collect customer information and question and help them find best solution and offers. I led the design process of the new version of the system and implementing core functionalities for the past 2 years.
Understand why we need a redesign
1. There are two apps existing in the current system that are highly used by the customer service team, one used for user data visualization, another is the flow system that generates questionnaires. Agent always need to run them in parallel which increases the time to dealing with one customer, the main goal is to merge two apps experience together and reduce their timing to finish one task.
2. Come up with the branding with our team in bell to be easier to generally present to other teams and maybe come up with our own design system for future usage
Research
1. One on one interview
We invite some representative and manager from the service team side, about 3-4 people to do the one on one interview to gather information about their day to day use cases, the problems they are facing, and the edge cases that happening which we didn’t think about in the previous versions
2. Focus group investigation
We get to the customer service working place to do some offline investigation and dig deeper into their daily use cases and find out the points they are not covered in the interview process. Also we went to the retail store which is the group that’s not using our product but something similar so we can absorb some new ideas and inspiration from other groups' use cases and similar applications.
Analyze
1. List out the problem we are trying to solve
Having few meetings with Group of people ( Myself, core developer, project manager and manager from the customer service team side ) to discuss the problems we are trying to solve and the points we always need to consider while doing the redesign process
I. Merge functionality of two apps together, make sure every existing functionalities are in the new design and easy to access
II. Allow agent to able to browse through customer information without switching to another app or jump out from current session of flow
III. Reduce and hiding the useless information to let the agent focusing on current step always
IV. Give more room and possibility to add functionality to a step for expandable consideration
2. What we missed
User persona, User journey map
Design
1. Reverse Engineering
Since the main goal is to merge the experience of the app, we need to study and do some reverse engineering of the two existing apps to figure out the user flow and information architecture. ( Whiteboard )
2. Use case diagram and User flow Diagram
Use Case Diagram helps everyone easily understand major functionalities of the app and connections with other app/micro-services on a high level view. Design the user flow for high level use cases and low level use case for our new application so teammate can easily track on different use cases ( White board and Miro board)
3. Wireframe and Low-fi mockups
Come up with wireframe and low-fi mockups to be easily communicate within the team and gather feedback and suggestions, keep everyone on the same page ( Figma )
4. Design System
Building a Design system include components library, typography, colours, spacing and behaviour principles helps both designer and developer quickly find reference within design and coding, Increasing the reusability and reducing the time coming back and forth.
5. Hi-fi Design
After everyone's agreement on the previous stages of design, getting into Hi-fi mockup to bring the visual to the design so everyone has a better picture about what it will look like eventually ( sketch )
6. Prototype
Working on the interactive-able prototype so everyone can get a hand on it and give more accurate feedback on that ( Sketch and sketch cloud )
Iteration and Polishing
We didn’t directly coding and launch the live version considering of the due date of the project, instead I worked hardly on the prototype to make it as accurate as possible to the live version and use this one to give our agent for user testing and gathering feedback from them, it’s not great but we still gather lots of valuable ideal back and get back to the iteration to polishing the redesign
Pre-launch, Post-launch and Maintenance
Our app successfully launched early this year and we added adobe analytics to monitor several metrics, and it comes out our app reduces the average time of agent spending on one customer by around a minute, which is a huge improvement in the biggest telecom company.
We are keeping adding features and new ideas to the app following the UX design pattern right now and keep improving and learning new ideas and tools during the process.
