In today’s digital age, the success of any online platform hinges on the quality of its user experience, particularly on mobile devices. Welcome to a detailed case study where I embark on a mission to transform the mobile UX/UI design of MesDePanneurs.fr, an online service connecting users with local handymen. My journey is a testament to the impact of user-centered design in delivering a seamless, efficient, and engaging experience for mobile users.
MesDePanneurs.fr sought my expertise to enhance their mobile interface, and this case study will offer an in-depth exploration of my audit process, the innovative strategies employed, and the remarkable outcomes achieved through a meticulous UX/UI makeover. From pinpointing pain points to crafting user-focused solutions, this case study will illustrate how I turned a once-underwhelming mobile experience into a compelling and user-friendly journey.
Join me on this expedition of UX/UI excellence, where every tap, scroll, and interaction has been carefully crafted to cater to the evolving needs and expectations of today’s mobile audience.
Enhancing the value propositions. Grey is often perceived as inactive colour.
Consider naming each step to set expectations early
Optimise the form. Make it feel shorter:
● Use placeholders;
● Floating labels;
● Reduce dead space;
● Remove unnecessary fields;
● Real time inline validation
● Floating labels
● Inline live time validation
● Explanation below the form field
● Great visual hierarchy
fit all questions per one screenful and shows the progress bar
People don’t read, they scan:
● Leave only key info
● Use headers and subheaders
● User icons
● Use bullet points
Design for the scanning eye and have great information hierarchy
Bring up your great rating, show it higher in the page
Rethink carousels/ sliders
Research shows that carousels rarely work
Carousels can be perceived as banners and therefore will be
ignored. The user should always be in control.
Automatic image sliders or carousels on homepage should
be avoided or the frequency should be decreased.
○ Human eye reacts to movement (and will miss the important stuff)
○ Too many messages equals no message
○ Extra weight
Research: Conversion XL , ClickZ , Widerfunnel , NN Group , Erik Runyon
Improve visual hierarchy. Help user with the choice. Reducing the uncertainties in people’s mind before
they ask the questions is the best way to increase
conversions.
List of A/B test recommendations
1. Consider using a visual banner for your new service
2. Consider enhancing the value propositions
3. Consider naming each step in the check-out
4. Optimise the forms, make them feel shorter
a. Use floating labels
b. Use placeholders
c. Auto-suggestions, where possible
d. Auto-correction
e. Correct keypads
5. Improve visual hierarchy
6. Optimise long paragraphs, create for the scanning eye
7. Rethink carousels/ sliders
8. Show the rating above the fold