We started small

Mofid Securities is one of the largest brokerages in Iran, with products ranging from an investment app with 1.5M+ users to trading platforms, payment tools and internal back-office services. Each product team kept its own UI kit, and the company was traditional enough that a design system had to be argued for before it could be built. So we began with feasibility studies and benchmarks, to show that a shared system means faster delivery and more consistent products.

Who uses it, and what stands in the way

We mapped every digital product the system would serve into a cluster map, to see the users, how the products connect and which ones carry the most risk. That map set the order of the work.

The hardest part was not the components. It was getting designers, developers and product owners to use the system, test it and help decide what came next. Interviews with product managers and designers showed the same pattern: without a system, every idea waited on design and refactoring.

Three systems under one roof

We split the work into three systems, each responsible for its own assets and rules: the Mofid Component System (MCS), the Mofid Design Language (MDL) and the Mofid Brand System (MBS). The design system sits above them and keeps the whole thing centred on users.

Color is a good example of how they connect. The brand system gives the brand colors, the design language turns them into a ramp, and the component system turns each step into tokens for backgrounds, text and icons.

Five phases, from research to Storybook

Each request went through the same loop: organize, prioritize, technical and product research, design and test, then library, development, publishing and documentation, with iteration at every step. Changelogs and weekly design talks kept the improvements small and steady.

Foundations first, then components

We audited the existing products and set shared foundations first: color, typography, radius, elevation, spacing and icons. Components came next, in the order products used them most, with tokens shared between Figma and code.

One library, rebuilt on tokens

Every screen in the library works in light and dark mode. Version 3.0 restructured the whole library. Every component comes in 7 color styles and 5 appearances, and colors, sizes and radii come from tokens, so a product can change its theme through modes instead of detaching components.

Mofid Design System · components in use

LightDark

• Persian first, English too. Text components carry a language property for Persian, Arabic and English, so RTL and LTR use the same component.
• Light and dark. Components have a dark mode, and the button library was checked in both.
• Prototype-ready. Hover and pressed states are wired in, so prototypes behave like the product.
• Product-specific inputs. Masked inputs for Shaba (IBAN), currency and numbers, because those are what fintech forms ask for.

Flexible layouts without detaching

Designers can't, and shouldn't, edit layers that a component doesn't expose in its properties. But dialogs, cards and sheets need layouts that change from screen to screen. We added a component slot: a placeholder inside a component that can be swapped for any other component. Designers build the layout they need, and the result stays connected to the library.

Built from real screens

Larger patterns, such as the date picker, table, side bar and bottom sheet, were designed against real product screens, with Persian (Jalali) calendars, quick ranges and the dense tables trading screens need.

Every component has a history

Each component page has a status track, from designing to review, approval, development and live, and a changelog that says what changed, why and who changed it. Engineers could see what was ready to build without asking.

Adoption is part of the design

A system only helps if teams use it. We onboarded product owners, designers and developers separately, named a design ambassador in each product team, and ran a product design community for 14 sessions.

• Documentation for every component: usage, states and do's and don'ts.
• Walkthroughs and reviews with each product team.
• UX writing guidelines and shared terminology.
• A contribution path for new components and icons.

53% adoption across 8 products

By the end of Q2 2024, 53% of the company used the system. Implementation time dropped by 37%, and teams saved 212 hours a week.

Mofid Securities DesignOps team

Mohsen HaqshenoTeam lead

Mahmood SanaeiUX engineer

Ahmad AbbasiUX engineer

With thanks to Majid Abparvar, Head of Design, and Nima Vafabakhsh, Omid Roshan, Arian Bahreman, Mohammad Reza Sahraei, Soheil Yousefshahi and Mohammad Amin Masoudi.

People did not understand key features

The existing support flow did not explain financial concepts at the moment people needed them.

• Users needed a better understanding of app features.
• Support was not meeting educational needs.
• Financial concepts needed explanation in context.
• Content had to scale across the whole app.

Where people got stuck

