( Bosta · Consultation · Egypt )

Redesigning the Bosta home screen.

Bosta is an Egyptian shipping and last mile delivery company. Their consumer app worked, but it read like an internal tool: no logo, barely any brand colour, and copy written from the company's side. The business was also expanding into commerce, selling the brands it already delivers for, and the home screen had to carry both without either one displacing the other.

My role

  • Product design consultant
  • Audited the shipped home screen and named what was wrong with it
  • Redesigned it: brand, hierarchy, language and layout
  • Specified it across six states, so the layout was decided rather than implied
  • Wrote the rationale so each decision could be argued, not just shown

The facts

  • ClientBosta · consumer app
  • ScopeHome screen, specified across six states
  • PlatformiOS and Android
  • Timeline1 week
  • DeliveredAn audit, the screens, and a written rationale
4

problems found in the audit, each with a decision that answers it

1

button deleted, with the reassurance it carried moved into the field itself

0

separate onboarding screens. The product teaches itself instead

6

states specified, because one artboard cannot describe a screen that changes

( 01 · The audit )

What was wrong with it

Nothing was broken. Every function was there and everything worked. The problems were in how the screen presented itself and how it spoke.

Alongside my own review of the app, I spoke to Bosta users informally and looked at competitor apps and store reviews.

Four problems came out of it. Each one has a decision further down this page that answers it directly.

The Bosta consumer app home screen before the redesign: a greeting, two shipping buttons, a featured stores row and a locations carousel
Before. No logo, almost no brand colour, and two buttons where the second exists only to preview prices.

( 01 )

There is no brand in the app

You could open the home screen and nothing told you whose app this was. The logo wasn't there and the brand red barely appeared, so it could have been any tracking tool.

( 02 )

The language isn't conversational

The copy was written from the company's side. Labels described how Bosta is organised internally instead of what the person was actually trying to do.

( 03 )

The shipping options are explained twice

The app told you it ships between cities and also within the same city. Once I showed that, saying it became redundant. The popular route chips now carry the information by example: one route stays inside a city, another crosses between them.

( 04 )

There was a whole button just to see prices

A separate action existed only to preview rates. I removed it and moved the reassurance into the destination field, where the placeholder now tells you that picking a destination shows the rates. You can see it is not a commitment without needing a button to prove it.

( 02 · The real problem )

Two businesses, one screen

Bosta delivers for a large number of Egyptian brands, and was expanding into commerce: selling those same brands directly through the app. The home screen now had to carry two lines of business, and the brief was explicit that neither should come at the cost of the other.

The order follows what people came for. Checking where a parcel is is the most frequent reason to open the app, so tracking answers that first, and its height changes with how much is actually moving.

Sending is second in importance but first in action. It is the earliest point on the screen where someone can do something rather than read something, and it carries the routes Bosta covers, so the destinations are shown by example instead of described in a sentence.

Users do not know Bosta as a shopping app. Commerce is new to the product, so the section's job here is discovery rather than conversion. It still sits above the fold, with a clear title and each store's logo at a size that makes the brand recognisable on sight. That recognition is what makes the section worth browsing at all.

What the screen has to hold, in order ( 01 ) Track a delivery The most frequent reason to open the app, so it answers first. Top of screen, height varies ( 02 ) Send a package The business, and the first thing on screen you can act on. First line of action ( 03 ) Shop the brands New to the product. Store logos carry the recognition. Above the fold, logo led This order holds in all six states. Nothing reorders as the data changes.

( 03 · The redesign )

What changed

Tracking takes the top of the screen because it answers the question most people opened the app to ask. Someone with a parcel moving wants the status before anything else, so it should not be behind a scroll.

Which is exactly why it needs a ceiling. Past a few parcels the tracking section stops growing and links out to the Ship tab instead. Without that limit, sending gets pushed off the first screen at precisely the moment the user is buying the most, and sending is the business.

The brand is in the app now. The logo sits at the top of the screen and the red runs through the icons, the tab bar and the tracking progress. I added yellow alongside it for status, so status can sit apart from branding rather than competing with it. When something is on its way the first question is when it arrives, so the arrival time gets the most prominent treatment and a colour that reads as good news.

The language is written from the customer's side. The greeting reports their situation rather than describing Bosta's, and the section titles say what a person does rather than how the company is organised: Send a package, Shop your favorite brands. The destination field says that picking a destination shows the rates, which puts the reassurance at the point where the question actually comes up.

Section icons match the navigation. The icon beside Send a package is the one on the Ship tab. The icon beside Shop is the one on the Shop tab. It is a small thing, but it tells people the shortcut and the full page are the same place without anyone having to say so.

The redesigned Bosta home screen: logo and brand red in the header, a greeting reporting one delivery, the tracking card with its arrival window, Send a package with its route chips, and Shop your favorite brands below

