Design System & UI Kit Copy – Haya App

The Challenge & Solution

🧩 Challenge:

Haya, a lifestyle and productivity app, had a sleek interface but lacked clear, consistent microcopy. Button texts, tooltips, and in-app messages felt disjointed and didn’t reflect the brand’s tone. The design team also needed copy support for building a scalable UI kit that could be used across future features.

✅ Solution:

Bolddraft collaborated closely with the design and product teams to deliver a full copy-driven design system. We wrote and standardized microcopy for components like buttons, form fields, modals, and tooltips. A copy style guide was created to align voice across the UI, ensuring clarity, friendliness, and brand personality in every interaction.

🛠️ What We Did (Practical Steps)

1. Voice & Tone Definition

   • Established tone: friendly, helpful, modern.

   • Created rules for tense, punctuation, emojis, and accessibility.

2. Component-Based UX Copy

   • Wrote microcopy for buttons (“Start Now,” “Got It,” “Try Again”), inputs, error states, and onboarding flows.

   • Ensured brevity, clarity, and user empathy across every element.

3. UI Kit Documentation

   • Delivered copy specs embedded in Figma for each component.

   • Included fallback messaging, character limits, and usage examples.

4. Design System Copy Guide

   • Developed a reference document for designers/devs with approved copy blocks, do’s & don’ts, and reusable messaging.

   • Supported version control for ongoing product expansion.

5. Testing & Iteration

   • Ran A/B tests on tooltip phrasing and button labels.

   • Optimized based on user feedback from closed beta testers.