Mew contact
Full Redesign of a Color Contact Lens E-Commerce Site
- Project Overview
-
This redesign project aimed to maximize the use of Shopify's capabilities by significantly rebuilding the theme files and site structure from the existing store, establishing a solid operational foundation for store growth. We implemented a wide range of features and customizations.
New systems and features were introduced to make the site even more user-friendly — including a points program where the earn rate increases with each rank-up, a custom search function that allows filtering by a variety of criteria beyond just product specs and color, and a product listing that lets users quickly switch between model images, on-eye images, and lens images, as well as a spec list view.
- Scope of Work
-
EC Growth Strategy Planning / Information Architecture & Screen Design / Implementation Design / HTML, CSS & JavaScript Coding / Liquid Customization / Project Management / Operations Templates & Manual Creation
- Staff
-
- EC Growth Strategy PlanningKunishige Takakura
- Project Management / Information Architecture / Screen DesignShinsuke Sakamoto
- Direction / Information Architecture / Screen DesignChihiro Tsuda
- Concept Screen DesignFuRyu Co., Ltd.
- Implementation DesignShinsuke Sakamoto
- Front-End Development / Shopify CustomizationFlow Inc. / Shinsuke Sakamoto
Desktop
Smartphone
Key Features
A batch search feature built by customizing Shopify's native search functionality, enabling users to apply multiple conditions simultaneously. Users can combine various criteria — such as color, size, and wear duration — to efficiently find the products they are looking for. This feature improves the convenience of product discovery and enhances the overall user experience.
Users can choose from different image styles — model wearing shots, standalone product images, and actual on-eye examples — allowing them to view products from multiple angles. This makes it easier to evaluate products before purchasing and improves the overall user experience.
A centralized banner management feature using metaobjects. It allows bulk management of a large number of banners, with easy control over display locations and publishing schedules. By configuring settings through an input form, banners across multiple pages can be managed in a unified and consistent way, enabling efficient site operations.
Examples of Project Deliverables
A design document summarizing the enhanced internal link structure developed as part of the on-site SEO strategy for the Shopify store. Compared to a standard store link structure, this enhanced structure is optimized for internal SEO. By optimizing links between pages, the goal is to improve search engine rankings and boost the overall SEO performance of the site.
A detailed analysis identifying the landing pages corresponding to each traffic channel (touchpoint), along with the behavior and access paths of users from each channel. With a thorough understanding of how customers arrive at the site, the store is designed to deliver an optimal purchasing experience regardless of which channel they come from.
Operational manuals prepared for each content update task. Each procedure is documented in detail with screen captures, making it easy to carry out updates. These manuals serve as an essential tool for supporting efficient and consistent site management.
A WBS (Work Breakdown Structure) used to manage the overall project workflow. It visually organizes the progress, dependencies, and timeline of each task, supporting efficient project execution and schedule management. By leveraging this WBS, the entire team was able to stay aligned on project progress and collaborate effectively.