LOADING
Blogs
It’s hard to imagine what life would look like without Urban Company. Today, almost 9 years after launch, users can book over 20 services like appliance repair, home cleaning, salon and spa services on the app. A UC partner arrives in as little time as 3 hours and the job is done. Urban Company makes life simple for its users. Behind the scenes, things are a little different.
Each service vertical works like a small company under the UC umbrella. That’s 20 companies rolled into one. Now multiply this business by 5 – that’s how many countries UC operates in. After seeing success in India, UC expanded to UAE, Saudi Arabia, Singapore and the USA.
In December 2021, they went beyond offering home services and launched their first product, a water purifier. Urban Company is an evidently ambitious company.
Now if we told you that UC can launch a new service in one week, would you believe us? Probably not. You’d think we’re cooking up stories if we told you that they can integrate with another app in just three days. Add to this the fact that they don’t have a front end engineering team. Or that product designers spend more time making paper sketches than on design softwares like Figma.
I didn’t believe them at first either. But when they told me that they use their design system Align to launch new services and to launch in new geographies, it made sense. The story of Align is phenomenal – by using their design system to its fullest potential, Urban Company is growing their business and using their design and development capital smartly.
On 25 March 2020, when the first Covid lockdown was announced, business teams at UC saw an emerging need: disinfection services for homes, shops and offices. But adding a new service is complex – the user’s flow and the partner’s flow need to be designed and developed.
Typically, this would take 3-6 months, but when the lockdown was extended on 18 April, the disinfection service was already live on the UC app. After understanding product and business requirements, designers and developers assembled screens in just three weeks. Their comprehensive design system which had the most simple component, like a button, to the most complex one, like a card, held them in good stead.
The time taken from recognizing a business need to launching a new service on the UC app has reduced with a design system. Thanks to Align, UC continues to add new services like laptop repair and laser hair removal on the app.
Launching Urban Company in UAE and Saudi Arabia required adapting both the partner and the consumer app to Arabic, which is a Right-to-Left (R2L) language. In the USA, unlike in India, UC’s web app is used by a large proportion of users.
Imagine making nearly 600+ screens R2L compatible and web-friendly! Designers would have to redesign all screens and the development effort would be colossal. For UC, it wasn’t.
Each component in UC’s design system has two versions – one for languages like English that are read Left-to-Right and one for languages like Arabic which are read Right-to-Left. Every flow and every screen looked exactly the same, but it was simply built using R2L-compatible components from the design system.
To make their design system web-friendly, UC’s engineers used a code transformer to convert a mobile interface to a web interface on the basis of some conventions. By reusing the same components, in Figma and in code, UC has been able to launch in new geographies in very little time.
In 2022, MyGate, a security app used in apartments, collaborated with Urban Company to offer UC’s home services to residents. Users can use the MyGate app to book services like AC repair or sofa cleaning.
To integrate UC’s screens into the MyGate app, the UC team needed to redesign and redevelop their screens to follow MyGate’s visual language, that is, to use MyGate’s brand colours and their brand typeface. If this was done manually, it would have taken weeks, if not months.
But the UC team took just three days to do this. The changes were made in one place in the design system library to reflect on all screens. With this integration, UC got access to more users and more users equal more revenue!
Once Align was created, frontend developers only needed to use the design system codebase. Developing UI became 30x faster!
The frontend team downsized significantly. A small team of frontend developers is responsible for maintaining and updating Orion, the design system library. And the rest of UC’s engineers work as full-stack developers, spending 90% of their time doing backend development and just 10% on frontend development.
Typically, a designer’s workflow involves:
And designing production-ready screens takes up most of the time. After Align, UC’s designers began to spend very little time on visual design and more time on translating business requirements into a flow. Now, they have time to understand the problem deeply and come up with multiple solutions.
Designers and PMs only need to align at the wireframe level, because PMs and engineers can easily visualize what the production-ready screen would look like. After the wireframe is ready, it takes just an hour to put the screen together in Figma.
Align has not only created more time for designers to solve problems, but it has also given a shared visual language to engineers, PMs and business teams.
Designers and developers at UC first felt the need for a design system in 2019. UC was expanding into international geographies and an audit of the app revealed two things:
A small group of designers and developers began to build a “just enough” design system – they built components for one flow. On the partner app, they picked the flow for a partner to receive their payments. On the consumer app, they picked the flow for a user to select a service inside a category page and pay for it.
One day, they asked UC’s co-founder, Raghav Chandra to build a screen on Figma using design system components. When he realized they could build a screen in just 5 minutes, he was convinced that a design system would significantly improve product development at UC.
Today, Align runs UC’s entire digital product. It is used for all services, for both the partner and consumer app, across geographies and across the mobile and web app. With a lean engineering and design team, Urban Company continues to add new services and expand to new geographies. And their not-so-secret tool is their powerhouse of a design system.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
eadings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
