Building a Seamless Login Experience for 24MX

I worked on a Login System Project as a UX designer at 24MX, part of the Pierce Group. While confidentiality limits what I can share (actual designs and prototypes), I’ve included some process and highlights below. This experience gave me valuable insights into building a real product alongside industry designers and stakeholders.

24MX, a leading platform for motorcycle enthusiasts across Europe, offers a wide variety of parts and gear. Despite its popularity, the website lacked a fundamental feature—a login function. Users had to manually enter their address and payment details every time they made a purchase, making the checkout process tedious and time-consuming. Additionally, tracking orders was cumbersome without a user account to store shipping information. Recognizing these pain points, I was tasked with designing a seamless login system to enhance user experience, simplify the checkout process, and improve order tracking.

DESIGNING THE RIGHT THINGS

Primary Research

Problem: Our initial user research revealed significant pain points. Frequent shoppers expressed frustration at having to repeatedly fill out their shipping and payment details for every purchase. This repetitive process led to increased cart abandonment, especially when users were in a hurry. Moreover, the inability to easily track shipping without a login function meant users had to rely on emails or external tracking links, causing additional friction in their experience

Problem: Our initial user research revealed significant pain points. Frequent shoppers expressed frustration at having to repeatedly fill out their shipping and payment details for every purchase. This repetitive process led to increased cart abandonment, especially when users were in a hurry. Moreover, the inability to easily track shipping without a login function meant users had to rely on emails or external tracking links, causing additional friction in their experience

Customer Feedbacks

Core Customer Needs

The core customer needs focus on making the shopping experience easier, faster, and more personalized while respecting privacy. These needs were prioritized to ensure a seamless and convenient process for the customer.

  • Smooth checkout without re-entering all details

  • Access order tracking without needing to enter the order number

  • View order history

  • Save the shopping basket(s), not relying on cookies

  • Store vehicle information, not relying on cookies

  • Receive receipts/invoices

    General CX principle: Make the customer feel in control, balancing personalization and privacy.

Requirements

  • Login options, including social login and passwordless login

  • Ability to save and edit personal information

  • Option to save credit card details using Adyen tokenization

  • Checkout available with or without login

Opportunity Areas

  • Login System: Adding a login system at 24MX can help it stand out from competitors who don’t have one. It makes shopping easier by saving user details, speeding up checkout, and offering personalized experiences. This would help build trust, encourage repeat visits, and give 24MX a competitive advantage.

  • Social Logins: Social logins like Facebook, Google, & Apple can make it easier for customers to sign in quickly without creating new accounts or remembering extra passwords. Not all competitors have this feature, so it would help 24MX stand out by speeding up the sign-up process, reducing barriers, and increasing conversions. This would improve the overall user experience and boost engagement.

  • Enhanced Payment Options: Introducing payment options like Swish and Apple Pay can make the checkout process faster and more convenient for users. None of the competitors offer these features, as they mostly rely on Klarna and card payments. By adding Swish and Apple Pay, 24MX can stand out by offering more flexible and user-friendly payment options.

  • Login System: Adding a login system at 24MX can help it stand out from competitors who don’t have one. It makes shopping easier by saving user details, speeding up checkout, and offering personalized experiences. This would help build trust, encourage repeat visits, and give 24MX a competitive advantage.

  • Social Logins: Social logins like Facebook, Google, & Apple can make it easier for customers to sign in quickly without creating new accounts or remembering extra passwords. Not all competitors have this feature, so it would help 24MX stand out by speeding up the sign-up process, reducing barriers, and increasing conversions. This would improve the overall user experience and boost engagement.

  • Enhanced Payment Options: Introducing payment options like Swish and Apple Pay can make the checkout process faster and more convenient for users. None of the competitors offer these features, as they mostly rely on Klarna and card payments. By adding Swish and Apple Pay, 24MX can stand out by offering more flexible and user-friendly payment options.

  • Login System: Adding a login system at 24MX can help it stand out from competitors who don’t have one. It makes shopping easier by saving user details, speeding up checkout, and offering personalized experiences. This would help build trust, encourage repeat visits, and give 24MX a competitive advantage.

  • Social Logins: Social logins like Facebook, Google, & Apple can make it easier for customers to sign in quickly without creating new accounts or remembering extra passwords. Not all competitors have this feature, so it would help 24MX stand out by speeding up the sign-up process, reducing barriers, and increasing conversions. This would improve the overall user experience and boost engagement.

  • Enhanced Payment Options: Introducing payment options like Swish and Apple Pay can make the checkout process faster and more convenient for users. None of the competitors offer these features, as they mostly rely on Klarna and card payments. By adding Swish and Apple Pay, 24MX can stand out by offering more flexible and user-friendly payment options.

