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
Laura
Product Manager
Ayman
Developers
Quinn, Michael,
Zaid
.png?v=1648426868059)
Comparison Slider Final Design - Empty State
Research
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.
.png?v=1648421762768)
Wireframes
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
.png?v=1649194769049)
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.
.png?v=1648427723783)
Empty State
.png?v=1648427691945)
First Image Added
.png?v=1648427684506)
Second Image Added
.png?v=1648427117585)
Image Selected and Labels Edited
.png?v=1648427108342)
Design Editor
Polishing
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.