Happiness and learnings are

best when shared. Our humble

attempt is to do the same from

last year’s UC app redesign

experience.
01
Hit the balance with the grid.

We had 12 grid blocks.

Now, it's just 6.

A heavy grid increases cognitive load

and has poor memory retention. A
compact grid makes decision-
making more straightforward and has
a better recall.

50 Design Cheat Codes Urban Company Design

 02
Onboarding screens are
redundant and harmful. They
are the first blockers in your
funnel.

Most users install apps with intent.

Get the user to your homescreen
Next
fast. You will save significant

drop-offs.

50 Design Cheat Codes Urban Company Design

03
Login shouldn't take more
than 5 seconds. Auto-fetch
mobile number. Don't make
users recall and type.

Remove social login options unless

very important. Most products ask
for a mobile number even after user
logins through social login options.

50 Design Cheat Codes Urban Company Design

 04
Prevent confusion by
informing users actively when
you take a call for them.

We auto-select users' addresses,

preferred professional and payment
methods. Otherwise, it leads to drop-
offs during checkout.

50 Design Cheat Codes Urban Company Design

 Before

05
You can control how users
scan your UI with minor
adjustments. We did that with
After
our search bar.

Playing around a bit with the UI

helped put more focus on our search
bar. It became the first element
users would see while scanning

the screen.

50 Design Cheat Codes Urban Company Design

 06
Make key CTAs within the
user’s reach.

We constantly try to optimise to get

our critical actions within users'
thumb reach — a direct correlation
between usage and accessibility.

50 Design Cheat Codes Urban Company Design

07
Avoid surprises.

We make it explicit for the user

about the cancellation fee. We want
to be transparent. That's all.

50 Design Cheat Codes Urban Company Design

 08
Social proofing is the most
impactful way to build trust.

We found that the number of ratings

Menu
and bookings in the users' locality
significantly improved platform trust.

50 Design Cheat Codes Urban Company Design

07
09
Keep CTAs
Avoid surprises.
explicit. Even
when you think you don't
need them.

We make it clear for the user what

cancellation fee they'll be charged
at one of the most crucial points in
Wefunnel.
the have the
At best detail
the risk page open
of putting
rates off.
them withBecause
a clear 'View details' CTA.
it's important.

50 Design
Screens Cheat Codes Urban Company Design
 10
Carousel items have poor
discovery after one swipe. Be
conscious of your choice to
use them in your UIs.

Most people don't swipe more than

once. Please don't rely on carousels
UC Personal Homes Store Account
for must-discover items.

50 Design Cheat Codes Urban Company Design

11
Make money-related
decisions extremely simple
for the user.

Calculating the estimated savings for

the user makes it easier for them to
decide if they want to buy a
subscription or not.

50 Design Cheat Codes Urban Company Design

 12
Make the crucial things
prominent. Remove what's

not required.

We removed all unnecessary stuff

from our product, but the ones we
kept got proper attention. E.g. The
subscription strip on the home
screen.

50 Design Cheat Codes Urban Company Design

13
Users only consume
information when it aligns
with their "Job to be done."

Generic education videos on our

category pages didn't get the kind of
traction we expected. We then
decided to remove them.

50 Design Cheat Codes Urban Company Design

 14
Actively drive product
education with the users.

Even repeating users might not be

fully aware of what your product has
to offer. E.g. Showing categories to
the users in our homescreen.

50 Design Cheat Codes Urban Company Design

15
Design for gender inclusivity.

E.g; Our copy and illustrations fell flat

the day when we got our first female
RO technician. Most roles have
transcended gender and so should
our products.

50 Design Cheat Codes Urban Company Design

 16
Summary

₹599
RICA Facial 1 ₹599

₹599
Full Arms Waxing 1 ₹599

Frequently added together Display choices that make

sense for the user.
Saved addresses
Add another address
RICA Full
RICA Full
RICA Full

Arms Waxing Arms Waxing Arms Waxing

₹129 Home
₹129 ₹129 ₹129 ₹129 ₹129
19, Udyog Vihar Phase IV, Udyog vihar,
Add
Gurugram Add Add