How Might We (HMW)

  • How might we design a login system at 24MX that simplifies the shopping experience and encourages repeat visits from users?

  • How might we make the login process more secure while ensuring that users can quickly access their saved information for a faster checkout?

  • How might we encourage users to sign in using social logins like Facebook, Google, and Apple to reduce friction during the registration process?

  • How might we make social logins more visible and accessible to users who may not be familiar with these options, increasing their adoption rate?

  • How might we integrate payment methods like Swish and Apple Pay to offer a seamless and fast checkout experience at 24MX?

  • How might we promote the availability of Swish and Apple Pay to users who are used to traditional payment methods, encouraging them to try these new options?

  • How might we ensure that adding Swish and Apple Pay improves the checkout process without causing complications for users who prefer Klarna or card payments?

DESIGNING THINGS RIGHT

Research & Sketches

Solution

After brainstorming multiple ideas and features, I collaborated with stakeholders, including the marketing and loyalty teams, co-designers, mentors, and the product manager. Their advice was to break down the larger vision into smaller, manageable steps. Given the available time and resources, we focused on a feasible solution for Version 0.1 and later Version 0.2.


Key Features in Version 0.1:


  • Logins & Sign-Up: Users can log in or sign up quickly using social accounts (Facebook, Google, Apple) or their email.

We introduced three key touchpoints for login access:

a) Email/External Links: Leads to a static page where users can log in or sign up.

b) Header Account Icon: Clicking the icon triggers a slide-out panel from the right for login or sign-up.

c) During Checkout: Users can log in, sign up, or proceed as guests. Guest checkout requires email and phone details for delivery communication.

  • Auto-Save During Checkout: The main feature is the automatic saving of personal information (name, DOB, gender), contact details, and addresses during the checkout process. This eliminates the need for users to manually enter details in the “My Settings” section.

  • My Account Settings: Users can still access and update their saved information and change their password if needed.

After brainstorming multiple ideas and features, I collaborated with stakeholders, including the marketing and loyalty teams, co-designers, mentors, and the product manager. Their advice was to break down the larger vision into smaller, manageable steps. Given the available time and resources, we focused on a feasible solution for Version 0.1 and later Version 0.2.


Key Features in Version 0.1:


  • Logins & Sign-Up: Users can log in or sign up quickly using social accounts (Facebook, Google, Apple) or their email.

We introduced three key touchpoints for login access:

a) Email/External Links: Leads to a static page where users can log in or sign up.

b) Header Account Icon: Clicking the icon triggers a slide-out panel from the right for login or sign-up.

c) During Checkout: Users can log in, sign up, or proceed as guests. Guest checkout requires email and phone details for delivery communication.

  • Auto-Save During Checkout: The main feature is the automatic saving of personal information (name, DOB, gender), contact details, and addresses during the checkout process. This eliminates the need for users to manually enter details in the “My Settings” section.

  • My Account Settings: Users can still access and update their saved information and change their password if needed.

After brainstorming multiple ideas and features, I collaborated with stakeholders, including the marketing and loyalty teams, co-designers, mentors, and the product manager. Their advice was to break down the larger vision into smaller, manageable steps. Given the available time and resources, we focused on a feasible solution for Version 0.1 and later Version 0.2.


Key Features in Version 0.1:


  • Logins & Sign-Up: Users can log in or sign up quickly using social accounts (Facebook, Google, Apple) or their email.

We introduced three key touchpoints for login access:

a) Email/External Links: Leads to a static page where users can log in or sign up.

b) Header Account Icon: Clicking the icon triggers a slide-out panel from the right for login or sign-up.

c) During Checkout: Users can log in, sign up, or proceed as guests. Guest checkout requires email and phone details for delivery communication.

  • Auto-Save During Checkout: The main feature is the automatic saving of personal information (name, DOB, gender), contact details, and addresses during the checkout process. This eliminates the need for users to manually enter details in the “My Settings” section.

  • My Account Settings: Users can still access and update their saved information and change their password if needed.

Challenge in the Design Process

A significant challenge I faced was realizing too late that my initial desktop-first design approach wasn’t ideal for this project, which required a mobile-first focus.

Initially, when users clicked the "My Account" icon after logging in, it led directly to the My Settings page on both desktop and mobile. On desktop, this worked well with a side navigation bar for future features like order history. However, on mobile, this setup didn’t account for where these future options would appear, creating a disjointed user experience.

A developer flagged this issue, pointing out that having separate flows for desktop and mobile would be confusing and difficult to implement. After researching solutions, I found inspiration from my senior UX lead, who was designing a category page with scrollable tabs. I applied this idea by introducing a horizontal scrollable tab on mobile, allowing users to switch between My Settings, Order History, and other future features seamlessly.

