Dressi Micro Case-Study
Overview
The Dressi project aimed to merge the familiarity of a TikTok-inspired scrolling design with a traditional e-commerce workflow for a clothing brand. This case study explores the tension between embracing and deviating from common design patterns. In some cases, following established patterns helped address critical interaction design issues, while in other cases, deviating from them resulted in a better user experience.
Problem
Users are very familiar with both TikTok and online shopping. However, integrating these two patterns revealed friction points that led to higher-than-expected interaction costs. The balance between familiarity and new interactions became crucial, as users struggled with a sense of orientation and walking through the workflow despite their comfort with TikTok-style scrolling. This showed that familiarity doesn’t always lead to satisfaction, particularly when common patterns clash with the specific needs of an e-commerce platform.
Key Human Problem
For any e-commerce platform, usability and trust are essential for user acquisition and retention. Because users struggled to navigate or understand core functionalities—such as filtering or navigation—user trust rates decreased, which posed bottom line risks to users actually completing a purchase. Moreover, lack of consistent design risked negatively impacting brand perception. Misaligned visual elements made the brand appear less professional to potential customers.
Key Business Implications
Solutions
The original navigation bar, inspired by TikTok, included five icons, with the main call-to-action highlighted as a rounded element. User feedback revealed two key issues: the filter icon felt out of place, and the overall design distracted users from engaging with other features.
To address these concerns, I simplified the navigation bar by reducing it to four icons and removing the filter button. Additionally, I updated the color scheme from black to white and added a purple outline to selected icons, creating a softer, more cohesive design tailored to our predominantly female audience.
This streamlined approach improved the user experience by reducing visual clutter and unnecessary mental interaction costs. With fewer icons and a refined appearance, users found the navigation bar more intuitive, allowing them to focus on the content and essential functionalities.
Navigation Bar — Visual and Interaction Design Enhancements
Filter Icon — Visual and Interaction Design Enhancements
The filter icon underwent multiple iterations to enhance its visibility, functionality, and alignment with the platform’s aesthetic. Initially represented by three lines and placed within the navigation bar, users found its purpose unclear since the other icons led to specific pages while the filter acted as a tool.
To resolve this, I moved the filter icon to the item page as an overlay and redesigned it into a bold, funnel-like shape for better visibility. While this improved its contrast, the placement created new confusion, as users perceived it as item-specific rather than a global tool.
Finally, I relocated the filter icon to the header, a familiar position in e-commerce platforms. In this new location, the funnel design felt too bold compared to the feminine aesthetic of the platform. I reverted to the original three-line design, which now offered better contrast and seamlessly matched the overall look.
By aligning with common e-commerce conventions and prioritizing clarity, the revised filter icon became easier for users to find and use, significantly improving the shopping experience while maintaining the platform's visual harmony.
Impact
The filter icon’s usability saw a dramatic improvement. By refining its design and repositioning it within the interface, we achieved a 60% increase in users' ability to locate and utilize the filter effectively. These changes not only enhanced the icon's visibility but also aligned it with user expectations, making it easier to recognize and interact with.
60% Increase in Task Completion Rates
Qualitative feedback revealed that users experienced an enhanced sense of control over their shopping experience thanks to the improved visibility and functionality of the filter. Additionally, 80% of users expressed an increased likelihood of using the platform in the future, with many appreciating the cohesive and feminine aesthetic throughout the app.
