Scaling design across different UI experiences
Scaling design across different UI experiences
3 min read • January 2024
Overview
Overview
Company
Company
Stylitics
My Role
My Role
UX Lead
Project Type
Project Type
Strategy, Research, and
Design for desktop and mobile
Timeline
Timeline
2021-2021
Background
The Stylitics widget is a white label product that is integrated into a client's existing layout. The widget displays outfits that are automatically generated based on logic defined by Stylitics' in house fashion stylists. Outfits can be displayed throughout the client's experience but they are predominantly shown on product landing pages to help increase conversions and upsell items that go well with the product.
The Stylitics widget is a white label product that is integrated into a client's existing layout. The widget displays outfits that are automatically generated based on logic defined by Stylitics' in house fashion stylists. Outfits can be displayed throughout the client's experience but they are predominantly shown on product landing pages to help increase conversions and upsell items that go well with the product.
The Stytlics widget
Product landing page
Stylitics widget
Outfit drawer
Problem
Existing designs were not as adaptable to the different UI's our clients had.
Existing designs were not as adaptable to the different UI's our clients had.
Existing components fell outside of UX best practices and failed a few initial user tests.
Existing components fell outside of UX best practices and failed a few initial user tests.
Custom development was needed more often to accommodate client needs.
Custom development was needed more often to accommodate client needs.
Custom builds took developers and designers away from future thinking concepts.
Custom builds took developers and designers away from future thinking concepts.
Testing the existing experience
Testing the existing experience
A handful of websites had the Stylitics widget active, which facilitated user testing and set the stage for evaluation. Various tests were conducted on usertesting.com to create a starting point for usability and gauge user sentiment.
# of Participants
# of Participants
60
Demographic
Demographic
All genders, 35-65+
Income
Income
$20k-$80k+
Method
Method
User interviews
Mobile discovery
Product landing page
Stylitics widget
Stylitics widget
Outfit drawer
Outfit drawer
Key takeaways
Although there was a combination of affordances on the widget, users weren’t finding the horizontal scroll.
Although there was a combination of affordances on the widget, users weren’t finding the horizontal scroll.
When users clicked into the outfits they were confused to the layout and wanted a way to look at the items first.
When users clicked into the outfits they were confused to the layout and wanted a way to look at the items first.
Users felt overwhelmed with looking at all the details instead of being able to just get a better look at what the outfit was.
Users felt overwhelmed with looking at all the details instead of being able to just get a better look at what the outfit was.
Desktop discovery
Key takeaways
Users expected different experiences after finding and clicking on the “shop the look” CTA.
Users expected different experiences after finding and clicking on the “shop the look” CTA.
The overlay required users to scroll within the widget and didn’t take advantage of the desktop real estate.
The overlay required users to scroll within the widget and didn’t take advantage of the desktop real estate.
Interaction with multiple outfits required more user effort and led to user navigating away from the experience.
Interaction with multiple outfits required more user effort and led to user navigating away from the experience.
Creating a UI tool kit
Creating a UI tool kit
The need to establish a default visual language for the widget became clearer after testing. My goal was to standardize an experience that functioned across multiple devices and was adaptable across our customer's UI frameworks.
The need to establish a default visual language for the widget became clearer after testing. My goal was to standardize an experience that functioned across multiple devices and was adaptable across our customer's UI frameworks.
1
1
View more button - trigger to open modal or drawer to view items within an outfit
View more button - trigger to open modal or drawer to view items within an outfit
2
2
Extended button - extends when hovering over an outfit while on desktop.
Extended button - extends when hovering over an outfit while on desktop.
3
3
Text button - developed to fit broader clients’ design language
Text button - developed to fit broader clients’ design language
4
4
Item label - appears when hovering over an outfit while on desktop
Item label - appears when hovering over an outfit while on desktop
5
5
Pagination tab - used within modal on desktop to browse outfits
Pagination tab - used within modal on desktop to browse outfits
6
6
Pagination pill - affordance to show outfit # and total # of outfits
Pagination pill - affordance to show outfit # and total # of outfits
Establishing guidelines
Establishing guidelines
Knowing that most clients would tweak sizing and padding throughout, I wanted to focus on interactions when creating our guidelines. Users were missing our widget I wanted to increase the affordances around our carousel. Some clients had issues implementing the outfit drawer in mobile so creating two off-the-shelf versions helped mitigate this.
Knowing that most clients would tweak sizing and padding throughout, I wanted to focus on interactions when creating our guidelines. Users were missing our widget I wanted to increase the affordances around our carousel. Some clients had issues implementing the outfit drawer in mobile so creating two off-the-shelf versions helped mitigate this.
Revised Widget
Revised Widget
Outfit drawer
Outfit drawer
Outfit takeover
Outfit takeover
Guidelines
Don’t make users guess how many items are left within a carousel.
Don’t make users guess how many items are left within a carousel.
When using “peeking” in a carousel, add a background to increase the affordance of multiple items.
When using “peeking” in a carousel, add a background to increase the affordance of multiple items.
Follow user’s mental models when interacting between an outfit and what they view after clicking into the outfit.
Follow user’s mental models when interacting between an outfit and what they view after clicking into the outfit.
Include how many items are within an outfit if there are more than 4 items.
Include how many items are within an outfit if there are more than 4 items.
Use a full takeover instead of a drawer when the global navigation cannot be locked or fully overlayed.
Use a full takeover instead of a drawer when the global navigation cannot be locked or fully overlayed.
Applying guidelines to mobile
With the new guidelines set in place, we were able to sign on Nike as a new client. Here we partnered with their design team to combine our guidelines with their design language. They updated their sizing, added labels to the mobile experience, and chose not to include some compenents.
With the new guidelines set in place, we were able to sign on Nike as a new client. Here we partnered with their design team to combine our guidelines with their design language. They updated their sizing, added labels to the mobile experience, and chose not to include some compenents.
Product landing page
Product landing page
Stylitics widget
Stylitics widget
Outfit drawer
Outfit drawer
Adapting guidelines to desktop
The experience required an adaptive approach more so than a responsive design. The modal experience allowed for a better interaction between outfits and provided space to iterate on future thinking features the team was starting to work on.
The experience required an adaptive approach more so than a responsive design. The modal experience allowed for a better interaction between outfits and provided space to iterate on future thinking features the team was starting to work on.
Guidelines
Don’t make users guess how many items are left within a carousel.
Don’t make users guess how many items are left within a carousel.
When using “peeking” in a carousel, add a background to increase the affordance of multiple items.
When using “peeking” in a carousel, add a background to increase the affordance of multiple items.
Follow user’s mental models when interacting between an outfit and what they view after clicking into the outfit.
Follow user’s mental models when interacting between an outfit and what they view after clicking into the outfit.
Include how many items are within an outfit if there are more than 4 items.
Include how many items are within an outfit if there are more than 4 items.
Use a full takeover instead of a drawer when the global navigation cannot be locked or fully overlayed.
Use a full takeover instead of a drawer when the global navigation cannot be locked or fully overlayed.
Applying guidelines to desktop
Product Landing Page
Outfits Widget
Outfits Modal
Outcomes
Feature Discoverability
Feature Discoverability
20% Increase
20% Increase
*Benchmark set upon inception of project.
*Benchmark set upon inception of project.
Developer Time
Developer Time
50% Decrease
50% Decrease
New Business
New Business
3 new clients
3 new clients
An improvement in the overall discoverability of the widget and additional outfits was seen shortly after updating the designs.
An improvement in the overall discoverability of the widget and additional outfits was seen shortly after updating the designs.
Onboarding and set up of the widget decreased from about 2 weeks to about 1 week.
Onboarding and set up of the widget decreased from about 2 weeks to about 1 week.
The updated guidelines were used to create new prototypes for the Sales team.
The updated guidelines were used to create new prototypes for the Sales team.
We were able to win new business, most notably the signing of Nike.
We were able to win new business, most notably the signing of Nike.
© 2023 Aldo Sant Inés
Let’s talk.
I’m currently open for new opportunities and collaborations. Message me on LinkedIn or feel free to email me at:
aldo.santaines@gmail.com.