Establishing Design Standards That Actually Get Used

BackOffice is StoreHub's merchant-facing command center where business owners and managers configure every aspect of their operations - menu displays, stock transfers, promotions, and sales tracking. It's the tool that determines how every aspect of their business operates through StoreHub's ecosystem.

The users range from tech-savvy restaurant chains to small retail shop owners. With such diverse user needs and business-critical functionality, consistency and usability weren't just nice-to-have features - they directly impacted merchant success.

BackOffice had evolved over years, with two different frameworks coexisting across the platform, referred to as "1.0" and "2.0". Some pages ran both frameworks simultaneously. The modernization directive was clear: new pages should use 2.0, but with daily feature delivery pressure, implementation was inconsistent across designers and developers.

Designers in the team had historically had to ship fast under intense time pressure. Sometimes this meant working directly from screenshots with quick markup - "add button here" or "new section between this and this" - rather than comprehensive Figma documentation. While this kept features moving, it created technical debt that slowed down future work.

I saw this as an opportunity to invest time upfront for long-term efficiency gains while maintaining feature delivery velocity.

50% of BackOffice traffic came from mobile devices, but critical merchant workflows were completely unusable on phones. Even though some stakeholders argued that configuration wasn't something done on your phone, the reality was many Malaysian business owners either don't have computers or don't have time to sit behind one during busy business hours.

With day-to-day product responsibilities shipping membership features, compliance requirements, and ongoing merchant requests. I couldn't disappear for months to build the perfect design system. I needed to improve how we worked, while maintaining delivery velocity.

Instead of the theoretical perfect approach, here's what I did:

• Component Documentation: As I designed new features, I documented reusable patterns and created proper Figma components
• Opportunistic Updates: When touching existing pages for feature work, I updated them to unified standards
• Cross-Functional Design: Created components that worked for both design consistency AND developer efficiency
• Developer Buy-In: Connected directly with our China-based dev team to understand their workflow challenges and make improvements collaboratively rather than throwing designs over a wall and calling it a day.

Examples of the Cleanup

• BackOffice had 7+ different button styles because every designer picked whatever they wanted. I consolidated these into 4 types with clear usage rules.
• We had 3 different modal layouts with 5+ width variations - I worked with the dev team to standardize on one layout for 1.0 and one for 2.0, with two sizes.
• Forms and cards had inconsistent input styling and spacing (some pages used 24px grids, others 10px??). This had to go - from now on we were 8pt grid all the way.

Establishing Responsive Standards

I established desktop (1024px+), tablet (768-1023px), and mobile (below 768px) breakpoints. Before this, designers weren't even specifying mobile dimensions.

Specific Mobile Improvements

Customer info and editing customer details was a key section I pushed to move from 1.0 to 2.0 UI specifically for mobile usability. This was due to a combination of two factors - looking into the data of which pages merchants were viewing on mobile, and the fact that we had to edit parts of those pages to accommodate changes relating to Membership.

Setting the Rules Across the Team

For every other feature the product design team worked on, I made sure we had to specify how content would properly flow in mobile view.

From Screenshots to Proper Components

We moved from the old "screenshot existing page and mark up changes" approach to building proper Figma components with usage guidelines and responsive specs.

Storybook Implementation

This is a more recent development that I'm happy to say was proposed by the developers after a couple of months of standardising things on the design side. We now have Storybook and Chromatic documenting the actual coded components alongside the Figma library.