Comparison Slider

Product Design — 2022

Comparison Slider

The Challenge

Create a new Comparison Slider module to attract users to Format's variety of customizable modules.

Project Overview

Format is an online portfolio building platform serving visual artists. Users can select from a library of modules to add content to their site.

A huge percentage of our users are professional photographers, and photo editing is a fundamental part of their business. Comparison sliders help photographers showcase their editing and retouching skills by making the difference between two images crystal clear.

The Team

Product Design

Product Manager

Quinn, Michael, Zaid

Comparison Slider Final Design - Empty State


Competitive Analysis

Understanding common UX patterns ensures that your design will feel intuitive when users interact with it. I searched for existing comparison sliders to see what the essential components were, and what could be improved.

Design Process

Sketches and User Flows

I started the design processes by considering how a user might go through the uploading and customizing process, and rooting out my own assumptions about the UX. I explored this journey through user flows and sketching potential interfaces.


Based on discovery in the sketching and flows process, I created wireframes of the interface. I adjusted them based on feedback from the Product Design team, the project stakeholders, and the developers working on the project. Our design team meets 2+ times a week to share design feedback.

Empty State

First Image Added

Second Image Added

Slider position changed and image selected

Defining customizations

Because this module will be customizable by the user, I needed to define which aspects of the module should be customizable, and in what way.

Accounting for customizations adds a layer of complexity to the design work at Format. Most aspects of the module have to be flexible to how a user might customize it. Options for alignment, colours, iconography, sizes, etc, have to be designed for in any configuraion.

Colour and typography customizations are the most effective way for users to tailor their site’s content to their brand. Small tweaks to iconography and sizing give more particular users granular control to perfect the look and feel of their site.

Honing Interactions

I love getting into the details when designing interactions. Because of my experience as a web developer, I routinely provide demos of how I'd like interactions to look and feel using apps like CodePen.

For this project, I created a demo of the comparison slider editor to define the behaviour when:

• Returning the dragging bar to its home position
• Selecting an image
• Deselecting an image

See the Pen Slider interaction by Laura DeGroot (@lazzzzzzzzle) on CodePen.

Final Designs

Over the course of the project cycle - through feedback, iteration, and dev collaboration - the feature was simplified to its most essential parts. After choosing the Comparison Slider module, a user can upload their images, test the alignment with the in-app slider, edit the content of the labels, and customize the design of the module's appearance on their site.

The designs incorporate our existing UX and UI patterns, including elements from our in-house design system.

Empty State

First Image Added

Second Image Added

Image Selected and Labels Edited

Design Editor


During the development and QA part of the cycle, I was able to polish the behaviour as I was interacting with the module in our staging environment. Extra consideration went into the interaction experiences like click behaviour (clicking anywhere within the module will move the slider), cursor appearance, mobile touch behaviour, etc.

Live Demo :)