Menu
Menu
Link to Full Project
Link to MovieGlu Website
Team
UX designers, Engineers, Developers, Project managers
Tools
Miro, Figma, Confluence, Jira, Notion
Position
Timeline
2023 - 2024
Design System
The Virtual Assistant (VA) web app is designed to simplify complex information retrieval for large corporations. Packed with AI-driven search, personalized interfaces, and natural language processing, the VA tackles the bane of time-consuming tasks head-on. Initially developed as a rushed demo, the VA was inconsistent and visually fragmented. My role was to reshape this essential tool into a cohesive, accessible, and resilient platform that engineers could rely on, from desktop to mobile.
The Virtual Assistant (VA) web app is designed to simplify complex information retrieval for large corporations. Packed with AI-driven search, personalized interfaces, and natural language processing, the VA tackles the bane of time-consuming tasks head-on. Initially developed as a rushed demo, the VA was inconsistent and visually fragmented. My role was to reshape this essential tool into a cohesive, accessible, and resilient platform that engineers could rely on, from desktop to mobile.
The Virtual Assistant (VA) web app is designed to simplify complex information retrieval for large corporations. Packed with AI-driven search, personalized interfaces, and natural language processing, the VA tackles the bane of time-consuming tasks head-on. Initially developed as a rushed demo, the VA was inconsistent and visually fragmented. My role was to reshape this essential tool into a cohesive, accessible, and resilient platform that engineers could rely on, from desktop to mobile.
The Virtual Assistant (VA) web app is designed to simplify complex information retrieval for large corporations. Packed with AI-driven search, personalized interfaces, and natural language processing, the VA tackles the bane of time-consuming tasks head-on. Initially developed as a rushed demo, the VA was inconsistent and visually fragmented. My role was to reshape this essential tool into a cohesive, accessible, and resilient platform that engineers could rely on, from desktop to mobile.
The Virtual Assistant (VA) web app is designed to simplify complex information retrieval for large corporations. Packed with AI-driven search, personalized interfaces, and natural language processing, the VA tackles the bane of time-consuming tasks head-on. Initially developed as a rushed demo, the VA was inconsistent and visually fragmented. My role was to reshape this essential tool into a cohesive, accessible, and resilient platform that engineers could rely on, from desktop to mobile.
Redefining the Virtual Assistant: Crafting a Scalable Design System from Scratch to Streamline Access
Redefining the Virtual Assistant: Crafting a Scalable Design System from Scratch to Streamline Access
Redefining the Virtual Assistant: Crafting a Scalable Design System from Scratch to Streamline Access
Redefining the Virtual Assistant: Crafting a Scalable Design System from Scratch to Streamline Access
Redefining the Virtual Assistant: Crafting a Scalable Design System from Scratch to Streamline Access
Context
Before my involvement, the VA was developed hastily as a demo for potential clients. Due to tight timelines, developers created an ad-hoc demo with minimal user research and no design guidance. The goal was to create a minimum viable product (MVP), but this approach led to inconsistent user experiences across devices, reducing the product’s potential and client impact.
Before my involvement, the VA was developed hastily as a demo for potential clients. Due to tight timelines, developers created an ad-hoc demo with minimal user research and no design guidance. The goal was to create a minimum viable product (MVP), but this approach led to inconsistent user experiences across devices, reducing the product’s potential and client impact.
Role
As the UX designer, I single-handedly developed the VA’s design system from scratch. With regular design reviews from our Lead Designer, I established a cohesive visual identity focused on accessibility, scalability, and responsiveness. My role involved creating reusable components, documenting best practices, and ensuring the system provided a seamless experience across all devices.
As the UX designer, I single-handedly developed the VA’s design system from scratch. With regular design reviews from our Lead Designer, I established a cohesive visual identity focused on accessibility, scalability, and responsiveness. My role involved creating reusable components, documenting best practices, and ensuring the system provided a seamless experience across all devices.
This is a comparison between the VA Web app before and after our redesign.
This is a comparison between the VA Web app before and after our redesign.
Problem
Demo with poor UX: The VA demo lacked UX consistency due to its rushed development, affecting usability across devices. Issues with responsiveness, accessibility, typography, and design inconsistency contributed to a fragmented experience, diminishing productivity and user satisfaction.
Demo with poor UX: The VA demo lacked UX consistency due to its rushed development, affecting usability across devices. Issues with responsiveness, accessibility, typography, and design inconsistency contributed to a fragmented experience, diminishing productivity and user satisfaction.
Challenge
Challenge
The two main challenges:
Building a design system from scratch: This was my first full-scale design system build, and with no prior assets, design infrastructure, or libraries to work from, it was a challenge to create and implement a cohesive design system with no design ecosystem from which to draw.
Delays working with a silos team: Relying on an external team for client feedback introduced delays and miscommunication, complicating our ability to iterate quickly. Their lack of direct involvement with the product added an extra layer of complexity to the process.
The two main challenges:
Building a design system from scratch: This was my first full-scale design system build, and with no prior assets, design infrastructure, or libraries to work from, it was a challenge to create and implement a cohesive design system with no design ecosystem from which to draw.
Delays working with a silos team: Relying on an external team for client feedback introduced delays and miscommunication, complicating our ability to iterate quickly. Their lack of direct involvement with the product added an extra layer of complexity to the process.
Solution
Solution
I tackled these issues proactively. Through thorough research and a UX audit, I identified critical areas to address and adopted Brad Frost’s Atomic Design methodology to create a scalable, reusable UI foundation. This design approach prioritized accessibility, responsiveness, and brand alignment, with a comprehensive design system encompassing typography, colour schemes, iconography, layout grids, accessibility guidelines and UI components.
I tackled these issues proactively. Through thorough research and a UX audit, I identified critical areas to address and adopted Brad Frost’s Atomic Design methodology to create a scalable, reusable UI foundation. This design approach prioritized accessibility, responsiveness, and brand alignment, with a comprehensive design system encompassing typography, colour schemes, iconography, layout grids, accessibility guidelines and UI components.
Impact Snapshot
📈 25% Increase
📈 25% Increase
📈 25% Increase
📈 25% Increase
📈 25% Increase
📈 25% Increase
in navigation efficiency
through timed user testing.
🔍 Usability Errors Reduced
🔍 Usability Errors Reduced
🔍 Usability Errors Reduced
🔍 Usability Errors Reduced
🔍 Usability Errors Reduced
🔍 Usability Errors Reduced
by 20%, based on post-design user testing and heuristic evaluations.
💼 New Client Acquisition
💼 New Client Acquisition
💼 New Client Acquisition
💼 New Client Acquisition
💼 New Client Acquisition
💼 New Client Acquisition
Successfully secured a B2B client (FIVA) after demo sessions.
🚀55% Upgrade In B2B Workflow
🚀55% Upgrade In B2B Workflow
🚀55% Upgrade In B2B Workflow
🚀55% Upgrade In B2B Workflow
🚀55% Upgrade In B2B Workflow
satisfaction rates from user feedback in demo sessions
🚀 34% Investing Interest
🚀 34% Investing Interest
🚀 34% Investing Interest
🚀 34% Investing Interest
🚀 34% Investing Interest
🚀 34% Investing Interest
Respondents expressed interest in integration of the VA tool.
👣 Process
🚦Step one: Getting Started and Preemptive Design
Working around delays: Without timely client feedback, I used a heuristic evaluation and UX audit to anticipate potential user pain points. This proactive approach aligned well with the feedback we eventually received, confirming that our early solutions met real user needs.
🚦Step one: Getting Started and Preemptive Design
Working around delays: Without timely client feedback, I used a heuristic evaluation and UX audit to anticipate potential user pain points. This proactive approach aligned well with the feedback we eventually received, confirming that our early solutions met real user needs.
🏎💨 Step Two: Adopting Atomic Design Principles
Building a design system: I structured the design system around Atomic Design. I broke the UI into modular components, ranging from individual "atoms" like buttons and text fields to complex "organisms" like cards and navigation menus. By structuring the design system hierarchically, I ensured consistency and reusability.
🏎💨 Step Two: Adopting Atomic Design Principles
Building a design system: I structured the design system around Atomic Design. I broke the UI into modular components, ranging from individual "atoms" like buttons and text fields to complex "organisms" like cards and navigation menus. By structuring the design system hierarchically, I ensured consistency and reusability.
♿️ Step Three: Accessibility
Accessibility Considerations: I designed with accessibility in mind, focusing on optimal line lengths to enhance readability, touch targets designed with sufficient size and spacing to accommodate users of varying dexterity and device types, and adequate colour contrast ratios between text and background elements to ensure content accessibility for users with visual impairments.
♿️ Step Three: Accessibility
Accessibility Considerations: I designed with accessibility in mind, focusing on optimal line lengths to enhance readability, touch targets designed with sufficient size and spacing to accommodate users of varying dexterity and device types, and adequate colour contrast ratios between text and background elements to ensure content accessibility for users with visual impairments.
📲 💻 Step Four: Responsiveness
Responsive Design: I addressed the web app’s responsiveness through:
• Multiple Breakpoints: Additional breakpoints were added to maintain layout integrity across devices.
• Flexible Type Scale: Developed a responsive type scale for readability.
• 8-Point Grid System: Implemented for consistent spacing between UI elements, creating a cohesive and accessible flow.
📲 💻 Step Four: Responsiveness
Responsive Design: I addressed the web app’s responsiveness through:
• Multiple Breakpoints: Additional breakpoints were added to maintain layout integrity across devices.
• Flexible Type Scale: Developed a responsive type scale for readability.
• 8-Point Grid System: Implemented for consistent spacing between UI elements, creating a cohesive and accessible flow.
📑 Step five: Documentation
Handover on Confluence: To facilitate adoption and scalability, I documented the design system's guidelines, principles, and best practices. This comprehensive documentation served as a reference for developers and designers, ensuring consistent implementation across projects.
📑 Step five: Documentation
Handover on Confluence: To facilitate adoption and scalability, I documented the design system's guidelines, principles, and best practices. This comprehensive documentation served as a reference for developers and designers, ensuring consistent implementation across projects.
Impact
Impact
The redesigned Virtual Assistant web app significantly improved user experience and visual appeal compared to the initial version.
The adoption of atomic design principles resulted in a cleaner, easier-to-use infrastructure.
Reusable templates streamlined the design process, minimizing project time estimations and enabling faster iterations.
The responsive design approach ensured a seamless transition across devices, catering to diverse user needs and preferences.
Accessibility considerations like optimal line lengths, touch targets, colour contrast ratios, enhanced readability and ease of interaction for users with varying abilities and device types.
The redesigned Virtual Assistant web app significantly improved user experience and visual appeal compared to the initial version.
The adoption of atomic design principles resulted in a cleaner, easier-to-use infrastructure.
Reusable templates streamlined the design process, minimizing project time estimations and enabling faster iterations.
The responsive design approach ensured a seamless transition across devices, catering to diverse user needs and preferences.
Accessibility considerations like optimal line lengths, touch targets, colour contrast ratios, enhanced readability and ease of interaction for users with varying abilities and device types.
Outcome
While the project had to be halted due to a lack of funding, the redesigned Virtual Assistant demonstrated the potential for a comprehensive end-to-end solution. The design process, including research, wireframing, UI design, and prototype development, showcased a methodical approach to addressing user needs and business objectives.
While the project had to be halted due to a lack of funding, the redesigned Virtual Assistant demonstrated the potential for a comprehensive end-to-end solution. The design process, including research, wireframing, UI design, and prototype development, showcased a methodical approach to addressing user needs and business objectives.
Key Takeaways
If given the opportunity, I would have conducted comprehensive user testing sessions with clients to gather feedback and refine the design further, ensuring it meets user needs and preferences.
I would have finalized design iterations by reviewing feedback from stakeholders and making necessary adjustments to align with project goals and user needs.
For future projects, I would prioritize early and continuous user testing to inform design decisions and ensure solutions are tailored to real user needs from the outset.
Integrate the Virtual Assistant with internal projects, such as the Fault Isolation Project, to improve efficiency and user experience.