We analysed support tickets, reviewed metrics from the existing story-based help, interviewed users about how they prefer to learn and mapped their journeys through the app.

Help inside the screen, not outside the app

A bottom sheet replaced the old support entry point. Each screen shows the hints relevant to it, as short guides, tutorials, FAQs and videos, with a path to online support when a hint is not enough.

Three states, five content types

The sheet adapts to how many hints a screen has: none, a few (1–4) or many. Content types cover onboarding, short explanations, long text, financial literacy and new features.

Onboarding

To the point

Long text

Shipped in four phases

1. Core UI and functionality
2. Content for key actions
3. Explore mode
4. Onboarding across all features

47% fewer support tickets

Measured after launch across the Mofid app.

Small, in-context help works better

• Contextual education works better than general tutorials.
• People prefer short pieces while they use a feature.
• Search is essential for quick answers.

Investing by hand, every month

Buying fund units in the Mofid app meant opening the app and placing an order each time. People who wanted to put a fixed amount aside every month had to remember to do it.

The goal was simple to say: let people choose a fund, an account, a schedule and an amount once, then have the app invest for them, without coming back and without worrying about forgetting.

Four choices, one at a time

Setup is one screen with a checklist of four steps: where to invest, where to withdraw from, how often, and how much. Each step opens a bottom sheet that says which step it is, and the checklist fills in as people go.

1 · Invest in

2 · Withdraw from

3 · Period

4 · Amount

Small choices that remove friction

• A checklist instead of a long form. People see all four steps up front and each finished step shows its value, so they know how much is left.
• Continue always moves forward. If something is missing, Continue opens the sheet for the first empty step instead of showing an error.
• More than one day a month. Monthly or weekly, several days at once, “last day of the month”, and a note when a day already has a schedule.
• Quick amounts and visible limits. Chips for 500 thousand, 1 million and 5 million toman, with the minimum and maximum written under the field.
• No surprise at the bank. The review screen says people will be sent to the bank to finish the mandate, and that their mobile number must match the bank's.

Inline limit

Review

Done

Schedules people can trust

A schedule lives for months, so the part after setup matters as much as setup. Every schedule shows its state as a chip, and the detail page keeps pause, edit, delete and the bank mandate in one place.

Schedules

Detail

Pause

Why invest every month

Recurring investing is a habit more than a feature. A short series of hints, built on the same in-app education system as Mofid Hints, explains why it helps and how the mandate works, inside the screen where people decide.

Hint · Why recurring investing?

The same steps on the web

On the web the four steps open as a dialog over the page, with the same counter and the same quick amounts, so people who start on one device recognise the flow on another.

Two beta rounds, then 1.0

The feature went through two beta rounds with the product and engineering teams before 1.0. I kept a changelog in the Figma file so everyone could see what moved.

1. Renamed the feature to “سرمایه‌گذاری مستمر” (recurring investment), and rewrote the empty state and button labels to match.
2. Removed annual yield from the fund picker and dropped a separate terms page from the flow.
3. Replaced “contract” with the bank mandate and its expiry date, with receipts for cancelling or extending it.
4. Added status chips, a pause confirmation and editing of the mobile number before the bank step.
5. Added the education hints.

Shipped on mobile and web

Auto Invest shipped in the Mofid app for iOS, Android and the web, for an app with more than 1.5 million users. Usage figures are internal, so I don't publish them here.

Everything on one page

Holdings, fund information, returns, transactions and the buy button all sat on one long screen. People who owned units had to scroll past the fund description to see their own money, and people who were new to the fund had no clear place to learn about it.

Three tabs for three questions

The page now answers one question per tab: what do I have, what is this fund, and where can I get help. The header with the fund, its type and its daily return stays on top, and buy and sell stay at the bottom on every tab.

Holdings

About the fund

Advice

A shorter way to buy

