Design at D2 Nova

Build up a small design team and lead product design on Contact Center software. 

Product/UX Design | 2017 - present 

D2 Nova is a software company with decades of expertise in IP Communication. D2 builds professional communication services and platforms. The current product EVOX is a cloud-based business phone system. Based on that, we are building a new contact center software Connect which is a custom Call Center and Contact Knowledge database. It helps sales, support, and service to provide better customer experiences. 

Starting as the first in-house designer, I gradually become the lead designer and build up a small design team. During the work, I establish a set of design processes to ensure efficient and best product designs. I work with the management to synthesize requirements and turn them into design solutions. Based on our research and user studies, I proposed product architecture and user experiences. With our design team members, we delivered high-fidelity interface mockups and interactive prototypes iteratively. Also, we worked closely with the R&D team to ensure the realization of user experiences. 

In the below sections, I listed some key design projects that I have led, and the main design processes we go through. (Some images are intentionally blurred. ) At the bottom of the page are my thoughts and design concepts from the work.

Timeline

2017 - present, 3 yrs 6 mos

Role

Product & UX design lead

at D2 Nova

Tools

Sketch & Invision app

Atlassian Jira & Confluence

Flowchart Software

Design Process

∎ Research & Identify Problems

While some design projects has a specific requirement, most of the major design projects start from a broad business requirement and research.  The first step is to identify problems, learn user needs, or get familiar with the current solutions or best practices. Depending on the project scope and resource, the research time usually vary from 1-2 days to over a week. There are also a variety of research methods I used based on different project needs. 

1. Secondary research

I collect online information to get a quick understanding of the problem and the situation. 
For example, I use this method to analyze the market and competitors of our new contact center product and to expand my knowledge of professional call center features, such as ACD(Automatic Call Distribution), IVR(Interactive Voice Response), Call Queuing, Call Routing, etc. 

2. User interview

We hold informal interview sessions with target users to understand their needs. During the research of the Connect Agent app, we talked with our own sales and support team individually to know their daily work routine, listen to their feelings about work, and their goals towards customers so that we could identify aspects to help and improve. 

3. Persona & User stories 

Based on our target customers, we build personas and look into detailed using scenarios. Persona is a way for us to make sure we keep the users in mind and be empathetic when we make decisions about features or user experience later. User stories help us identify a specific scenario when the design and user flow is needed. 

Some of the study examples with the design team

∎ Define Features & Information Architecture 

 

Based on the  what we learned from the studies, I start to propose features by creating information architecture diagrams of the product. With these materials, we will hold a meeting with all stakeholders to discuss and settle down the functionality and scope of a project. This involves much feedback from the front-end and back-end engineering teams about the technical feasibility and implementation efforts and also opinions from the product manager (our CEO) about the business and market value, etc. 

Diagrams from Connect Manager

∎ Wireframes & User Flow 

 

I sketch wireframes (or paper sketches most of the time) to visualize the design ideaquickly try out different design solutions, or define structures of a layout.

For complicated task flows or first-time onboarding experience, I also define user flows to demo each step of the task. For example in designing the Connect Agent app, I defined the user flow for agents answering a customer call , to make sure this most important user experience process is smooth and efficient

 

(An agent user picks up a phone call > view the customer's profile > takes notes when talking with the customer > logs down call resolution and review customer satisfaction > creates followup tasks, etc.) 

Left. Some wireframes & flows from Connect Agent | Right. Sketches exploring a graphical IVR editor

∎ High Fidelity Prototypes

With the design team members, we turned the plain wireframe into detailed and colorful high fidelity prototypes to show a complete look and feel of the application. After the review and iterate process, we deliver them to front-end implementations. 

Sometimes, static screens are not enough for engineers to understand the interaction. we would also add animations to demo the transitions between elements or screens. 

We also create interactive prototypes for stakeholders and customers to try out the feature as soon as possible. These are sometimes used as sales demo materials or usability testing materials to learn people's feedback about the feature. So that we can iterate quickly.

Some high-fidelity prototypes from Connect Manager & EVOX PC

∎ Component & Styling Sheet

Along with the interface screens, we also present the design components sheets and a visual styling sheet to the development team for a thorough understanding of the user experience. 

The design components sheet is very useful to define different states and modes of a UI component. For example, a single card UI can have view mode, edit mode, blank state, warning state, error message, etc. It helps us to think thoroughly about all types of corner cases during the design. 

The styling sheet showcases a general visual language of the product. It includes defining fonts, colors, icons, and buttons. It helps us to maintain a consistent design language across the applications. 

Left. Activity components from Connect Agent | Right. Styling sheet from Connect Manager

∎ Usability Test

Depending on the project scope, we would also held usability test to learn user's feedbacks. As designers we spend tons of time digging into the feature and we are so familiar with the interface that we may not notice that a design demands high-learning effort for normal users given their time and experience with the interface. So we design tasks and run usability tests to learn the real experience when people are using the product for the first time. This helps us to find flaws in our design and to backup some of our design decisions.  

Some usability test summary from Connect Manager

Design Concept

∎ Thoughts on designing for toB products

It's more about problem-solving and provides efficient solutions.

​Comparing to toC products, toB products are much more complicated and heavily information loaded. So the user experience is not just about the delightful colorfulness and animated effects of the interface. Instead, I find it's more about presenting the numerous information in a clear and hierarchical way, and how you guide the user to perform their tasks efficiently and gain values from your product. 

Also, your target user is not a single person but a whole company that includes different roles. You need to think about the experience from different perspectives including users, managers, admins, etc. This requires more consideration of users' different situations and needs. 

∎ Design system

Based on this circumstance, I tend to keep a clean organization of information and define modulized and extensive design patterns for our products, especially for the web administrative consoles. For client products, I also keep a light-weight and minimal visual design language. The extensiveness of the design system is very important in agile development. It allows us to iterate the design quickly, seamlessly expand the functionality, and gives us lots of efficiency for the implementation. 

Project Management

Related Projects

AR Navigation