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. What could have been a seamless, next-level shopping experience fell short due to these challenges. The balance between familiarity and new interactions became crucial, as users sometimes struggled with overall navigation 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. If users struggle to navigate or understand core functionalities—such as filtering or navigation—their trust in the platform diminishes, and they are less likely to complete a purchase. Moreover, consistent design is essential for positive brand perception. Misaligned visual elements could negatively impact how professional and polished the brand appeared to potential customers.
Key Business Implications
Solutions
Navigation Bar — Visual and Interaction Design Enhancements
The original navigation bar, inspired by TikTok, featured five icons, including a rounded element for the main call-to-action. User feedback showed that the filter icon didn’t fit on the nav bar, so I reduced the icons to four and removed the filter button. Also, to better suit our female audience, I changed the color scheme from black to white and used a purple outline on selected icons for a softer, cohesive look. These changes are an example of deviating from the standard design scheme to improve functionality and visual harmony.
Although the filter icon began as the kind with three lines when it was in the nav bar, once it was moved to being overlaid on the main item page, it was faint and hard to see. To increase its visibility and contrast, I changed it to a funnel-like shape. This funnel shape embraced the original Tik Tok aesthetic even better. However, as detailed in the interaction design section, it needed to be moved to the top bar. Once moved, the funnel shape no longer fit visually—it appeared too bold and masculine compared to the overall feminine aesthetic. Since the new location offered better contrast and visibility, I reverted to the original icon design, which now better complemented the other elements.
The first version of the nav bar caused issues with user focus. Users were overly drawn to the home icon, which disrupted their ability to engage with other actions in the interface. The presence of five icons in the main navigation added complexity, creating unnecessary mental interaction costs. After reducing the number of icons and adjusting their appearance, users found the navigation bar more intuitive. This simplification helped users focus on the content while still accessing essential functionalities.
Filter Icon — Visual and Interaction Design Enhancements
Initially placed within the nav bar, the filter icon caused confusion, as users didn’t understand its purpose. The other navigation elements led to specific pages, while the filter served as a tool. After moving the icon to the item page, it created additional confusion since its placement implied it was an item-specific function. By relocating it to the header, the filter icon became easier to find and aligned with familiar ecommerce layouts, immediately making its purpose clear. This simple change significantly improved its visibility and usability, making the overall shopping experience smoother. While this move deviated from TikTok patterns, it aligned with common e-commerce standards where the filter is located in the header.
Impact
60% Increase in Task Completion Rates
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.
Enhanced User Satisfaction
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.