( 04 · Onboarding )

The product teaches itself

There is no separate onboarding flow, because most people skip through those without reading them. Each section explains its own function on first use instead.

The important part is what that avoids. Nothing is styled as onboarding, so there is nothing to unlearn later. The layout someone learns on their first day is the same one they keep using on their hundredth, and the teaching lines simply stop appearing once they are no longer true.

( 05 · Every state )

The same screen has a different job in every state

The brief was one screen. But a home screen is not one design, and handing over a single artboard would have left the hard parts undecided. What the screen has to do changes with who opened it and what is moving: a first time user with nothing to track needs something different from someone with five parcels mid delivery.

So I specified it across both axes, at every point where the layout has to behave differently. Nothing reorders between them. The order someone learns on day one is the order they keep, and the teaching lines simply stop appearing once they are no longer true.

First time state with no deliveries: a welcome greeting, a dotted panel explaining that deliveries appear automatically, Send a package with a teaching subtitle, and popular route chips

( 01 · First time · no deliveries )

First-time state

New users arrive with nothing on the app. Instead of a tutorial most people skip, each section explains itself. The layout is the same one they see in every other state, so nothing has to be relearned once the app fills up.

  • The tracking block says matching happens automatically. Without that line, people go looking for a way to enter a tracking number.
  • A short subtitle under Send a package covers both shipping modes. It disappears after the first shipment.
  • Route chips show one same city and one cross city example, so the service range is clear without a sentence explaining it.
First run with one delivery already matched: the greeting reports the delivery, an out for delivery card shows the arrival window, and the teaching subtitle under Send is still present

( 02 · First time · 1 delivery matched )

First run, with a parcel already moving

This is what most new users actually land on. They sign up, enter their phone number, and Bosta already has a shipment against it. The claim made on the empty screen gets shown here rather than promised.

  • No need to explain that matching happened automatically. It is a pleasant surprise.
  • The teaching subtitle under Send stays. It keys off whether the user has sent anything, not off whether they have deliveries.
  • The tracking card is the same one a returning user sees. Nothing is styled as onboarding, so there is nothing to unlearn.
  • The greeting reports the delivery instead of welcoming the user. Someone with a parcel arriving today is better served by the status.
Returning user with nothing in transit: the greeting is just a name, the tracking area shrinks to a single strip, and Send a package moves up

( 03 · Returning · no deliveries )

Nothing in transit

These users opened the app without a task waiting for them. It is the likeliest moment for them to try something they have not used before, so the space goes to sending rather than to an empty container.

  • The tracking area shrinks to a single strip instead of holding a full card's height.
  • That brings Send a package and Shop closer to the top without reordering anything.
  • The greeting drops "you're expecting", since there is nothing to finish the sentence.
Returning user with one delivery: one tracking card, no supporting rows, no overflow link, and no teaching subtitle under Send

( 04 · Returning · 1 delivery )

A single delivery

The most common returning state, and the baseline the busier ones build on. One card, no supporting rows, no overflow link.

  • The greeting reads "delivery" rather than "deliveries". Both the number and the noun change with the count.
  • Send a package sits higher here than in any state with more parcels, since nothing is stacked above it.
  • No teaching subtitle under Send. This user has been onboarded before.
  • Everything below the tracking card holds the same position it does in the three and five delivery states.
Returning user with three deliveries: an expanded card for the parcel changing state soonest, two compact rows with ETAs beneath it, and Send a package still visible

( 05 · Returning · 3 deliveries )

Several deliveries at once

Someone who orders from three shops in a week has three parcels moving at different speeds, so the section has to hold more than one without turning into a list.

  • The count sits in the greeting, so the total is clear before reading any card.
  • The expanded card is whichever parcel changes state soonest. Out for delivery ranks above in transit, which ranks above picked up.
  • The rows underneath drop the progress bar and show a short ETA instead. At that size the bar is too small to read properly.
  • Send a package is still visible without scrolling at three deliveries.
Returning user with five deliveries: the section caps at one expanded card plus one row, then a See all 5 deliveries link, keeping Send a package on the first screen

( 06 · Returning · 5 deliveries · capped )

When the list gets long

Past a few parcels the section stops growing and links out instead. This state exists to check the layout holds up during a heavy shopping week, which is exactly when tracking is busiest.

  • Additional deliveries collapse into "See all 5 deliveries" rather than adding more rows.
  • Without that limit, sending gets pushed off the first screen at exactly the time the user is buying most.
  • Tracking is checked often but earns nothing. Sending is occasional and is where the revenue is. The limit keeps the first from crowding out the second.
  • The full list lives in the Ship tab, which is a better place for it.

( Next case study )

Designing trust→