For the past three years, I’ve partnered with ShopThing to shape and refine their product experience. Early on, I built an internal design system (nicknamed “Hemline”) that helped unify visual standards and streamline the design-to-development pipeline. Meanwhile, ShopThing’s in-house design team continued to handle day-to-day feature work, ensuring product updates met immediate business needs.
Recently, ShopThing brought in an external agency to chart a future vision for the app. Now that the agency’s engagement has ended—and with some of those designs entering development sprints—I’ve been rehired to refresh the Hemline system. My goal is to integrate new brand and interface elements, sunset outdated components, and maintain a cohesive user experience for both customers and internal teams.
By reconciling legacy designs with next-generation components, I’ll ensure Hemline continues to be a single source of truth that supports ShopThing’s evolving roadmap.
“With the right system in place, designers can focus on creativity and innovation—rather than reinventing the wheel on every new feature.”
A key issue facing ShopThing right now is the lack of a unified visual language. While the original Hemline design system brought some consistency, it hasn’t been fully adopted across all new features. Meanwhile, the recent redesign introduced fresh elements that risk clashing with older components—leading to a disjointed user experience and extra churn for the internal team.
Divergence in Visuals
Inconsistent Use of Hemline: Original system guidelines are not followed diligently, creating discrepancies across screens.
New vs. Legacy Clashes: Recent design elements from the external agency might conflict with older patterns, causing a patchwork aesthetic.
The Two-Pronged Need
End-User Experience (Customer)
Visual Mishmash: Inconsistent styles and lack of clear hierarchy make the product look fragmented.
Minor Details, Major Impact: Gutters, font sizes, and patterns vary enough to undermine an otherwise solid design.
Small Tweaks, Big Wins: Tightening these details can significantly enhance usability and polish.
Internal Team Experience (Designers & Developers)
Designers Overloaded: High-volume day-to-day tasks lead to shortcuts, inadvertently creating design debt.
Developers in the Dark: Without a single source of truth, discrepancies eat up time in back-and-forth clarifications.
Collaboration Breakdown: Messy handoffs and inconsistent files trigger rework and frustrate both teams.
Evolve Hemline
Phased Integration: Merge the new design direction without overwhelming the product or the team.
Consistency First: Ensure every new element aligns with the established brand identity and user expectations.
Create a Single Source of Truth
Reduce Guesswork: Centralize design decisions so developers and designers can access the same, up-to-date guidelines.
Eliminate Inconsistencies: Use a unified reference for colors, typography, and components to maintain cohesiveness.
Streamline the Handoff Process
Better File Organization: Implement clear naming conventions and folder structures.
Design System Adherence: Reinforce documentation and templates so teams can work faster, with fewer repetitive questions.
By tackling these objectives, I ensure that Hemline not only reflects the latest brand vision but also becomes a seamless, trusted tool for everyone involved.
Interviews with the Design Team
Finding #1: Too busy with daily tasks—shortcutting leads to design debt.
Finding #2: Tweaks are made without a clear process to track all impacted components/files.
Finding #3: Lack of interest/time to properly clean up Figma files.
Interviews with the Development Team
Finding #1: Missing a source of truth for reconciling design discrepancies.
Finding #2: Perception of “messy design” due to unorganized Figma layers, inconsistent components, etc.
Finding #3: They prefer to code solutions themselves (native iOS & Android) and only need well-documented, consistent design specs (rather than new dev tooling).
Finding #4: Extra project debt arises from constant back-and-forth clarifications when designs are inconsistent..
These findings revealed critical pain points for both designers and developers, underscoring the need for a robust, well-maintained design system. By incorporating these insights into Hemline, I can create a unified workflow that reduces errors, streamlines collaboration, and ultimately delivers a better end product.
A. End-User (Customer) Experience
1. Revisit Visual Hierarchy
o Align Old & New: Ensure consistent font sizes, spacing, and color usage by identifying the delta between legacy and redesigned styles.
o Reduce “Mishmash”: Standardize layouts so new design elements integrate smoothly with Hemline’s established patterns.
2. Phase in New Redesign Elements
o Gradual Rollout: Introduce updated components incrementally to avoid overwhelming current users.
o Stand-Alone Modules: Treat new designs as modular “plug-ins” that can be seamlessly folded into Hemline over time.
3. Establish Reusable Patterns
o Component Consistency: Update (or retire) legacy elements to match new standards.
o Maintain Brand Cohesion: Reinforce a unified look by leaning on Hemline’s core components wherever possible.
B. Internal User (Design & Dev Teams)
1. Streamlined Figma Organization
o Layer Cleanup & Naming: Introduce clear naming conventions and systematically rename frames/components going forward.
o Design Tokens: Explore color, text, and spacing tokens for instant updates across the system.
2. Design System Documentation
o Central Living Resource: Start with thorough component documentation in Figma, then expand to a dedicated platform (e.g., ZeroHeight).
o Cross-Referenced Libraries: Link each component back to its Figma source, offering developers a single place to verify design specs.
3. Lightweight Governance & Maintenance
o Quick Review Process: Implement short, weekly check-ins to log any design tweaks—these updates then cascade to the entire team.
o Training & “Cheat Sheets”: Provide succinct guides or Loom video tutorials on best practices for Figma file maintenance and system usage.
4. Dev-Friendly Handoff
o Annotate Designs: Clearly label spacing, color, and typography tokens so devs can reference them immediately.
o Lean, Organized Files: Remove outdated frames and hidden layers, ensuring a clean handoff that reduces back-and-forth clarifications.
Design System Governance
Establish clear guidelines and approval processes for changes, ensuring every tweak is documented and shared across teams.
Continuous Communication
Maintain frequent syncs between designers and developers to catch discrepancies early and reinforce a consistent workflow.Phased Approach for Major Redesigns
Roll out significant updates in manageable stages, reducing confusion for end users and preventing team overload.
