Secret Sales

Product Design

eCommerce Website

Dark mode project

The company

Secret Sales is a globally platform based in the UK, that is fast becoming the No.1 destination to buy must-have fashion and sport-wear items alongside homeware essentials and luxury cosmetics at affordable prices.

The problem

The company needed a Product Designer to create Premium designs for their website (desktop, tablet and mobile). Someone focused in metrics, UX Research, prototypes and with a strong UI eye.

Timeline

8 months

Roles

Lead Product Designer, Interaction Designer

Tools

Sketch, UsabilityHub, Principle, Hotjar, PS

Links

www.secretsales.com

A Premium website.

For years Secret Sales used to work with UX Freelancers to take care of their website. The CEO’s wanted a Product Designer in-house to give a more personal and more luxurious touch to their website.

I worked in collaboration with Andy Christodoulou, the Head of Product at Secret Sales during almost a year. Together, we’ve worked with a team of 3 developers in-house and 7 remote developers. All of this in an Agile environment.

I had the chance to be trusted by those guys and design premium features for the website. There I was focusing on 3 different things:

UX Methods & Analytics

Micro-interactions

Brand

Designing our funnel.

As we were about to create lots of new features for the website and analysing the conversion after their implementation, I created a basic User Journey Map. It will help us to establish the right strategies for every step of the conversion funnel.

UX Research

A human methodology.

We worked in 2-weeks sprints. Meaning that every 2 weeks a new feature had to be (re)designed. For features that could have a big impact on the conversion, I liked to use 3-4 days for research before sketching. It was for me the best way to be user-centric. Here is an example of the minibag feature that took me 2 weeks to redesign and that resulted to pass from 2% conversion to checkout to 6-7% conversion to checkout.

Only if I have time and if the feature is an important one, I like to:

• Setup clear goals and define the unknowns
• Do a benchmark and see what the competition is doing. I take the opportunity to already take some design inspirations as well.
• List the useful features and compare them with the competitors on a matrix.
• Design an empathy map and collect the pain points of our current feature.
• Imagine How Might We fix the different problems our personas could encounter interacting with our feature.
• Setup clear metrics to analyse conversion after the staging.
A/B Test prototypes in UsabilityHub and observe users behaviours in Hotjar.
Analyse our results before - during - and after the design of our new feature. Taking into account important data when designing as well.

Part I

Part II

Micro-interactions

I like to move it move it.

During those 2-weeks sprints, I always try to keep 2-3 days to build clear prototypes (desktop & mobile) for the developers. I accompany those micro-interactions with clear guidelines and references to CSS and animation values (bezier curve type, duration of interaction, etc.).

Mobile

Desktop

Brand

A new direction.

In the end of my time at Secret Sales, the CEO’s told me they would now focus on Brand Stores and needed a search function. It implies a big change in the architecture of the website and the general look & feel. No big UX Research here but only some screens of what Secret Sales could have been. I’m so happy to say that with those wireframes we had the green flag from the investors!

Because we are focusing into brand stores, Secret Sales needed a new features in our CMS. Giving the possibility to our 20 buyers to select any product they want, tag them for special flash sales and change their price. You can find the entire Case Study here. I promise, it’s easy to read!

Brand

A consistent brand across all channels.

As Secret Sales changed of identity quite often in the last few years, they didn’t have a structured Design Library and there were no consistency in the emails. I took care of the Library and rebuilt the 13 transactional emails.

Just for the pleasure and because was discovering motion at that time, these are GIF's I created as headers for our transactional emails.

What about the numbers?

After a few months of hard-work on new features with Secret Sales, we sat with the Head of Product and we checked the metrics. There were a conversion of +300%. We passed from 2% of conversion to checkout to 6 or 7% in average. It represents more than £2 million that we saved. And the incredible thing was… Mainly thanks to the minibag feature.

An experience in eCommerce.

During my time in Secret Sales I learnt so many things as Product Designer. Thanks to the confidence of my managers I learnt that Research and Testing worths more than anything in Product Design. I know that business reality doesn’t allow us to do this every time. We have to be fast. However, if there is a chance to do so, I’m 100% convinced it’s the best way to create value for the user and improve conversion, in a context of eCommerce website.

😍
Thanks for scrolling!

Web & Plugin Design

Cath Sterck

Atomic Design

Seatfrog

Visual Design

Seatfrog

App Design

Seatfrog

CMS Design

Secret Sales

Interaction Design

Secret Sales

UX Research

Inkoko

Web & Plugin Design

Cath Sterck

Atomic Design

Seatfrog

Visual Design

Seatfrog

App Design

Seatfrog

CMS Design

Secret Sales

Interaction Design

Secret Sales

UX Research

Inkoko

Web & Plugin Design

Cath Sterck

Atomic Design

Seatfrog

Visual Design

Seatfrog

App Design

Seatfrog

CMS Design

Secret Sales

Interaction Design

Secret Sales

UX Research

Inkoko