Buy and sell moved into a fixed footer, so they are always in reach without scrolling. Recurring investment sits right under active transactions, with its status and a one-tap way to turn it on, so people can go from a single purchase to a monthly plan from the same page. The setup flow is the one from Mofid Auto Invest.

• Holdings stay private. An eye icon hides the value for people who check the app in public.
• More details on demand. The holdings chart opens in place instead of on a new screen.
• Transactions in context. Pending and in-progress purchases show on the fund they belong to.

Compare the fund with what people know

Instead of one return number, the chart compares the fund with the benchmarks people already think in: the stock market, the dollar, gold and gold coins. Tapping a benchmark draws it against the fund, and each row shows its return for the selected period.

Holdings chart with tooltip

Learn before you buy

The advice tab brings education to the fund page: a short video about the fund type, a full course from Mofid Education with its own player, answers to common questions, and a way to book a session with a Mofid advisor when that is not enough.

Intro video

Course

Player

Designed for every kind of visitor

The same page had to work for three people: someone who owns units, someone who doesn't, and someone who doesn't own units yet but has a transaction in progress. Each state changes what the holdings tab shows first.

Shipped in small versions

The page was tracked with the same versioning as the design system, so engineering always knew what had changed.

1. 2.0 · Changelog added and text colors improved.
2. 2.1 · ETF transactions, improved transaction list and a documented user flow.
3. 2.2 · Button group colors updated to the new tokens.
4. 3.1 · Moved to the new bottom navigation, 2.0.

Built for the heat

Tecnogas sells cookers, ovens, hobs, drawers and hoods in four series: Oriana, Futura, Pro New and Next Eco. The old sites listed products but didn't show the brand: an Italian family business that builds appliances for people who cook every day. The new sites had to feel premium, stay easy to browse, and work in Italian and English on tecnogas.it and in Persian, right to left, on tecnogas.ir.

Benchmarked against the category

Before any layout, I reviewed how premium appliance brands present products, series and service: navigation, product pages, comparison, dealer search and support.

Sitemap first, then wireframes

I mapped both sites into one sitemap with shared components, then wireframed every template: home, our story, product category, product detail, series, magazine, where to buy, service, FAQ, become a dealer, find your model number, product advisor and more. Products can be browsed two ways, by product type or by series, which shapes the mega menu.

• Two axes in the menu. By product (cookers, ovens, hobs, drawers, hoods) and by series (Oriana, Futura, Pro New, Next Eco).
• Tools that answer real questions. Find your model number, compare products and a product advisor.
• One structure, two markets. tecnogas.it and tecnogas.ir share templates, with market and language rules for each.

Three brand colours, everything else derived

The brand book gives three colours: rich black, Tecnogas red and white. Every other value, from the neutral ramp to semantic colours, is derived from them, so the system has no off-the-shelf palette.

White on brand red fails AA for body text, so solid brand fills step down to brand 700. Brand red and error red share a hue, so error colour is kept for destructive actions and always comes with an icon and a label.

Nunito sets the Latin sites and Anjoman the Persian site. Five breakpoints use a fixed grid for editorial pages and a fluid grid for dense catalogue and comparison views.

Components with every state

Buttons, inputs, selects, toggles, checkboxes, tags, tooltips, menus and the compare table are built on the token set, each with default, hover, focus, disabled and loading states. One icon family runs across navigation, product features and service flows, at a weight that sits well next to Nunito.

The product in a real kitchen

The home page opens with professional cooking, then lets people choose a series and see its full range inside a real kitchen. The story of the company, made in Gualtieri since 1952, sits next to the products instead of on a separate page nobody opens.

Designed for when things go wrong

Every template has its error and edge states: page not found, server error, maintenance, offline, a section that fails to load, empty search and filters, no dealers nearby, a discontinued product, coming soon, and form validation, sending, success and failure.

Ready for engineering

Each page ships with redlines, tokens, component usage and export notes, plus motion tokens for duration, easing, distance and sequence, with a rule for mirroring motion in right-to-left layouts. A UI checklist, written in English and Persian, keeps every new page consistent.