Designing A SaaS platform

Every solution starts with understanding the problems. The first a few things I did was to meet with business stakeholders, understand the business model and get a broader view of the market landscape. It also helped me to identify the unique value we are delivering to customers.
‍
The next step was meeting with team leaders to discover the current limitation of the platform, empathize with users to understand their pain points. A Mental model map was created to understand user's jobs to be done and emotional state in using the product. I mapped out the user journey to find out where the gaps are, constructed service blueprint to understand the interplay of different system components and identify critical touchpoints. At sprint planning session, I used user story map to scope and prioritize sprint goals, and shared with the team to get everyone on the same page.

During the design stage, I facilitate card sorting activities with domain experts, power users and engineers co-design information architecture and user flow.  Host whiteboard sessions to sketch out UI ideas and brainstorm solutions for various use cases.
‍

After the concepts are pretty converged, it's time to get ideas out of the head and into the world. I first translated the information architecture into wireframes so that business stakeholders and users can easily understand the potential solutions and provide meaningful feedback.

We are not doing BDUF(big design upfront), instead the design process is in parallel with the agile development sprint. I try to avoid one-time design hand-off and try to work with engineers in each sprint to deliver a specific user story. We highly integrate the design process with development. Engineers are invited to attend design discussion and make comments on prototypes early on. Prototypes become living documentation and specs to fuel development tickets. This process highly improved the design execution.

I developed prototypes in Javascript and share the same UI library with the development team. Speaking the same language with the development team enables me to communicate design ideas more effectively. Rapid code prototyping also enables me to quickly trial concepts and explore edge cases.

Design review is scheduled weekly with users to solicit timely feedback. Low-fidelity mockups, pixel-perfect prototypes and interactive prototypes are used during design reviews. Reviews are focus on problem-solution fit. The passed design will be feed into development sprint followed by usability testing at the end of the sprint.

Before every major version release, I worked with product managers to host user acceptance test to make sure the releasing product meets users' expectations. Test results would be collected and analyzed by affinity mapping. Action items were generated and prioritized for the next iteration.
‍

As we keep releasing new features, we continued to repeat the DEFINE - DESIGN - PROTOTYPE - TEST cycle. More and more UI elements and Interaction pattern started to merge. In order to keep our design consistent and scalable, I helped the team to adapt Ant Design as our foundational design system and tailor it to meet our needs. Design system reduced our cost of maintaining existing UI components, it also accelerated the design process without sacrificing quality.

I established and maintained two component libraries for design components and code components. A design component is comprised of basic UI elements in a design system, such as buttons, labels, inputs, etc. Building reusable design components for frequently used widgets and pages, which enabled the team to quickly put together new designs to test new features. A code component is similar to a design component but backed by javascript. It enabled us to load the design with real data to explore real-world scenarios and discover edge cases earlier in the design stage. Design in context, design to scale!
‍
‍