Brief

UX study of the desktop and mobile user interface of the OMBRA clothing store website.

OMBRA is a website with a large number of clothes, accessories and other products that are sold through referral links. This work was handed over to the customer and at the time of publishing the case study was not implemented in code.

Goals and Objectives: research and develop a responsive website for Ombra that caters to both first time customers and loyal customers, while maintaining Ombra's current branding.

Our role: UX design, UI design: research, interaction design, visual appearance.

Timeline: 2 weeks

Tools: Figma, Notion, Adobe Illustrator

Case Description

The client's business is groups on WhatsApp with referral links for clothing and cosmetics. The client wanted to scale their business and use the website for analytics on products, do retargeting when placing ads, give users the ability to save products in their personal account and spend more time on the website researching products.

Objectives

Develop a website design that will scale the business and retain users. The site should have a shared feed where the user can "linger" and spend as much time as possible.

Solution

We developed a website design that consists of 2 main elements to solve the task at hand.

Selections for different target audiences

A user visiting the site can choose a selection that suits their mood or a selection with discounts, a selection with recently added products, etc.

Ribbon

A ribbon with all products, which the user can scroll through while performing daily tasks while browsing products. The ribbon is designed like a social network, which has a negative impact on user retention, because when scrolling the user gets "stuck" and wastes a lot of time.

Read more about the design versions

First screen

A user visiting the site can select a collection that suits their mood or a collection with discounts, a collection with recently added items, etc.

Variant 1

The first screen displays a list of the three most recent collections. At the top, the user can click the "see all" button to go to a page that lists all collections. This option gives us the option to not be limited by the number of words in the title of the article.

Variant 2

Option to have the home page navigate to the men's or women's collection.

Variant 3

This option also displays the selection on the first screen. The user will be able to click a small button and go to the collection page.

Second screen

More about the ribbon (list of products)

A ribbon with all products that the user can scroll through while performing daily tasks while browsing products. The ribbon is designed like a social network, which has a negative impact on user retention, as the user gets "stuck" while scrolling and wastes a lot of time.

We suggested using a 3 or 5 column structure. 3 columns will allow to display more products and create an impression of a huge number of products. The 5-column structure will give the user the opportunity to look at the product in detail.

Pinterest layout

Alternatively, we can use a Pinterest layout, which will look more stylish and increase user retention as they will have an endless feed that they can scroll through with beautiful photos they want to keep (for this part of the target audience, the site values aesthetics, so every photo they like can be saved to their collection and then purchased).

Mobile version

This is the main page where we skip the male/female categories.

Style

Playing with style elements to create and choose the best concept for the Ombra website.

Basic product card options that can be customized by adding additional elements or colors.

Layout

We developed two versions:

After conducting extensive research and analyzing competitor stores, we developed a strategy to optimize the user experience on the client's website. We presented a concept with two different parts, each with a unique style and layout. Significant effort was put into this work to keep users on the site for as long as possible.