Friend’s home
Offers14th
2550, & gift cards
cross, 26th main, Bangalore
3 offers
Location outside delhi
Save 10% with Amazon pay
Make the selection natural so that
Proceed the user cognition and choice are
Payment summary instantaneous.

50 Design Cheat Codes Urban Company Design

17
People don't remember stuff.
Reduce the cognitive load/
calculations by maintaining
most important info for them.

E.g; We help the users optimise their

savings with active nudges so that
they don't have to remember offers
and do mental calculations with
every thing they add.

50 Design Cheat Codes Urban Company Design

 18
Make it clear for the user
what the hero action is at
every step.

We always keep 80% focus at every

point in our flows on user's most
important ’Job to be done'.

The user can mindlessly click on the

most prominent cta and 9/10 times,
they'll not go wrong.

50 Design Cheat Codes Urban Company Design

19
Videos are super powerful
when integrated at right point
and context in the user
journey.

Auto-play videos with services like

waxing and laser hair removal helped
us significantly in user education and
providing them relevant information.

50 Design Cheat Codes Urban Company Design

 20
Important things need
important real estate.

Our subscription program adds

significant value to the user's life and
unlike other products, we made it a
separate step in the funnel instead
of being cute. Worked wonders!

50 Design Cheat Codes Urban Company Design

21
Remember your users’
preferences. Small
optimisations are magical.

As they say, the devil is in the details.

Remembering user address,
preferred professional goes a long
way in creating 'wow’ moments.

50 Design Cheat Codes Urban Company Design

 22
Users are anxious. Keep them
informed about every step of
the process.

We give users detailed updates on

the product about the status of their
service, refund, help tickets and
everything else.

50 Design Cheat Codes Urban Company Design

23
Your operational updates
should be true to the T.

One small information gone wrong

can shatter the complete user
experience and vice versa. Imagine
the confidence you get when it's
captured in the product that the pro
has taken device with them

for inspection.

50 Design Cheat Codes Urban Company Design

 24
Design for relevance across
geographies and user bases.

E.g; In Singapore, it's common for

some professionals to not go into
houses with dogs. It's also common
in Australia for people to leave keys
for the professional.

50 Design Cheat Codes Urban Company Design

25
Avoid dead ends.

Avoid abrupt endings to user

journeys. Give them a chance to
resume back and get their job done.

50 Design Cheat Codes Urban Company Design

 26
Help people take right
decisions. People can use
help even at seemingly

small places.

Slot selection decision by users

often depends on the time the
service would take, as they plan their
schedules for the service.

50 Design Cheat Codes Urban Company Design

27
Avoid all distractions and
extra steps for the user. Please agree before continuing
Only same gender massages are placed
Any requests for a therapist of a different gender
are not allowed on the platform

We care for our professionals

Any solicitation of illegal activities (including those
of a sexual nature) will not be tolerated

Penalty for any such cases

Urban Company reserves the right to take
appropriate legal action against the customer in
such cases identified
We removed all acknowledgements,
upsell screens and fluff from our
booking flow to offer a
I agree
seamless experience.

50 Design Cheat Codes Urban Company Design

 28
Give your users control.

Our partners give detailed invoice to

customers before the job starts.
Partners proceed only after the
customer gives their approval
through a common handshake.

50 Design Cheat Codes Urban Company Design

29
Design for intangible, long-
term goals of the platform.

We sensitise the user towards better

treatment of the partners at different
touchpoints in the app.

50 Design Cheat Codes Urban Company Design

 30
Similar patterns invoke similar
mental models.

A lot of users mistook our spare

addition flow with the add-ons flow
because the underlying pattern
was same.

50 Design Cheat Codes Urban Company Design

31
Don't let the entropy of the
system increase. Use central
capabilities as much

as possible.

We use one core capability of SKU

structuring to sell Salon, Painting,
Repairs, Cleaning, etc., making the
system easier to maintain.

50 Design Cheat Codes Urban Company Design

 32
Users sometimes have use
cases outside your catalog.
They have to be served still.

