Design at D2 Nova

Design and Ship Cloud-based PBX and Contact Center Software

Product/UX Design | 2018 - present 

D2 Nova is a software company with decades of expertise in IP Communication. D2 build modern communication services and platforms. The current product EVOX is a cloud-based business phone system that can operate on both mobile and PC and have a web administrative console. We are also actively building new contact center software EVOX Connect for agents and managers to provide better customer experience.

As the lead user experience designer, I work with stakeholders to gather requirements and translated them into product solutions. Based on the research and user studies, I propose product features, define user flows and sketched out interface wireframes. With the design team members, I deliver high-fidelity interface mockups and interactive prototypes iteratively. We also work closely with the front-end development team to ensure the implementation of user experience and interface. 

Timeline

2017 - present, 3 yrs 2 mos

Role

Product & UX design lead

at D2 Nova

Tools

Sketch & Invision app

Atlassian Jira & Confluence

Flowchart Software

Design Process

∎ Research & Identify Problems

Most of my design projects start from the research. The goal is to identify problems, learn user needs, and get familiar with the current solutions or design practice of related problems. Depending on the scope and resources of a project, the time spent could vary from 1-2 days to over a week. My research methods also differ based on the need for a project. 

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 later we are designing features and user experience. User stories help us identify the specific problems that we need to solve with the design. 

Some of the study examples with the design team

∎ Define Features & Information Architecture 

 

Based on what we learned from the research 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 (even paper sketches most of the time) to quickly try out different design solutions, organize information hierarchy, and design basic structures of the layout.

For complicated use cases or special first-time experience,  I will define user flows to demo each step of completing the task. For example in designing the Connect Agent app, I defined a user flow for agents answering a customer call, to make sure this most common 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, I 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. I 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 application. This is sometimes used as a sales material demoing to our potential customers to learn their attitude and feedbacks about the product.

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 view modes of a UI component. For example, a single card UI can have view mode, edit mode, warning state, a blank state, 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

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 much about the delightful colorfulness and cool animated effects of the interface. Instead, 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 or hierarchies. In design, you need to think about the experience not just for normal users but also for managers, admins, etc. This requires more empathy and 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 consoles. For client-side 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 seamlessly expand the functionality and gives us much efficiency in the implementation. 

Project Management

Related Projects

  • Instagram Link
  • Pinterest Link
  • LinkedIn Link
  • Vimeo - Grey Circle

© 2020 Jing Yan, All Rights Reserved