Please note: Specific button texts, filter labels, and identifiable features in these prototypes have been replaced with placeholders to respect non-disclosure agreements and to protect core features. However, the design processes and methodologies presented remain accurate.
Creating a Design System for an AI-driven in-store shopping assistant application. This platform's aim is to innovate local shopping by bridging consumers and local small businesses. After crafting a high-fidelity prototype that earned overwhelmingly positive feedback from stakeholders, the next monumental task was transitioning that success into a cohesive and comprehensive design system.
Objective
To streamline the design-to-development process
Consistency and maintainability
Accessibility
Scalability
My Role & Responsibilities
Sole designer
Create reusable and scalable UI components, patterns, and guidelines for layout, typography, colors, icons, and other visual elements.
First Foray into Design Systems: Blending Expert Mentorship with Certified Learning
Mentored by a Design System expert to adopt industry-leading practices and standards, elevating the quality of our project.
Learned from Figma Learn
Learned from certificate course - Building Design System in Figma from Scratch by Udemy
With a new grocery shopping app in development, there was a need for a design system to guide its visual and interactive aspects.
Risk
• Design inconsistencies
• Fragmented user experience
• Delays in design-to-development transition due to the absence of a standard reference.
Responsibility
Ensuring a cohesive appearance throughout
Situation
• Transition from prototyping to design system phase
• Initial emphasis on feature showcase, later shift to accessibility
Standards
WCAG 2.0 AA standards
Responsibility
Guaranteeing a universally accessible user experience
Situation
Presence of diverse content types from user-created shopping lists to community-curated items.
Tasks
• A consistent visual language
• Clear differentiation for instant user recognition
Responsibility
Creating seamless navigation between different list categories and content origins
With a new grocery shopping app in development, there was a need for a design system to guide its visual and interactive aspects.
Risk
• Distinguishability
• Clarity
Tools
• Adobe Color - Color Blind Safe
• Coloring for Colorblindness
Considerations
• Protanopia (Prot.)
• Deuteranopia (Deut.)
• Tritanopia (Trit.)
Focus
Legibility
Tools
• Adobe Color - Contrast Checker
• Stark Accessibility Tools
Considerations
• Text size-specific contrast
• WCAG 2.1 AA&AAA standards
Typefaces
• San Francisco Pro for iOS
• Roboto for Android
• Aim for a native feel on each platform
Grid System
• 8-point grid as primary guide
• 4-point increments for finer adjustments
• Ensuring precise design alignment and visual consistency.
Space
• Used 8px base spacing
• Range from 4px (0.5 rem) to 64px
• Margin 16px
• 4-column
In our app, lists are assemblies of individual cards to benefit visual clarity, flexibility, and scalability. With multiple types of content to display, the challenge was to ensure that each card was consistent and distinctive.
Thus, the design of each card was crucial not just in its standalone form but also in how it would collectively appear in lists. This would allow individual cards to shine while forming a cohesive list.
To navigate this challenge, I leaned into the high-fidelity prototypes, making detailed adjustments to ensure our cards—and by extension, our lists—served their distinct purposes without sacrificing a consistent user experience.
Visual cues for differentiation
• Ensure instant recognition
• Allow easy differentiation between personal and curated lists
• Incorporate specific design elements
• Introduce design variations
Visual hierarchy
• Prioritize crucial items
• Easily distinguish key elements
• Refine typographical weights
• Optimize icon usage
• Strategically place key information
User motivations
• Ensure instant recognition
• Allow easy differentiation between personal and curated lists
• Incorporate specific design elements
• Introduce design variations
To enhance user distinction and engagement, I implemented differences in the image and card’s shape and dimensions.
Currently developing a flexible design system that accommodates AI capabilities— without redesigning layout structures.
Our design journey was driven by enhancing accessibility, establishing consistent visual language, and adeptly balancing consistency with distinct content presentation.
With the newly implemented design system, we've transformed our interface to achieve these aims better, offering an experience that's not only more accessible and uniform but also skillfully differentiated where needed.
The engineering team has responded positively to the design system, seeing its potential to streamline their work and improve product consistency. They're gearing up to begin coding in October, marking the next exciting phase in this project.
While this design system is a major milestone, it's the start of an evolving journey. We'll be closely monitoring its implementation, ready to make iterative changes based on real-world use, and ensuring that it continues serving our users and our development team effectively.
MORE PROJECTS
© 2022 Su. All rights reserved