We give our users a way to book

service where they might have

Menu a custom use case outside

our mentioned SKUs. in

handymen services.

50 Design Cheat Codes Urban Company Design

33
Make information digestible
for the user.

We have guides throughout our

product to help users make right
decisions about their service.

50 Design Cheat Codes Urban Company Design

 34
Mimicking established offline
behavior in your product can
offer superlative experience.

In Dubai, we launched a flexible

cleaning schedule flow for our
customers with the same
professional. Easy management from
the app became the cherry on

the top.

50 Design Cheat Codes Urban Company Design

35
Vertical scrolling is the
most natural behavior in
mobile devices.

We have organised our service SKUs

in vertically stacked sections. The
user can jump between sections
with the easily accessible 'menu'.
This encouraged cross-section
discovery in the cart as

users scrolled.

50 Design Cheat Codes Urban Company Design

 36
Elements that appear after a
delay get more attention

We did an experiment of adding a 2

sec delay in rendering the feedback
widget and it gives us better results
than pre-loading it.

50 Design Cheat Codes Urban Company Design

80 brilliant minds.

100+ cups of coffee.

1000+ slack messages.

Gazillion hours of meetings, later.

37
Subtle signifiers don't work
for all scenarios. Sometimes
they need to be stronger.

Strong visual emphasis when

there is mandatory action needed

from partner.

50 Design Cheat Codes Urban Company Design

 38
Let users use

actual flows rather than

theory to learn flows.

We created a sandbox environment.

Where partner can try actual flows
and learn before they go live on

the platform.

50 Design Cheat Codes Urban Company Design

39
To prioritize something,

you have to deprioritise others

We prioritised jobs that have an early

expiry over those which don’t.

50 Design Cheat Codes Urban Company Design

 40
Educate the user in their
real environment. People
forget things.

Instead of training partners using

messages or videos we trained them
on their first-run.

50 Design Cheat Codes Urban Company Design

41
Loss aversion works better,
when accompanied with
relevant information.

We show a cumulative summary of

missed jobs by partners in the last 7
days to drive better acceptance rate.

50 Design Cheat Codes Urban Company Design

 42
Help users make decisions

by prioritizing relevant
information.

We prioritize relevant information on

new jobs to help our partners make
quick and right decisions.

50 Design Cheat Codes Urban Company Design

43
Leverage technology to make

make your user’s life easier

We removed a redundant step from

partners jobs delivery flow using real
time location tracking.

50 Design Cheat Codes Urban Company Design

 44
Use empty states to
educate or communicate
with the user.

At the start of every month, we use

earnings empty state to
communicate tips on how partner
can earn more.

50 Design Cheat Codes Urban Company Design

45
Leverage products that the
user is familiar with.

We used WhatsApp to collect

information required from people
looking to join Urban Company

50 Design Cheat Codes Urban Company Design

 46
Avoid using tabs for equally
important information.

We use tabs for content that are

related and at the same level &
contain content that is distinct from
other tabs in a set.

50 Design Cheat Codes Urban Company Design

47
Thoughtfully

added resistance

avoids errors

Swipe button to eliminate redundant

confirmation and accidental taps.

50 Design Cheat Codes Urban Company Design

 48
Unblock the user by running
system processes in the
background

We upload video proofs in the app

background to make sure partners
can continue on the next steps of
their jobs rather than waiting for
proofs to get uploaded.

50 Design Cheat Codes Urban Company Design

49
Actionable feedback
helps the user get better

We channel customer rating inputs

into training content on how they can
improve on a particular feedback.

50 Design Cheat Codes Urban Company Design

 50
Leverage familiar patterns

for boosting usability

We use story format to help users

consume important information in a
more interactive way.

50 Design Cheat Codes Urban Company Design

Liked It?
Want to get the physical copy

Leave a review on Gumroad

Follow us on Instagram @designatuc ↗

Fill the form here ↗

BTW, WE’RE HIRING!
Product, graphic and motion designers

Apply here ↗
Other Resources
Align Design System — Figma ↗
Banner design framework ↗
Urban Company Design ↗