Making one milligram of gold feel as safe to buy as a ten-gram bar — the product, the campaigns and the weekly review slides.
Company
Digikala
Role
Designer, Marketer, BI developer
Type
Product · Growth · Data
Industry
Fintech · e-commerce
Team
Digikala’s Non-Inventory unit, with engineering, PR and performance media, and legal
Status
Shipped
Tools
Figma
The problem
Gold is Iran’s default hedge against inflation, but buying it is analogue — a dealer, a making charge, purity on trust and somewhere to keep it.
The role
Designer and marketer on one product, with a hand in its reporting: the order and holdings screens, the campaigns around them and the slides of the weekly review behind both.
The result
A 42-screen responsive system, a silver extension on the same rails, consumer and corporate campaigns, and the slides of a weekly review that put product, marketing and PR on one set of numbers.
Figure 01
Figure 01Three of the 42 screens: the order screen, My Assets and the buy-and-sell history — gold and silver on one set of screens.
01Context
Gold, sold by the milligram, inside Iran’s largest marketplace.
Digital Gold is Digikala’s melted digital gold and silver, sold at digikala.com/gold with physical backing: Digikala holds the metal equivalent to each purchase, and a holding can be sold back or taken out as bullion.
It sits in Digikala’s Non-Inventory unit — the part of the marketplace that sells what isn’t physical stock: precious metals, gift cards, services, travel. The role covered the product, the campaigns around it and the slides of the weekly review behind both.
The design problem was custody and disclosure, not trading.
02Problem
Three questions every screen has to answer.
Gold is the default inflation hedge in Iran, but buying it is analogue: a bullion dealer, a making charge, purity you have to take on trust, and somewhere safe to keep it.
The product’s bet was that a one-milligram purchase could feel as safe as a ten-gram bar. That puts three questions on every screen: is my gold real, what exactly am I paying, and can I get it back?
03Constraints
Real money and real metal, on someone else’s design system.
Buy and sell from one milligram, between 5,000 and 200,000,000 toman per order.
Payouts to the DigiPay wallet, in four daily settlement windows.
Physical redemption as 5-gram bullion.
Persian, right to left, with Persian digits throughout.
Desktop at 1440 and mobile at 390, shipped as one responsive system.
Built on Digikala’s house design system, which another team owned.
04My role
Three hats: designer, marketer, reporting.
The role title names three jobs, and the three Figma files split along exactly those lines: the product, the campaigns, and the weekly business review.
Owned
↳Product vision and roadmap
↳The order, holdings and profile flows
↳The colour and the rename to digital gold
↳Campaign concepts
↳The segmentation model
↳The weekly review slides
Co-owned
↳Fee and pricing presentation, with the business
↳The silver extension
↳The corporate gift-card offer, with the Non-Inventory unit
↳A business-metrics dashboard, as a helper
Collaborated
↳Engineering
↳PR and performance media
Legal and compliance
Figure 02An early concept film, titled Non-Inventory Gold. The product is still called electronic gold here, in an earlier look than the shipped screens: red accents, a gold holdings card, a price chart. The saved bank cards in one shot are blurred.
05Colour
Inside Digikala, but not the usual Digikala.
Digital gold sits inside Digikala, in its top menu and on its home page, but it isn’t shopping: nobody waits for a parcel; people put their savings into it. So everything that builds trust stayed Digikala’s — the login, the identity check, the wallet, the wording, the components — and only the colour changed.
The same screens were tried in red, blue, green, purple and brown, each with a second colour, and judged by how they feel to someone about to put money in. Red, Digikala’s own colour and the one in the film above, reads as urgency and risk: right for a sale, wrong for savings. Blue reads as trust without growth, and it was already DigiPay’s colour; green reads as growth, calm and buying something of value.
An AI attention prediction then showed where the eye goes on the green screens, and five palettes went onto the same two screens with the brand team in marketing. The final pairs a deep teal with a soft gold, and the same decision renamed the product from electronic gold to digital gold.
The colour was chosen for someone saving, not someone shopping.
Red, Digikala’s own
01The verify-identity button, the screen’s first step: 2.5% of the predicted attention
02The buy-or-sell switch and the amount field: 0%
03The hottest spot: the wallet balance and the buy limits
Figure 04An AI attention prediction on the buy screen of the green version, then still called electronic gold: the screen, its areas of interest and the heatmap. It is a model’s prediction, not eye tracking.
01Deep teal, #01494B: the main colour, for the balance card, the chart and the selected filter
02Soft gold, #FFD08F: the second colour, for the header and the landing page’s main button
03The landing page sits under Digikala’s own header and search
Figure 05The final pair on the holdings screen and the landing page. The same teal and gold later carried silver too.
06Approach
Every state drawn twice.
The Figma canvas is organised as a matrix, not a screen dump: each flow opens on a title card, splits into its states, and every state is drawn once at desktop and once at mobile.
Order, My Assets and Profile come to 42 screens — 20, 12 and 10 — which is 21 states, each drawn at both widths, plus four explorations of how to show holdings.
Failure is one of those states. A failed order has its own copy, its own tracking code and its own next step, laid out like the success — not an error page.
Failure got its own copy and layout, not an error page.
Flow → state → breakpoint
01
FlowOrder · My Assets · Profile
02
StateSuccessful · failed · pending approval · in progress · paying out
Figure 06“Final Transaction Gold”: an order’s success and failed states, each at desktop and at mobile. The success spells out the four settlement windows; the failure keeps the same layout and adds a tracking code.
07Key decisions
Four calls on the order and holdings screens
Each one answers one of the three questions before the user has to ask it.
01
Put the fee and the limits above the button.
The buy fee, the minimum and maximum and the wallet balance sit in the order card above Buy gold, so nothing about the cost appears for the first time after the commit.
Evidence
The order screen lists the wallet balance, maximum, minimum and buy fee before the button.
02
Show the price clock, not a promise.
The live price refreshes on a visible 20-second countdown. A timer says the price is live and when it will move; a sentence could only claim it.
Evidence
Order-flow copy: “20 seconds until the price updates”.
03
Let people think in money or in milligrams.
Amount paid and quantity of gold derive each other, so a first-time buyer can start from a budget and a saver from a weight.
Evidence
Two linked fields on the order screen: amount paid in rials, quantity of gold in milligrams.
08Research
Silver, for someone who buys small and learns by doing.
Silver came later, as an extension of the gold product, and it was designed around a composite persona rather than the original gold buyer: 27, a freelancer and decoration designer, with low investment knowledge, medium brand loyalty and a self-imposed cap of 20% of her savings in gold.
Her concerns were the ones the product already answered for gold — little knowledge of how the silver market works, doubts about the security of investing on a digital platform, and sensitivity to price swings. She follows friends’ recommendations and online ads, and tries a small purchase first.
So silver arrived on the same rails: the same order flow and the same holdings card, behind a metal tab.
The answer was a tab, not a second product.
“Let’s just buy and see what happens!”
Figure 07The persona card, in Persian: her line, goals, concerns, motivations and behaviours. Built for the silver extension — a composite, not a real customer.
09Growth
Four ways in: the product, a story, a campaign, an HR department.
An onboarding story on digikala.com/gold walks the three questions in four slides — what it is, buying from one milligram, fast liquidity and physical backing — and ends on Start buying gold. A launch film carried the same messages over the shipped screens.
Consumer campaigns ran on DigiPay: one creative sold zero fee and installment purchase together. A corporate-welfare offer took the Non-Inventory range to HR departments — brand-basket credit, employee loans and occasion packages, across a 16-partner marketplace.
Targeting ran on a segmentation model built on assets, demographics and behaviour, and event-driven flows sent the next message on what people actually did. Gold-backed credit was proposed alongside, as a concept; it did not ship.
Figure 09The launch film: the onboarding story’s messages — any amount from one milligram, fast liquidity, physical backing — played over the shipped screens, ending on digikala.com/gold and a launch card.
01DigiPay-branded: the campaign ran on Digikala’s payment wallet
02“Digital gold, with installment purchase”
03“Zero fee until the end of Friday, 3 Mordad”
Figure 10One story creative, two offers: zero fee and installments.
Figure 12A mock-up film of the digital gold gift card, printed “Digikala electronic gold card” on its gold face. The card stayed a concept; it did not launch.
10Outcomes
What the weekly review showed
These are the Non-Inventory unit’s Q1 results against plan, from a slide of the weekly business review. Only achievement is published — the absolute figures are Digikala’s — and they describe the unit, not the effect of any one design. Sina’s part is the slides, plus some help on a business-metrics dashboard; producing the numbers was not Sina’s job.
42 screens across order, holdings and profile, at two widths
21 states, each drawn at desktop and at mobile — failure included.
Delivered output · Figma — Gold & Silver | Main
Contribution profit against plan
121–145%
PC1 121%, PC2 130%, PC3 145% — above plan at all three margin tiers.
Measured outcome · Non-Inventory weekly business review, Q1 snapshot
NMV against plan
97%
Net merchandise value landed just under plan.
Measured outcome · Non-Inventory weekly business review, Q1 snapshot
PBT against plan
91%
Profit before tax came in below plan.
Measured outcome · Non-Inventory weekly business review, Q1 snapshot
What was delivered
↳Order, holdings and profile, at desktop and mobile
↳The silver extension
01NMV — net merchandise value, the value of everything sold
02PC1–PC3 — contribution profit at three margin tiers
03PBT — profit before tax
04Achievement only: actual and target are withheld
Figure 13The Q1 snapshot as published here: the achievement column alone.
11What I learned
What I learned
01
A visible countdown buys more trust than a reassuring sentence.
The price could have said it was fair. The timer showed that it was live and when it would change — and left the moment to commit with the user.
02
A segmentation model is worth only what the trigger downstream does with it.
Segments on assets, demographics and behaviour mattered once an event-driven flow acted on them. A segment nobody messages is a report.
03
The weekly review’s real product was one shared set of numbers.
A single weekly review gave product, marketing and PR the same NMV, CTR, CPC and conversion to argue from. Designing its slides showed that the charts were the least of it.
Digikala’s design system and platform engineering belonged to other teams — these screens are built on the house system and carry the production header and footer.
Blue
Royal green
Brown
Figure 03The same holdings screen in four of the colours tried. Each option pairs a main colour with a second colour.
03
BreakpointDesktop 1440 · mobile 390
04
Hide the balance with one tap.
Holdings are savings, and a phone screen is often seen by someone else. The eye toggle masks every value while the card keeps its shape.
Evidence
The holdings card with the balance hidden; the explorations for this card tried different masks.
Figure 08The four onboarding slides: what it is, how little you can buy, how fast you can sell, and who holds the metal.
Figure 11The corporate-welfare brochure: the cover, four value propositions, the sixteen partners and the service lines.
