A shared system for connected apps

I strengthened components, language support, and handoff rules across a restaurant management platform with six connected apps.

My role: Product Designer
Owned: Components · RTL · Themes · Handoff
Team: Designers · PMs · Engineers

Outcome

Delivered reusable components, responsive layouts and handoff documentation for six connected restaurant apps. Internal comparisons showed 28% less development time after handover changes and half the onboarding time after the Figma guide.

Orderific BMS dashboard and connected restaurant management tools

Challenge

Components had drifted across products. Missing states and inconsistent rules made reuse and handoff harder. RTL and tablet layouts for many apps were not present.

My contribution

Improved reusable components, refined BMS direction and theme support, and documented rules for the team. All apps had responsive layouts.

Reusing components

Different spacing, corners, and missing states pushed designers to detach components. I added reusable properties and shared token rules.

Orderific component playground with input type, state, content, helper and variable-mode properties — Type, state, content and helper settings are exposed in one panel. The cards below show shared controls across LTR, RTL and QR customisation.

Add missing states

Make common variations available through component properties.

Set shared visual rules

Use the same spacing, corners, shadows, and token structure.

Make handoff explicit

Help engineers identify the content and states each component needs, along with references.

Interfaces

The same component rules carry through dashboards, review tables, setup forms and pricing.

Dashboard

Shared navigation, onboarding, metrics, charts and inventory.

1 / 5

RTL

Direction became a component property in BMS. Navigation and reading order adapt, while maps and other fixed content keep their orientation.

Orderific BMS delivery zone layout in English LTR

Orderific BMS delivery zone layout in Arabic RTL

Themes

Figma variable modes let BMS use the same components in light and dark themes. Token values change while layout and interaction states stay consistent.

Handoff

I documented naming and handoff rules, trained QA, and hired and mentored two junior designers to help the team apply the system consistently. I regularly worked with product managers and engineers to clarify what UI fields meant and how they connected to business rules.

Design rules

File and frame names
Component changes
Icon library
Tokens
Handoff stage
Designing edge cases
Responsive states

Shared rules for design and handoff.

The backend team maintained a data model with around 220 tables. I helped resolve mismatches and unclear links between interface fields and business data.

Orderific documentation showing global, alias and component token layers with naming examples — The guide connects shared values to semantic and component tokens, with examples the team can follow.

System deliverables

6 connected apps ~3–4 responsive layouts per app
3 token layers
LTR and RTL for BMS
Light and dark themes for BMS

Team development

One of the two junior designers I mentored was promoted.

Next project · Purno