# Orderific — A shared system for connected apps

> Components, RTL, themes, collaboration and handoff across a restaurant management platform with six connected apps.

- Reza A. Work About Contact Components
- Interfaces
- RTL
- Themes
- Handoff
# 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.

## 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.

Caption: 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 Dashboard Reviews Loyalty QR designer Pricing
## RTL

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

## 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
Caption: 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.

Caption: 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 →

---

[View the visual case study](/orderific)