SAAS Survey data platform
Style-guide / Design System Update
The goal was to align on the component/color/layout discrepancies between all different apps inside of the platform and document.
Timeline
From explorations to final designs in 5 weeks while working with multiple projects at the same time
Background
We've received many pressing pieces of feedback with our application. The team chose to focus on: Identifying our most common widget visualizations that do not appear consistent. Inspected each widget across the platform, separately, to take note of the different ways each of our app-based development teams coded the visualizations. Before we brought in development, we worked with product to align the visualization requirements for each application.
This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.
Research & Planning
Identify the current discrepancies with our platform. Divide and conquer current components, colors, fonts in our design system that are utilized most commonly. Create new specification format to be used for all components/design tokens/layouts. Check in consistently to align on progress.
Design & Prototyping
Create style guides and base component 'sticker sheets' to provide easy to update templates for current components. Organize properties to align with variations.
Implementation
Sharing newly documented components, templates or intended solutions with development and product to prioritize design system updates properly or new features in the roadmap.
Testing & Optimization
Conducted rigorous testing across various devices and platforms to ensure accessibility standards are met and brand guidelines are adhered to.
The resulting AI-powered scheduling app offers a seamless user experience, allowing individuals and businesses to effortlessly manage their schedules. Key features include:
Created XD 'Sticker Sheet'
Utilized Adobe XD to create ready-made component templates. We spent a few workshops outline component needs and dividing the workload. We would use some time in team meetings with developers to discuss needs, updates and status for each guide.
Accessible Documentation
Made documentation with links to files to create a central location for questions involving components. This helped answer questions with version updates when developers implement new feature designs. Also gave product managers and owners an idea of current available components when requesting new features.
A better future as we grow
Our goal was to shift our documentation and files into Figma. The complex scaling issues were not easily solved with the way Adobe XD is set up. Figma's continuous improvement makes it a tool that will scale easily and maintenance easier to manage. Our team would have benefited greatly from the variants feature in Figma.
Here, the outcomes and achievements of the project are highlighted, including user feedback, adoption rates, and industry recognition.
Increased Efficiency
Designers, developers and product managers reported significant time savings and improved productivity through optimized documentation in an easily accessible format.
Positive User Feedback
Create a new 'source of truth' space for design decisions and direction making it easier to communicate updates or versions.
Growing User Base
The app quickly gained traction among individuals and businesses worldwide, with a steady increase in user adoption and engagement.