Through optimizing search, I helped shoppers find their new everyday bag 30% faster.
┃Problem Space
The business needed a website redesign to help users discover and purchase products on coach.com and coachoutlet.com. During 2019-2020, I designed and prototyped concepts that increased the E-commerce conversion rate by 200%. I also built the first version of the design system and the global brand style guide website.
My first step to improving the shopping experience is to understand User Behavior. After auditing the initial problem statement provided by the business and conducting perspective test results among internal users, I identified the initial opportunity area of improving the navigation, filtering, and search experience. I wrote survey questions for each problem and sent them to 15 users. In each test, users were asked to complete a search and talk about how it's similar or different to websites they typically shop at, and their thoughts on the information display. At the same time, I conducted field research to observe how customers shop in-store.
┃Workshop
From the interview insights and customer journeys we created, we can see that new users require more guidance and instant feedback while returning users focus on their shopping history.
Ideation workshop: I conducted ideation workshops with a cross-functional team of stakeholders, product managers, business analysts, and developers for inclusion in the product.
Negotiating Competing Priorities: By analyzing the data collected in quantitative research and evaluating the level of effort with developers, I was able to negotiate priorities with product managers.
┃Design highlights 1
From research, I identified the problem with the old search design is - it's the same flow for any user, with no clear error scenarios for gibberish and misspellings. To help make choices through education by making an informed decision, I designed specific search suggestions and results mapped to every scenario in the user flow of new/returning users.
I first created a prototype with micro interaction to brush up on visuals. We validated our assumption on "the problem is customers need better suggestions when they are searching for a product" through user testing. Our solution was to design specific search suggestions mapped to every scenario in the user flow of new/returning users.
In the legacy design, when returning customers opened the search field, they were shown "Where You Left Off…." and "Recent Searches". As they type in gibberish and get no results, the drawer continued to show ‘Where you Left Off’ products and ‘Recent Searches’ suggestions. This was confusing and I designed the type-ahead to display no results. Additionally, I designed a secondary search bar and put promotional information in the search result page.
┃Design highlights2
There were 2 problems in visual routing. 1. In the legacy site, the header system of the PLP didn't provide much value for users from a navigation perspective. 2. Mobile and tablet interaction design lacked filter tags behavior. The error message did not follow form a correct form-fill pattern.
I designed a visual routing as solution 1. After competitive analysis, I designed the utility navigation section as an additional facet for filtering within the PLP. 2. I redesigned the mobile filter states with a modern design style.
New mobile design with visual headers
┃What's next
After I redesigned features for E-commerce platforms (Coach.com, CoachOutlet.com), I worked on building the design system based on outdated design files. The design system is a strategic style guide on how to produce responsive and unique pages using Coach.com’s new modular toolkit. It serves as a source of truth for designers, developers, and product managers to produce seamless shopping experiences and enriching content stories.
For the full case study please contact me at corlenka@hotmail.com
┃Read more