Casetify Search Feature Enhancement

Website UI and UX Design

 

Company: Casetify

A effective search experience can help an e-commerce site to improve sales and conversion rate.

Worked with Casetify product team,  we revamped the search feature on our desktop and mobile site

and let our customers to have a better shopping experience.

 

Problem

The old search function was an separated page, so the users were hard to go back where they browsed previously.

When the users used the old search function, they only can preview iPhone on the search result which can't show

how diverse Casetify products were. Casetify has lots of artwork on the database and sometimes the artworks result

 will be long, and the users had to scroll forever to find artists which was located at the bottom of the page, and mobile

site was never able to reach artists at the search result.  

 

The  Goals of the Enhancement

—Improve the usability on mobile site

—More device types showing on search result

—Easy to Navigate

—Able to search everything on the website

 Old Search Feature, 2014

Old Search Feature, 2014

 

Process

Feel hard to navigate? We revamp the search feature as a dropdown search bar.  Users can access

search function anywhere and anytime at the website.  We also reuse the 5 main categories on Make/Custom page:  

iPhone/Apple Watch/iPad/Macbook/Others as the search result filter. Users can filter and access the artwork on

these 5 categories with the same keyword. We adjust and fine-tune the search feature algorithm.  Not only it will

show different artwork, but also device types, artists and collection if they include the same keyword.  These new

search results show at the top of the page, and we have changed "see more" to pagination on the artwork search

result.  Users have a better experience to browse each section and don't need to forever scroll the page.

 

On the mobile, the screen space is limited and the main thing need to show is the product, so we put the search

 feature inside the nav menu and still able to access at any page.  After type in the keyword,  users are still able to

access artists and devices section on search result, and they all locate at the top section of the screen.  By swiping right, 

they are able to access more search result. However, the result of collections take out too much space on the screen,  

so we have limited that search result and users still available access collection on the nav menu. 

 Wireframe

Wireframe

 Final Responsive Layout— Search Result with artist, collect and artwork

Final Responsive Layout— Search Result with artist, collect and artwork