verifyAI
VerifyAI is an innovative company dedicated to transforming the employee verification process through advanced AI technologies.
Recently, VerifyAI acquired wtVision, an employee rewards company, recognizing the strength of their backend powered by low-cost APIs. However, the UI of their dashboard was lacking in user experience, prompting VerifyAI to revamp the front-end design while retaining the existing backend.
I was tasked with leading the design system development for this new dashboard.
wtVision dashboard screenshots
objectives
At VerifyAI, my goal was to address the UI challenges of the newly acquired platform by creating a robust design system. The primary objectives were Consistency, Scalability, Efficiency and Usability.
Previously, every new project or phase required starting from scratch, leading to the repetitive design of components.
To resolve these issues, we needed to:
- Recreate Existing Components: Consolidate and standardize existing components into a unified library.
- Document Use Cases: Gather and document all previous use cases and create new ones.
research and discovery
The research phase was crucial to inform the design decisions, my goals were to understand the users’ needs and pain points and identify key areas where the current design was falling short. It included the following activities:
Stakeholder Interviews
I conducted interviews with key stakeholders at VerifyAI to gain insights into business goals, user needs, and technical constraints.
User Research
I conducted user research with HR professionals and new employees to understand key pain points and areas for improvement in the verification process.
key findings
The key takeaways from our research were:
- Manual Errors: Users encountered frequent issues with manual data entry, leading to delays and inaccuracies.
- Time Consumption: The verification and rewards process was time-consuming, frustrating HR professionals.
- User Needs: HR professionals needed a more efficient process with automated checks to reduce manual effort and speed up verification. Both HR professionals and employees desired clear, real-time updates and a user-friendly interface.
design process
As a Design System Lead, I had to make strategic decisions to develop a scalable design system. Here’s how I approached it:
- Scaling the Design System: With limited time, I focused on creating a Design System that could quickly adapt as new use cases emerged. I continuously expanded the library to accommodate these evolving needs.
- Incorporating User Research: Collaborating with the Head of Product, I made sure that insights from user research were integral to the Design System. This guided the development of components and interaction patterns.
- Designing with Real Data: To avoid future challenges, I used real data instead of placeholder text when finalizing components and screens. This helped address potential issues like text overflow, missing logos, or varying tag counts.
laying the foundations
Typography and Color Palette: One of my first tasks was selecting typography and a color palette that balanced modernity with sensitivity towards users’ emotional states.
Grid System: Collaborating with front-end engineers, we defined the grid system for key breakpoints, aligning it with Tailwind CSS to ensure a responsive and cohesive user experience.
The next step was getting started on developing set of components, guided by the Atomic Design approach. Continuously working with developers, we made sure that naming conventions work for both sides: the Design System was mirrored in Storybook and a collaborative approach made the process more streamlined.
component library
The component library included a comprehensive set of standardized UI elements, each carefully designed and documented to ensure consistency, reusability, and clarity across the entire platform.
Component name
A specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.
State changes
Recommended defaults and the subsequent changes in appearance.
Usage examples
Sample implementations and visual examples demonstrating how the component should be used in various contexts.
accessibility integrated into the design process
From the outset of building the Design System, our goal was to achieve WCAG 2.1 AA compliance to ensure the platform was accessible to a broader audience, including individuals with disabilities. Management preferred this level because it strikes a balance between accessibility and design flexibility.
Here’s what I focused on:
- Color Contrast: Ensured colors were readable against various backgrounds and interaction states, diving deep into accessibility standards for disabled buttons.
- Font Size & Touch Targets: Verified that font sizes and touch targets on mobile devices were appropriately sized.
- Text Labels with Icons: Added text labels alongside icons in mobile navigation to improve clarity.
- Consistency: Maintained consistency in layouts and UI elements to create a cohesive experience.
result
The creation of the design system has laid a solid foundation for the ongoing redesign of the dashboard. It has already led to several key benefits:
Improved Consistency: The design system ensures a cohesive visual experience across all future platform interfaces, setting the stage for a more unified user experience.
Streamlined Process: With reusable components and standardized guidelines in place, the design and development process has become more efficient, reducing the time needed for future iterations.
Scalability Preparedness: The design system is equipped to handle new features and expansions, ensuring the platform can grow and adapt smoothly.
Foundation for Success: Although the dashboard is still under design and development, the design system provides a strong framework, guiding the project toward a successful and cohesive final product.
what would i do different?
I created the design system with a focus on consistency and scalability; next time, I would incorporate more frequent feedback loops by establishing regular check-ins with users and team members to refine the design based on real-time input.
I documented the design system with basic component descriptions, design guidelines, and initial use cases; next time, I would enhance the documentation with more detailed explanations, additional use cases, and comprehensive guidelines for clearer future use.
I worked with the design and development teams sequentially; next time, I would engage cross-functional teams earlier in the process to align on expectations and requirements from the start, streamlining development and implementation.
