Search Functionality Re-Design for MCM Brand Site
검색 기능 리디자인
Why the need for improvements:
Currently, MCM ecommerce platform faces challenges such as low user engagement, the lack of personalized recommendations based on user history, and subpar search results. Additionally, when users encounter no results, they are not effectively guided to continue their search or explore alternative site pages.
By revamping our search functionality and incorporating user history data, we aim to provide tailored recommendations that align with individual preferences. This personalized approach not only enhances user satisfaction but also increases the likelihood of meaningful interactions.
Based on these improvements, we saw a significant boost in conversion rates. With an expected increase of 0.02% from the existing 0.36% conversion rate, we project an additional $500,000 in revenue. This highlights the substantial impact that refining our search and recommendation systems can have on our business growth and user satisfaction.
기존 검색 기능에는 몇 가지의 문제점이 있었습니다: 모바일 친화적이지 않은 사용자 인터페이스, 유저의 히스토리를 고려하지 않은 제품 추천, 느린 검색 결과, 그리고 검색 후 단절되는 사용자 플로우 등 입니다. 기존 0.36% 전환율에서 0.02%을 더 올려 $500,000의 추가적인 상승을 보게 되었습니다.
<I have executed this project with a project manager, digital designer, and developers. 100% design contribution. >
Old Search Screens
The default search screen offered product names that customers are mostly unfamiliar with. It also took over the whole screen, which was unfriendly to the users that want to go back and forth the product listings to see product images and details. The no result page did not offer any recommendations or related searches that users can explore after being let down.
기존의 검색 스크린에는 브랜딩도 부재했고 떠다니는 검색 바와 유저들이 알기 어려운 제품 이름으로만 구성되어 있었습니다. 스크린을 전부 다 차지하는 검색 페이지는 유저가 검색 결과를 다른 제품과 비교하기에도 이전 단계로 돌아가기에도 번거롭고 어려운 환경이었습니다.
Activated search screen: Takes over the entire screen, random recommendations not based on user history. 기존 검색 창: 스크린을 전부 차지하며 랜덤한 제품 추천 목록으로만 이루어져 있습니다.
No result screen: Hierarchy not aligned with other elements, no recommendations or other ways to lead users to another page, broken element. 검색 결과 없는 화면: 다른 페이지로 플로우가 연결되지 않고 UI 체계도 무너져 있습니다.
New Design Iterations
Below are new design explorations with an introduction to elements such as Best Matches, Past Searches, and Trending Search options. The biggest change I pursued was the drop-down design. Having the search window readily available is necessary for the customers to go back and forth products for comparison. I also played around with adding images to provide product clarity for users as it is hardly the case that users know many product names. However, I also came to an understanding that most users that know what they are looking for would more likely use the search function.
우선 추천 제품, 검색 히스토리, 인기 있는 검색 품목 등의 새로운 요소들을 추가 해 아래와 같이 새로운 레이아웃을 만들어 보았습니다. 제일 큰 변화는 드롭 다운 형태의 검색 창을 만드는 것이었습니다. 다양한 제품들을 비교하기 편하도록 드롭 다운이 유저에게 편할 것이라는 생각이었습니다. 또한, 제품명을 잘 모르는 고객들을 위해 사진을 추가하는 아이디어의 옵션도 만들어 해 보았습니다. 하지만 무엇을 원하는지 아는 고객들이 검색 기능의 주 사용자이라는 점도 고려해봐야 할 점이었습니다.
Final Re-Designs
Homepage with a
Search Dropdown
I finalized with introducing the search functionality in a dropdown form. The problem with the original design was that it took over the whole page, not giving flexibility for users to go back and forth with product listing or display pages.
“Search Suggestions” and “Past Searches” sections were added to the dropdown to guide users with better results. These sections do not include any images as it would slow the loading time and take up too much space on mobile. “Search Suggestions” will change to “Best Matches” once the user starts typing as the recommendations would cater toward the word being typed in rather than showing the general category suggestions.
제품 리스트 페이지 및 제품 디테일 페이지를 검색 결과와 동시에 보지 못하는 문제점은 드롭다운을 이용하여 해결하였습니다. “Search Suggestions” 와 “Past Searches”를 드롭다운에 추가하여 유저들이 좀더 원하는 결과에 도달할 수 있도록 유도하였습니다. 제품 이미지를 추가하지 않기로한 이유는 로딩 시간이 느려질 우려와 모바일에서는 과한 정보 일 수 있기 때문입니다.
유저가 검색을 시작하면 “Search Suggestions”가 “Best Matches” 로 바뀌며 광범위한 추천보다 검색하고자 하는 단어에서 유추할 수 있는 추천단어를 제시하는 기능을 추가하였습니다.
No Results Page with Category Links and Recommendations
No Results screen includes a “Continue Shopping” banner and “Recommendations” component. “Continue Shopping” includes category links that are generated from the user’s browsing history.
Category links and recommendation listings are both generated from the user’s previously visited product listing pages. These elements will keep the flow going and lead users to explore the site further without reaching a dead end.
The drop-down is situated on the side and accessible so that the users can easily try another search with suggested categories.
검색 결과가 없는 페이지에는 “Continue Shopping” 배너와 “Recommendations”를 추가하여 사용자 플로우를 이어나갈 수 있게 디자인 하였습니다. “Continue Shopping”의 카테고리 링크와 “Recommendations”는 유저가 이전 방문했던 페이지를 참고하여 제품을 제안합니다.
드랍다운은 오른쪽에 계속 위치해 두어 다른 검색을 하거나 제품들을 비교할 때 고객이 동시에 사용할 수 있게끔 설정해 놓았습니다.
Increase in Conversion Rate and Revenue
As a result of the search re-design project, the conversion rate for North Central and South America (NCSA) region and Europe(EU) both increased over 170%. The improvement in UI/UX played a big part in this improvement as one of the bigger changes in e-commerce from 2020 to 2021 is the application of the new search design.
리디자인 이후로 미주지역과 유럽 지역 두 지역 모두 170% 이상으로 검색 기능의 전환율이 증가하였습니다. 검색 기능 UI와 UX의 대대적인 리디자인으로 인하여 많은 변화가 있었던 것으로 판단이 됩니다.
NCSA conversion rate increased 174.35% from 0.75% to 2.06%. 미주 지역의 전환율은 174.35%로 0.75%에서 2.06%까지 증가하였습니다.
EU conversion rate increased 171.14% from 0.88% to 2.39%. 유럽 지역의 전환율은 171.14%로 0.88%에서 2.39%까지 증가하였습니다.
New Functionality Live and In-Use on Site