fintech
UI/UX case study
Autumn 2023

UIUX
Case Study

In-app search and purchase funnel redesign

Overview

The Client

ManoMano is an international online marketplace for products and services in the DIY, gardening and home improvement sector in Europe. The client also emphasizes environment concerns and reduction of carbon footprint. The ManoMano app is an important sales platform for the company. Its goal is to enable customers to browse the inventory and make purchases.

Case Study

In this exercise, my goal was to help users make better decisions when purchasing products on ManoMano. I take a deep dive into the app’s purchase funnel, with emphasis on the product page, and I explore what information users need to make a purchase and how best to display it.

Experience Audit

Before I started designing, I did an overview of the current design to see if it stands up to modern UX standards. In addition to the obvious issues, I also note minor things I’d like to improve on. I noted all my findings below.

Search Results Screen

ManoMano is an international online marketplace for products and services in the DIY, gardening and home improvement sector in Europe. The client also emphasizes environment concerns and reduction of carbon footprint.The ManoMano app is an important sales platform for the company. Its goal is to enable customers to browse the inventory and make purchases.
ux auditux audit

Product Screen

It is best to show the most important information on top, and that important CTAs are visible all the time. The current design has some misaligned icons and could also benefit from a better page organization.
ux auditux auditux auditux auditux audit

Purchase Confirmation Screen

ux audit

Final Design

Colors

I retained a couple of colors from the original design, namely the logo’s cyan and the yellow originally used for review stars and other UI elements. To enrich the experience, I wanted to utilize two backgrounds, one mid-level blue and a light grey.

Color Distribution

Primary

CTA buttons
29BAAD
Shamrock
Menu background
Title text
3E658E
Chambray
Display Text
00172F
Midnight

Secondary

Cards
FFFFFF
White
Cards background
F5F6F8
Athens Gray
Labels
C5C5C5
Silver
Highlights
FFB852
Texas Rose
Highlights
FFB852
Texas Rose
Highlights
FFB852
Texas Rose

Typography

A sans-serif Google font. The square design reflects reliability, strength, and practicality while maintaining a clean and modern aesthetic.
Aa
Titilium Web
Title Huge
Regular/32
Title Strong
Bold/24
Title Big
Regular/24
Title Normal
Bold/20
Title Small
Normal/20
Body Normal
Regular/16px
Body Small
Regular/14px
Label Normal
Regular/12px
Label Strong
SemiBold/12px

Iconography

UI Icons

Search Results Screen

My main goals for redesigning the search results page was decluttering and modernizing. I reduced the amount of information displayed both in the header and product cards. This enables the customer to make a choice based on few key details instead of too much data.Both header and bottom navigation bar have gone through a major overhaul: I introduced a blue color as background to add depth and interest to the design and help differentiate major sections of the layout. I kept the original yellow for product-related data, such as stars.
design details

Product Details Screen

The revamped product page starts with a large image carousel, showcasing photos of the product. Below it the most relevant information regarding name, price, discounts, delivery, brief description and overall score. Additional information below include technical specs, reviews section and delivery and return details. I added an environment section, as ManoMano values sustainability.The original product page contains several suggestion lists, which may cause confusion. I narrowed these down to two main lists. This makes the product page more concise and delivers more focused data.
design details

Add to Cart Confirmation Screen

design details

Like what you see? Get in touch.

yairmorr@gmail.com

And follow me.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.