UX/UI Project

Refactoring Livelo's
"My Account"

+1.6M

Users impacted

24.08% of user base

91.7%

Sucess rate

Card addition flow

4.6/5

Users satisfaction

My Club experience

The Challenge

Core problem

Users were lost in a "labyrinth" of two separate account management pages ("My Profile" and "My Account"), leading to significant disorientation and a higher cognitive load.

Limited Card Control

Inability to add or edit credit cards directly on the website. A critical barrier for a loyalty program.

Club management issues

Users struggled to manage their Club Livelo subscriptions, undermining perceived value and user autonomy.

Complex Flows

Confusing flows, responsiveness, and overall bad user experience.

Data

User behavior data

Section

My Account

My Profile

Unique users

1.403.531

284,902

% of users

20.02%

4.06%

Traffic from 01/2023 to 07/2023

Ideation

Benchmark

I performed extensive benchmarking, looking for some inspiration from leading companies in digital experience. Airbnb, Spotify, and Google emerged as key references due to their effective approaches to information organization and account management.

Two primary patterns emerged:

1. Airbnb and Amazon: Clickable visual cards, grouped by category and linking to dedicated pages.

2. Spotify, Google and LinkedIn: A side navigation menu, enabling users to quickly explore items and edit corresponding information within the main content area of the page.

Wireframe

With the established guidelines, I initiated the wireframing and prototyping phase. I created two prototype versions to validate the layout ideas inspired by our benchmarks:

Idea A: Based on the card-based model (Airbnb/Amazon).
Idea B: Featuring a side navigation menu (Spotify/LinkedIn/Google).

Validation

First Design Critique

Version A or Version B

I submitted the prototypes to a Design Critique for internal validation and gathering qualified feedback. The result was unanimous: Version B (side navigation menu) prevailed with a 12-0 vote.

Second Design Critique

Refining Details and Innovating

I conducted a second Design Critique, this time focusing on the "Cards" and "Club" sections. The objective was to detail the card registration flow and the Livelo Club management experience.

Critique Briefing:

Central Theme: The project was progressively taking shape and solidifying as a vital space for the user.
Objective: Analyze the card registration flow and the manageable aspects of the Club, which would now have a dedicated page.
Instructions: Read the information, navigate through the prototypes (website and mobile site), and record observations on a specific board.
"My Club" Page: This page would only exist for participants who had or currently have a Club subscription. The analysis focused on its behavior with an active subscription.
"My Cards" Section: Emphasized the importance of having more than one registered card and the option for Livelo to charge the subscription to other cards in case the primary card fails. This functionality would provide greater assurance for subscription renewal. The card registration flow and the Club's influence on it would be explored.

Critique Guide:

Allocate time evenly between the Club and Cards screens.
After navigating the prototype, choose a board to post observations.
Time Allocation: ~10 minutes for prototype analysis, 15 minutes for observations, and 15 minutes for discussion.

Usability tests

Maze

Website - desktop and mobile

I conducted usability tests with identical journeys for both desktop and mobile sites, with activities focused on common account management tasks:

Consult credit cards (starting from the Homepage).
Verify registered address.
Change mobile phone number.
Change password.
Check order status.
Open field for general user comments.

Crucial highlight from mobile test:

The "Hamburger Menu"

A critical point of concern in the mobile tests was the difficulty for 62 out of 124 users to locate the "Hamburger Menu", leading to test abandonment. The average navigation duration in these cases exceeded 50 seconds.

This discovery prompted an immediate revision of the menu's placement, aligning it with our Design System guidelines. In subsequent tests, the average time to find the menu decreased to 16 seconds, with a 100% user success rate. This correction significantly impacted usability and task completion.

Maze Usability Tests: Results

Overall survey assessment:
60 interviewees.
Overall score of 4.4 (on a scale of 1 to 5, with 5 being "very satisfied").

Activity: Add credit card
91.7% direct success.
Average duration: 25.8 seconds.

Activity: Name credit card
89.3% task completion.
Average duration: 27.5 seconds.

