Cartona Signup Flow Real UX Case Study - header image
What we did

Launched in April 2022

The brief

The story began when our Squad Product Manager, Eman Abdoun, got mentioned by the Head Of Marketing, Nour Sobih, about a massive drop in the number of downloads Vs.—the number of registrations for our mobile App. 

So we started with a focus group between Product Team, Marketing Team, and data team to search and list the reasons that may lead to this. So the results of this discussion led us to two main points:

  • Offline one ( Related to the marketing campaigns) 
  • Digital on App ( Related to the signup flow

For the offline

  1. We started by checking the last campaign’s targeted areas and if it’s an area our app covers or not. 
  2.  We found that at the same time, there was a launched campaign on TV and social media all over Egypt; however, we were working on just four governorates at this time. 
  3. It was a lead generation campaign across the marketing and sales team to check the next governorate we can launch based on the number of potential customers who will register on the app.
Is this the main reason?

BIG NO! To clarify, users can register for the app even if we are launching a campaign and installing the app. During registration, the user can create a complete account. Upon logging in, we will notify the user if no retailers are available in their area, as we have yet to offer services in that region.

So let’s check the Digital path, I decided to user our resources on checking this:

  1. I instructed the customer support team to forward any complaints from users regarding account creation or registration on the Cartona App.
  2. A heuristic evaluation session was organized for all product designers, including those on my team and the Speakol team, as it is our sister company.
  3. We initiated data analytics work on our existing data tracking applications, such as Google Analytics, Redash, and Clevertap.
  4. Another analysis of user behavior in the app was undertaken using a different form of behavior tracking, this time utilizing our implemented session-recorded SmartLook technology.

Then the results of Those activities leaded us to understood that:

  1. Our customers were facing several issues with the registration process, including users in covered areas and the sales team requesting a salesman onsite to register and deliver the app to the user.

  2. After analyzing data from Clevertap, Google Analytics, and Redash between September 18, 2022, and October 18, 2022, we discovered the following:
    • Only 14.24% of the total installs resulted in registrations.
    • Users typically spent 02:30 min on the registration page without successfully registering.
    • 7.96% of the traffic went to the sign-up page, and 99% of them dropped off without registering.
  3. Using Smartlook recorded session behavior tracking, we monitored user behavior to gain insight into the high drop-off rate. We found that:
    • Users usually enter their mobile numbers first before clicking on the “Sign Up” button.
    • 80% of users encountered difficulties when a location banner appeared.
    • 40% of users clicked on “Sign In” after filling out the registration form instead of signing up.
  4. During the heuristic evaluation session, which involved our in-house designers, with help of Esraa Allam and Alaa Elsebaiy, we identified several major heuristic principles that were impacted, including:
    • Consistency and standards
    • Aesthetic and minimalist design
    • Match between system and the real world
    • User control and freedom
    • Recognition rather than recalling definitions
    • Help users recognize, diagnose, and recover from errors.

The full flow heuristic evaluation in details

According to the results, we are currently only meeting 4 out of the 10 Usability Heuristics for User Interface Design and need to follow the rest. However, this is acceptable, given that developers initially built the app as an MVP and had not undergone any product work or design.

Login Page Heuristic evaluation

Principles affected
  • Consistency and standards
  •  Aesthetic and minimalist design

It seems like sign in and sign up is the same function also most user click sign up automotacilty after adding number the

  • Separate sign up button.
  • Change colors of the sign in to be more attractive over the sing up


cartona app Login Page Heuristic evaluation

Location Permission Heuristic evaluation

Principles affected

Match between system and the real world


Terminology isn’t clear enough, we ask users to click on a word that doesn’t exist.


Ensure users can understand the meaning without having to go look up a word’s definition.

Location Permission Heuristic evaluation

Location Locator Heuristic evaluation

Principles affected
  • User control and freedom
  • Recognition rather than recalling definations
  • User have to select location manually.
  • There’s no validation for area covarge from the beginning.
  • Add search to map.
  • Inform user if the area isn’t covered and allow them to vote for it.
cartona Location Locator Heuristic evaluation​

Registration form Heuristic evaluation

Principles affected

Aesthetic and minimalist design


Much more information requested in one screen.

  • Prioritize the content and features to support primary goals.
  • Involve the user in the reason behind the data.
cartona Registration form Heuristic evaluation​

Error Detection Message Heuristic evaluation

Principles affected

Help users recognize, diagnose, and recover from errors

  • 4 Errors appear in the same dialog.
  • User don’t know how to link between them and the components.
  • Tell users what went wrong in language they will understand — avoid technical jargon.
  • Use traditional error message visuals, like bold, red text.
cartona Error Detection Message Heuristic evaluation​

After that let’s Identifying and Addressing Key User Interface Issues for Better User Experience

  1. Users have difficulty differentiating between “sign in” and “sign up.”
  2. Users encounter difficulties in defining their locations since the map is not searchable and, therefore, location accuracy is questionable.
  3. The sign-up form lacks user explanation about the required information and data input.
  4. Users are unable to pinpoint precisely where errors occur.

At this point, we have a general understanding of the primary problem and can begin to address it. However, I conducted a competitor analysis to confirm our approach and gather insights into what other companies are doing. I installed and examined various applications on the market, such as MaxAB, Fatura, Sary, and Capiter, taking screenshots and illustrating their respective user flows. The purpose of this step is to:

  • Compare our approach with that of others.
  • Obtain ideas and inspiration from existing market applications.
  • Verify the ideas we intend to employ to rectify the problem, such as incorporating onboarding screens.

Maxab App - Registration Flow

Actually what’s great about maxab app signup/sign flow the simplicity of registration just 3 steps:

  • User mobile number
  • User store name
  • Location auto detection

In my experience in retail, this type of registration process, despite being simple and requiring only a mobile number, store name, and auto-detected location, can lead to a high number of fraudulent accounts. Even with user validation after login, it can still be a backdoor for spam and fake account creations, which can be challenging to clear from the data team’s side and the technical side of database storage.

Fatura App - Registration Flow

Fatura also great when it comes to the number of steps however the play it smarter in two points 

1- reducing huge number of data in just 2 steps 

2- Inform the user by the number of the steps using progress bar pullets with number 

Capiter App - Registration Flow

The best user friendly onboarding and signup flow when it comes to the tone and voice of talking with the users:

  • Firstly the terms in Egyptian colloquial.
  • They added a step of OTP mobile verification 
  • Using the same concept of gathering all the date on the onboarding

Although the last step of taking a picture for user validation in this flow is crucial, I don’t particularly appreciate that it’s mandatory during registration. A better approach would be to provide a “Skip for now” option and suspend the user account until they upload the required picture after login. Otherwise, users may get blocked from continuing the registration process, especially if they are not physically present at their store. In such cases, collecting minimal user data and listing them as potential users would be more suitable.

Sary App - Registration Flow

From October 18th to September 18th, 2022, the Sary app was unavailable in Egypt, but they did have an office there. However, I asked a friend in Saudi Arabia to share their mobile number so I could create an account from Egypt and follow the steps. Why did I do this? Because I wanted to understand the mindset of Saudi consumers, as their approach to B2B retail is similar whether it’s done onsite or digitally. I found the combination of onboarding screens and data gathering particularly effective.

Competitors Discovery Conclusion

What I learned from this, our registration flow need to be simplified and we have to keep an eye out for:

  • Adding helpful friendly onboarding
  • Divided the flow
  • Put the user in the situation

And this will be enhanced by transferring this flow 

Cartona App registration - Old user Flow
Cartona App registration - old user Flow​
Cartona App registration - New user Flow
Cartona App registration - New user Flow​

And here are the designed screens for this new flow

I know it’s weird to simplify by increasing the steps and number of screens but let’s check the screens.

You may have noticed that the design style and design pattern used in the new app are entirely different from the old one. However, I just remembered that our talented Branding Lead, Bassel Hesham, was working on rebranding the app, including changing the colors, logo, and entire identity. I will discuss this project in more detail in my upcoming articles on the blog. As part of revamping the app, we decided to incorporate the new styles and enhance the UX of the signup flow by using the unique app style and branding.

Deeper Look to each screen

here’s what I did exactly on each screen as a improvements in a comparison view between old signup flow screens and the new designed one

Login Screen
  1. Updating the logo and colors with
    our news branding and style guide.
  2. Separating between the signing/sing up sections, and help user to know the different between them.
cartona old login screen
Cartona Signup Flow - Login
Location Access permission screen
  1. Matching new branding.
  2. work more in clear terminologies’ with help users to create their tasks.
  3. Add back to singing option for more flexibility as users was closing the app and reopen it to get back.
cartona old location permission screen
Set Location on map screen
  1. Adding search to help users find their location faster.
  2. Applying the style guide for the screen components
cartona old map locator screen
Cartona App Set location on map screen
Regesteration Form
  1. Dividing the steps into 3 separated screens
  2. Applying style guide.
  3. More fixed clear text field titles.
  4. Reducing some data with management across data team.
  5. Start using icons to help users recognize
cartona old registration form
Signup – Business Data
Cartona Signup flow - Personal Data
Your area is not covered Message

This message was appearing on the begging after installing the app so I think about use it as a lead generation for collecting data

  1. Dividing the steps into 3 separated screens
  2. Applying style guide.
  3. More fixed clear text field titles.
  4. Reducing some data with management across data team.
  5. Start using icons to help users recognize
cartona old area not covered screen
non covered areas lead generation popup
Form Error Messages screen

It’s very clear and common across all apps but as our app was outdate i just matched it by:

  1. Changing the error previewing concept to labels instead of popup.
  2. Applying style guide.
cartona old error representing screen
error previewing registration form
Conclusion and results
Your turn

Hey there! I wanted to share with you what I’ve been working on with my team, and I would love to hear your thoughts and feedback on what we did well and what we could improve on for next time. What suggestions do you have?

wyf mobile app UI random screens

WYF Mobile App

I designed the WYF Mobile App to simplify the World Youth Forum attendee experience. Users can register, manage activities, book sessions, and connect with
Read More