Role: Founding Product Designer ✧ September 2024
Project Overview
Just stopping by? Here's a TL: DR version for you.
✳︎
Team
2 UX Designer ◦ 1 Product Manager ◦ 1 Front-End Engineer
☒
Business Problems
Inconsistent components causing serious usability issues.Eye-balling while designing resulting in a slow, stunted and design and development process. Customer retentions <15% due to a poor overall product UX.
✎
Design Challenge
To create a usable repository of design components and guidelines for Augier AI using the atomic design methodology from scratch.
⌗
Solution
100+ handcrafted components Adaptive layouts for responsive screen sizes with a progressive 2-4-6-8 px grid system.WCAG-compliant designs for inclusive user access. Components for AI affordances.
✷
Impact
5 released and 12 unreleased feature sets with 50+ screens designed. Increased our active customer count from 30 to 250+ in just 3 months.70% increase in our user engagement and customer retention.
Violet: Foundations
Design considerations while conceptualizing the system.
☺︎
Users
This is needed to understand the aesthetic and functional elements of the components. Considering that we are a B2B, SAAS product dealing in the federal contracting space, our users i.e. small businesses valued functionality and quick actions over aesthetics and fancy interactions.
⏣
Market Position
It is important to keep tabs of competitors in the market, and learn from existing design systems that align well to our product. Inspiration is the crux of innovation. We pulled in design inspiration from the following design systems: Material Design, Radix Design System, and IBM Design.
⇱
Scaling 0→1
A thing I have learnt from several successful founding designers. We need to choose our battles and prioritize. As a small bootstrapped startup, we do not have the leisure nor the need for all components to be built for all contingencies."A design system is the smallest set of components and guidelines needed to make digital products better." — Dan Mall
Making the system
Due to the constraints of a strict NDA, here’s a sneak peek into the violet design system. Feel free to reach out to me for a detailed look into the same.
All major information chunks were created using Figma variables, and tokens. The first layer of which were the primitives. Essentially consisting of all the root values of all components.
🔠 Typography and Text Styles
A detailed typographic style sheet was created and 'text-styles' were pre-assigned to in the Figma Library. SF Pro typeface was used to provide a professional, modern and minimal feel.
Typography and text styles | Toggle between the different text styles used in the design system. 👆
🌈 Color System
Our brand colors were the key to the aesthetic inspiration. We used variables and tokens to make our system shareable and co-editable. Moreover, creating tokens reduced effort and saved the UX team time while making iterations.
5 different token sets were created namely Greyscale, Primary, Error, Warning, and Success. Each containing all potential states and variations.
▶️ Button States After closely scrutinizing the tasks that were to be performed on our product, we standardized our button behaviors. The following graphic shows the different states of the primary button.
Property
States
Specification
Type
Primary | Secondary
variant
State
Default | Hover | Focused | Selected | Disabled
variant
Pill
False | True
variant
Size
Small | Medium | Large
variant
Label
Label
text
Icon
None | Right | Left | Alone
variant
Icon
Star
instance swap
Primary button states ranging from default, hover, pressed, and selected states.
✳️ Molecules and organisms The atoms we designed helped create molecules, organisms and eventually full scale pages.
Atoms
Variants
Chips
Delayed
Completed
On Hold
Pending
Avatars
Icons
Typography
Heading 4
Body Large
Body Main
Subtitle
Colors
Selected catalogue of atoms.
Pages created starting from the atoms above.
📐 Margins and Padding
Pixel-perfect, progressive 2-4-8 px grids, consistent controls, atomic approach, and other best practices were used as a default.
A much needed makeover
After the first wave of implementation of the new system, the usability and aesthetic value of Augier grew monumentally.
As a small bootstrapped startup, we do not have the leisure nor the need for all components to be built for all contingencies. We needed to prioritize our needs and focus on just those components that would help us get to a robust MVP the fastest.
Summary
Violet is still growing, adapting and evolving based off of Augier's needs.
This case study documents the creation and implementation of Violet, highlighting its role in empowering users to navigate the complex world of government contracting more efficiently. Violet was designed to address the unique challenges faced by small businesses in the $1.3 trillion government contract market. The design system focuses on creating a cohesive, intuitive interface that guides users through each stage of the procurement lifecycle, from opportunity search to proposal writing and contract management Key features of Violet include: Consistent visual language for improved navigation Scalable components for rapid development and iteration Accessibility-focused design elements Data visualization tools for business intelligence insights By implementing Violet, AugierAi.com has significantly improved user engagement and success rates for small businesses seeking government contracts. The design system has played a crucial role in simplifying complex processes, making government contracting more accessible to a wider range of businesses.
Enjoyed this case study?
Check out some of my other work:
