Apollo design team is IQVIA design center under IQVIA Technologies segment. This team is a group of UX designers (different levels), UI designers, researchers, content strategists, product managers and engineers. The service is to provide research, design strategy, design solutions, and help for product implementation through the whole product development process. IQVIA has increasing needs for product design support, and strong request of product development efficiency and experience consistency. However, the existing problem is design solutions were tailored for individual product, UX and UI design displays inconsistency from product to product. It's difficult to align design solutions between designers due to lack of standards and usage guidance. Also, it's time consuming for designers and engineers to repeatedly work on the same component from beginning without a shared single source of truth. The overall product development is inefficient. There is an urgent need to create a design system to resolve those problems. I was brought to this team as senior interaction designer to help to create a design system for Apollo. I have created the initial project plan for Apollo design system including goal, strategy, process, tasks and timeline. Collaborated with a team of designers, product manager, engineers, now we have successfully accomplished V4 design system.
During the design phase, I worked on writing components usage guidelines on Confluence where all Apollo components guidelines live currently. A component usage guideline contents including component description, usage, types, anatomy and behavior sections. Together with wireframes to clarify components behavior and interactions. I have created guidelines and wireframes for date picker, date range picker, time picker, badge, peek, footer, input chip, choice chip, linear process indicator and circular process indicator. All of them have been arranged for implementation and will be used in product design. Following are some of the components UX documents I created:
Apollo Design System was completed with around 60 components. Each component has usage guidelines and detailed wireframes to clarify the interactions.
Motion Guideline V1 completed
Sketch UI kit completed.
React library completed with all the design system contents.
Product design process significantly accelerated by using the new design system.
Motion Guideline Easing Curves
Element animation applying with this standard easing curve.
Component animation examples of applying with the standard easing curve.
Decelerate easing curve:
Accelerate easing curve: