Embed Tool Webpage
UX/UI
Client: Supergreat
Roles: Designer
Year: 2020
This webpage was designed to be a tool for beauty brands and online publications to embed Supergreat video reviews onto their own pages. This tool was also colloquially referred to as Supergreat’s review “carousel builder.” My task at hand was to update an older existing design that needed upgrading.
I used Figma to create the designs and to hand-off to Supergreat’s development team.
The Problem
The original design was put together by one of Supergreat’s co-founders as a quick turn around when a brand partner requested to use video reviews on one of their product pages. However, because of the situation it was initially designed under, this original design only served utilitarian purposes.
Some issues that came across were that the empty-state module for building a video carousel filled up all of the space above the browser fold, which meant that a user needed to scroll down the page in order to interact with the tool. In addition, when a user would add a video to their carousel, because the carousel builder was at the top of the page, there was no feedback to indicate to the user that their video was successfully added unless they scrolled all the way back to the top.
From these notes, I set the following goals for myself:
- Create a feedback experience for users when adding videos to their carousels
- Design an interface that could all fit above a browser’s fold so that a user wouldn’t have to scroll up and down to interact with the tool
- Visually, I also wanted to make a design that felt airy and approachable because the dark purple in the original design felt quite heavy
Initial Process
As an exercise to explore the ways we could begin improving the tool, I first tried to make updates using the infinite scroll layout of the original design. This process helped me analyze what simple changes could make large improvements to the existing modules, such as making the “add review” button appear when hovered to condense the vertical space of the video grids, having a green check icon animate as feedback when a user adds a video, and having a search carousel that would suggest products based on search input.
However, despite these improved design choices, I knew that the overall layout could benefit from reconstruction to provide a better user experience.
Design Process
I was inspired by the user interfaces of web building platforms such as Squarespace, Wordpress, and Wix. By doing research on these types of products, I was able to analyze how they prompted their users to add carousel images to their custom webpages, and I especially liked how these platforms visually looked like tools—as a user, from a first impression you knew these features could be used as a type of control panel. From this observation, I decided to go in a dashboard-like direction to create an administrative feel and allow for elegant screen flows.
Moving Forward
I really enjoyed the thinking process that went into this project. The Supergreat team was very responsive to my ideas and was impressed by the final end product. However, I do wish we had done proper user testing to get more accurate research on the success of the interface. This was a common step that the team would have to skip in the product development process due to the incredibly fast pace of work as an early age startup.
For now, feel free to check out the current state of the embed too page here.