Activity: Delete primary card and set another card as the new Livelo Club payment method
86.5% task completion.
Average duration: 34 seconds.
Feedbacks from users:
"I had no difficulties performing the proposed tasks; the site is very clear, easy to execute. My compliments to the Livelo site designer."
"It was very easy to use the area to manage my cards."
"Very easy, intuitive layout and easy to read."
"Very intuitive space, I liked the ways to add and manage cards."

Activity: Change mobile phone number
50% direct success.
42% indirect success.

Activity: Change password
84% of users went directly to "Security & Privacy."
16% were split between: "Personal Data," "My Cards," "Accounts & People," "Devices."

User's feedbacks:

"All tasks were easy. The options to perform them were where I would expect them to be."
"I FOUND ACCESS EASY, APPROVED."
"I found it very easy to navigate and find the areas requested in the mission. It's great to see a company cares about making consumers' lives easier when using digital resources."
"When I went to edit the cell phone, I noticed some instability on the site; I liked the 'My Account' tab, it's very simple to navigate and all information is found, I found it positive." This is a great example of a balanced comment. It provides specific, actionable feedback on an instability issue while also praising the clarity and simplicity of the 'My Account' tab.
"Indeed, all navigation is quite intuitive; I didn't find any major difficulties, (...) overall very simple, didactic, and intuitive."

Insights and actions

Based on these results, we made crucial decisions to optimize the information architecture:

We relocated the "Change password" item to the "Security & Privacy" menu.
We moved the "Devices" item inside "Security & Privacy."

These alterations aim to increase the direct success rate for critical tasks, eliminating menu competition and guiding the user more intuitively.

Moderated Interviews:

While Maze tests continued for general validation, I conducted moderated interviews specifically to validate the "My Club" page and its account management capabilities.

Overall interview:

7 interviews.
Overall score of 4.6 (on a scale of 1 to 5, with 5 being "very satisfied").

User's reports:

"Practical, very direct. Buttons are very clear, also very intuitive. I had no difficulty at all. Everything was very clear. The texts too, short and direct." This comment offers strong praise for the clarity, intuitiveness, and directness of the interface. It emphasizes ease of use and efficient information delivery.
"Overall, I found this page very comfortable for viewing. I didn't find there to be too much information clutter, it ends up being something very concise..." This feedback commends the visual comfort and conciseness of the page, indicating a successful information hierarchy
"Clear... Club date. The type of Club, the service order, the value and the status, nothing else would be needed. I don't miss anything here." This comment is powerful because it confirms that all essential information is present and clearly displayed.
"It seems they deliberately hide it so the customer can't find this option and ends up giving up. Getting worn out and giving up. So I think this wear and tear that we generate with some insights doesn't attract. It just pushes them further away and causes even more dissatisfaction in the customer, and in a way, they start speaking ill of it and not recommending or referring friends and family to participate either. But here I see that it's very clear, not difficult to access." The user then provides powerful positive feedback by stating that, in this specific instance, the option "is very clear, not difficult to access." This demonstrates that your work has successfully addressed a major user pain point and built trust through transparency.

Delivered solutions

The refactoring journey ended in a completely redesigned "My Account" area, which not only solves the identified problems but also establishes a new standard for account management at Livelo. We defined a clear rule for the inclusion of new items in "My Account":

Items focused on account management.
Absence of promotional content.
No content duplication.
Approval by the Experience and Design System teams.

Benefits delivered

Centralized: "My Account" now centralizes and simplifies the management of all user account data.
Quick and intuitive access: Offers rapid access to essential sections such as Personal Data, My Livelo Club, My Cards, My Addresses, etc.
Optimized Livelo's Club management: Allows users to view and manage their subscription in a more intuitive and practical manner.
Organized structure and fluid navigation: Provides a logical and organized structure, facilitating user navigation throughout the website.

Also, this project delivered a solid work for:

Clean navigation: Ensures an accessible and efficient navigation experience for users of all familiarity levels with Livelo.
Sustainability and adaptability: Promotes design sustainability and enhances adaptability for the Design, Technology, and Business teams, enabling future evolutions and expansions with greater fluidity.

My account:

Address:

Credit card:

Preferences: