Designing Constro
A Material 3 system for a trade that runs on phone calls
Role
Solo, self directed major project
Firm
Constro
This is the craft piece. It was never built, so there are no users and no numbers. What it has is a month of field research and a visual system I still stand behind three years later.
Long story short
My dad wanted to build a penthouse on top of our house. Finding a contractor took weeks and every lead came from someone who knew someone. No listings, no profiles, no way to compare two people or check if either was any good.
I went looking for an app that did this. There wasn't one. Not in Hyderabad, not anywhere in India.
Solo, three months, nine screens, one flow. Built as my final year major project while working a full time design job.
A month of it went on site. 2 to 3 contractors, around 5 workers, around 5 people building or renovating a home. One quote killed a third of my own scope before I drew anything.
Material 3 was about two years old then. I followed it on everything structural and broke it on everything expressive. That split is the reason I still show this file.
Except once, where I broke it for no good reason at all. The yellow. That one I cannot defend and it is the most useful thing in here.
Why it exists
The trade runs on word of mouth and nothing else. My dad's search was four weeks of asking people who knew people, and at the end of it he still could not tell you whether either name was any good.
My HOD cleared me from attending classes as long as I delivered the credits, so this was the credit.
———
Role, team, timeline
Solo. Three months. 9 screens, one flow, desktop web.
Late March scoping
April field research, every interview
May and June system, brand, screens
Team: none.
Not mine: the character illustrations and the 3D render, both pulled from open source libraries.
———
What I found
I spent April on site. Same question set every time, notes into Notion.
The trade has three layers and only one of them can use an app. Workers lay brick, carry load, mix cement, and most are on feature phones. The ones with smartphones use them for YouTube, reels and calls. One said it plainly, "I dont know my phone much." Contractors are different, they can run net banking and take calls online. End users are people like my dad.
That one sentence cut a third of my scope in week two. The original plan was two products, one for end users and one for contractors. No worker app, not now, not later. I built the easier audience first on purpose, because I was solo and early in my career and wanted feedback before designing for the people I could not afford to get wrong.
Two more quotes did the rest of the work.
"Sometimes wish to outsource my workforce when theres little to no work." Thats a contractor problem, not an end user one, and nothing in this app answers it. It is the reason the plan had a second product in it.
"Some of my construction equipment is just laying around, you know any WhatsApp community or any sort where I can share the images and rent it?" He was already solving it. In a WhatsApp group. That is the real competition, not another app.
And every conversation came back to the same thing. Nobody hands a house to a stranger. The trade runs on trust and trust runs on knowing somebody.
The system
Material 3 was about two years old then and the large screen guidance was fresh. I wanted to use it properly rather than borrow the look.
I followed it on everything structural and broke it on everything expressive. That split held for the whole project and it is the thing I have used on every project since.
Structural, straight off the spec:
Navigation rail with the pill indicator, correct for this window size
Filter chips with the leading check
Every icon from Material Symbols, including the tractor and the handshake
1512x982, the expanded window class. I picked that size because it looked clean on my MacBook while presenting, then found it matched a real class and kept it
8 point on everything except widths. Padding, margins, gaps, corner radii, component heights, and the steps in my own type ramp. Widths I set by eye and they are inconsistent, which is the one place a ruler would catch me out
Elevation through tone, never shadow. There is not a single drop shadow in the file. Separation comes from surface tint and I used three of the five levels. The least tinted carries the page background, the darker ones carry the tiles and cards sitting on top of it.
Color roles out of Material Theme Builder. Full set generated, containers and on containers included, and I worked from a subset of it. But everything on screen comes from a role, not from a hex I picked in the moment.
Expressive, broken on purpose:
Type. I did not use the M3 type scale at all. Built my own ramp, 16 up to 40, stepping on 8 so there was still a rule underneath it
Typeface. Product Sans instead of Roboto. Each letter has some character to it and Roboto does not give that
The hero gradient. Green into yellow. M3 is flat
Find a Contractor is black. Inverse surface, not a standard role pairing. Three actions sit side by side and one had to be the loudest
Components, but only just around ten of them. Filters, the nav rail, contractor cards, equipment cards, the CTAs. Single variants, no properties, no states. Enough to keep nine screens consistent without redrawing anything, and nowhere near what I would build now. The consistency in this file comes from discipline more than from tooling.
Light theme only. A dark scheme is defined and I never designed screens for it. Two full themes on a student project with nine screens would have been effort spent looking thorough instead of being good.
———
The yellow, and the one I would take back
Source color is #F4E561, off construction safety gear. Black text on it passes.
Material Theme Builder took that yellow and pushed Primary40 to olive. Which means my actual safety yellow only survives further down the ramp, as Primary90, a container color. By the system's own logic I could never use it as a button fill.
I noticed. I used it as a button fill anyway, because I wanted my yellow on screen.
Thats the rookie one. Its me overriding a system about ten minutes after choosing to follow it. Every other break in this file I can defend on the grounds that it protects the user or the product and costs nothing structural. This one only protected what I wanted to look at.
———
Decisions in the screens
Every one of these traces back to a line in my notes.
Call first, everywhere. Call to connect is the primary button on the profile. Chat sits in the nav as backup, not as the main path. Not a preference, its how the trade works. A contractor picks up. Nobody is waiting on a message thread.
Trust, built into the card. I could not fix word of mouth, so I gave a stranger the things word of mouth gives you. Verified badge, years of experience, project count, firm size, portfolio photos of finished work, a written about section. Unverified contractors get the same card with the badge dimmed, so you can see what is missing rather than just not seeing it. Testimonials sit high on home for the same reason. New marketplace, nobody has heard of it, that space earns its keep.
Nearby contractors is two columns. Someone asking around their circle gets 3 or 4 names. Open this and eight are on screen before you scroll. The point of the second column is the feeling of choice, and enough choice to be worth staying and looking.
Home shows less than the list does. Name and city on home, then worker count, years, project count and verification once you go into contractors. Home is for deciding whether to look, not for comparing.
Post a gig is two columns, and the split maps to mobile. Title, location, description and firm size on the left, budget and image upload on the right. That order is the order it would stack on a phone. The desktop layout was drawn so the mobile version would already have a hierarchy.
Rent a Tool came from one sentence, the contractor asking about a WhatsApp group for his idle equipment. Thats why equipment sits at the same level as contractors, its own nav item and its own action tile, instead of being a filter buried inside the contractor list. The strip on home started as a bare card with a photo of an earth mover and no label. Read like an ad. Two words fixed it. Most rented.
What I got wrong
Continue with Google, and nothing else. The logic was that anyone with a smartphone already has a Google account through YouTube, so skip the OTP hassle. Reasonable shortcut. Its also the only door in the building.
Trust is still unsolved. Badges and portfolios help a stranger look credible. They do not replace somebody you know vouching for somebody they know. For a small repair job the badges might be enough. For a penthouse they are not, and a penthouse is what started this.
———
What I would do now
Mobile first. The users are on site holding a phone. A laptop layout was the wrong starting point and I picked it for the wrong reason.
Bend the type scale, dont leave it. I built my own ramp on 8 point steps, so there was a rule, just not theirs. Keeping M3's steps and adjusting the values would have got me the same feel with a system underneath it instead of beside it.
Pick a typeface Im allowed to use. Product Sans is Google's internal font. Roboto is the M3 default and would have been the right call.
One illustration style. There are three in nine screens. Flat vector, line art and a 3D render, all from different open source libraries. Nobody chose that, it just happened.
Check what you think you followed. I had the surface tints filed under "straight off the spec" for three years and they are not. Three years of production work later, the part I would not change is the discipline. Spacing, radii, elevation, icons and color roles all come from one place and they agree with each other across all nine screens. Widths aside, you can measure this file and it holds.
Nothing here shipped. What I kept is the split. Follow the system where it protects the user, break it where it only protects consistency, and know which one you are doing at the time. I have used that on everything since.