This solution maintained a consistent experience across devices and ensured scalability for future updates.

Prototype & Mockups

What Else I Did

Initiate and Lead Design Session: I took the initiative to bring together fellow designers and stakeholders for design sessions whenever needed, ensuring everyone was aligned and involved in the process. It was also crucial to collaborate with marketing and loyalty managers since the “My Account” section would eventually include more features. These discussions ensured alignment and a smoother implementation process.

Initiate and Lead Design Session: I took the initiative to bring together fellow designers and stakeholders for design sessions whenever needed, ensuring everyone was aligned and involved in the process. It was also crucial to collaborate with marketing and loyalty managers since the “My Account” section would eventually include more features. These discussions ensured alignment and a smoother implementation process.

Initiate and Lead Design Session: I took the initiative to bring together fellow designers and stakeholders for design sessions whenever needed, ensuring everyone was aligned and involved in the process. It was also crucial to collaborate with marketing and loyalty managers since the “My Account” section would eventually include more features. These discussions ensured alignment and a smoother implementation process.

Participate in Daily Agile/Scrum Meeting: I actively participated in daily Scrum meetings with designers, developers, and the Product Managers. These sessions were my chance to pitch bold ideas and ensure developers clearly understood my designs. It was a rewarding and inspiring experience!

Participate in Daily Agile/Scrum Meeting: I actively participated in daily Scrum meetings with designers, developers, and the Product Managers. These sessions were my chance to pitch bold ideas and ensure developers clearly understood my designs. It was a rewarding and inspiring experience!

Participate in Daily Agile/Scrum Meeting: I actively participated in daily Scrum meetings with designers, developers, and the Product Managers. These sessions were my chance to pitch bold ideas and ensure developers clearly understood my designs. It was a rewarding and inspiring experience!

What I Learned

Communicate, Communicate, Communicate: E-commerce was a brand-new domain for me, and the design constraints and compliances felt overwhelming at first with lots of existing components. I quickly realized that keeping up meant asking questions and actively communicating with my co-designers. In a fast-paced environment where no one slows down, asking was my way of catching up.

Communicate, Communicate, Communicate: E-commerce was a brand-new domain for me, and the design constraints and compliances felt overwhelming at first with lots of existing components. I quickly realized that keeping up meant asking questions and actively communicating with my co-designers. In a fast-paced environment where no one slows down, asking was my way of catching up.

Communicate, Communicate, Communicate: E-commerce was a brand-new domain for me, and the design constraints and compliances felt overwhelming at first with lots of existing components. I quickly realized that keeping up meant asking questions and actively communicating with my co-designers. In a fast-paced environment where no one slows down, asking was my way of catching up.

Speak Up, Even for "Silly" Ideas: One more important lesson I learned during this project was not to be afraid to share my ideas, even if they seem silly or don’t fully make sense at first. There were moments when I hesitated to share my thoughts during agile meetings or brainstorming sessions, thinking that they might not be valuable. However, I later saw someone else voice the same idea and get appreciated for it. While I wasn’t upset that they received praise, I felt regretful that I hadn’t spoken up sooner. This taught me the value of confidence in expressing my ideas, knowing that even if they don’t seem perfect, they could spark valuable conversations and innovations.

Speak Up, Even for "Silly" Ideas: One more important lesson I learned during my internship was not to be afraid to share my ideas, even if they seem silly or don’t fully make sense at first. There were moments when I hesitated to share my thoughts during agile meetings or brainstorming sessions, thinking that they might not be valuable. However, I later saw someone else voice the same idea and get appreciated for it. While I wasn’t upset that they received praise, I felt regretful that I hadn’t spoken up sooner. This taught me the value of confidence in expressing my ideas, knowing that even if they don’t seem perfect, they could spark valuable conversations and innovations.

" Sreehas did an internship as UI & UX Designer with us in the Customer Experience Innovation Team at Pierce. Sreehas is curious, open minded and dedicated and he takes on every task with a positive attitude. He makes it his mission to acquire knowledge and input and learn what he needs to get the work done well. He has been an appreciated member of our team and I am confident he will be so also in future teams! "

Ann Hedberg

Customer Experience Innovation Manager, Pierce Group

©2024 All Rights Reserved to Sreehas Sreejith

HOME

LINKEDIN

X

CONTACT

©2024 All Rights Reserved to Sreehas Sreejith

HOME

LINKEDIN

X

CONTACT

©2024 All Rights Reserved to Sreehas Sreejith

HOME

LINKEDIN

X

CONTACT