Login/Signup Project

Modanisa enables modest women to look good and feel self-confident in today’s world. Its mission is to build a global ecosystem that combines fashion and technology to serve the lifestyle needs of modest women.

I led the end-to-end redesign of the login and sign-up flows over a one-year period. As the sole UX designer I managed the entire process from initial research and design to testing and launch, keeping the experience seamless across mobile apps and mobile web.

increase in sign-up conversion

~15%

less drop-off during onboarding

20%

countries live

140+

At the beginning of the project I gave the analysis real time, to find the right design for our users. I went through the login and sign-up flows of 13 apps screen by screen, among them Amazon, Zalando, ASOS, Shein, Trendyol, Hepsiburada, AliExpress, Airbnb and Getir.

I compared each on the same seven features: a wallet, two-factor authentication, Face ID / Touch ID, login with a phone number, login and sign-up on one screen, passwordless login and quick sign-up with a social account. The table made clear what the industry now took for granted, and what we were missing.

To understand our audience we first created personas. One of them is Hülya: 53, a homemaker and mother of two, who loves shopping online, returns a lot, and browses the app in the evenings.

On the map we gathered what Hülya thinks, hears, sees and does. “What was my password?”, “Which email did I use?”, “Where is the code?” were the lines that came up most. The pains were clear: forgetting the password or the email, complicated sign-up pages, and opening account after account because of it. So were the gains: logging in with one tap, never needing a password reset, logging in with a fingerprint.

After understanding the user we ran this exercise with the team at the start of the project, to foresee what could go right or wrong.

Our hopes were a fast, lean and secure login; “log in within 5 seconds” became the team’s shared goal. Instant SMS and email delivery, and a system we could manage centrally and monitor with ease, were on the list too. Our fears were mostly about the switch: things breaking in production during the migration, SMS or email not arriving, the technical debt of the legacy system, and time pressure. Talking them through early let us plan for them and avoid losing time and money.

Visually I began the initial work at this stage. After the analysis and research phases I took the first steps in developing the product and created various wireframes. Their value lies in identifying and addressing errors or improvements before the product progressed further.

Login and sign-up is a crucial point in the shopping experience, especially where registration or login is mandatory. We aimed to keep it simple without drastically altering user habits.

In the legacy system 53% of users logged in with email, 32% with a phone number, 10.5% with Facebook and 4.5% by other means. We first considered removing the phone option, but 32% was far too large a share to drop. And since most of our users had Gmail accounts, login and sign-up with Google became a priority.

log in with email

53%

log in with phone

32%

log in with Facebook

10.5%

other

4.5%

The old design had three core problems. There was no clear primary button; the social login options were too strong and users struggled to find the right one. The screen was cluttered; some elements repeated themselves and did not match the brand. And the infrastructure was closed to new features; adding Google login or passwordless login was not possible.

The key innovation was a single smart input that detects and formats either an email or a phone number as you type. The phone and email tabs went away, the interface got simpler and the cognitive load dropped. The login/sign-up button became the one prominent CTA; the other methods stay noticeable without competing with it.

Small but effective decisions went into the sign-up screen too. A short note under the input says what the phone or email is used for: order tracking and login. The password field shows its rules up front. Instead of a checkbox, a short line explains that signing up means accepting the terms of use. Users who already have an account can switch to login with one tap.

In the later stages I developed four alternatives: a layout with social login on top, two sign-up forms that add a full-name field, and a minimal version that reduces social login to icons. We set them all aside for reasons such as cost, insufficient infrastructure and performance. The focus was to keep the design very simple and concentrated solely on login and sign-up.

The login flow involved more than 15 screens across all scenarios, including error screens and success states. The project was designed exclusively for mobile, with no desktop version.

The registration flow encompassed over 20 screens across all scenarios, including error screens and success states. The project was designed exclusively for mobile, with no desktop version.

When users forget their password they can retrieve it via mobile phone or email. Previously there were significant security vulnerabilities and server costs; the new flow was rebuilt from the ground up.

Users can change their password through a reset link sent to their email or mobile phone. The process runs through a webview, mainly because users can also reach their email from a desktop.

Users can log in with Google, Facebook or Apple. Whether they have an account or not, one tap logs them in, or signs them up and logs them in. If a user previously signed up by email with a Gmail address and later chooses to connect with Google, the accounts merge.

• Figma
• Adobe CC
• Miro
• Google Analytics
• ProtoPie
• Zeplin
• Hotjar

The design process took 2-3 months; the whole road to testing took a year. The first stage, built for iOS and Android, was treated as an MVP, on an infrastructure ready for new features in later stages. Testing began in over 140 countries.

After launch, sign-up conversion rose by about 15% and onboarding drop-off fell by 20%. Later at Modanisa I also designed the MyModanisa loyalty program and its digital wallet experience.