InterShop
InterShop
Help merchants increase the average transaction value and boost overall sales by optimizing the checkout process.
Help merchants increase the average transaction value and boost overall sales by optimizing the checkout process.
Execution time
2020.09 - 2023.09
2020.09 - 2023.09
Product usage platform
Shopify Web, iOS, Android
Shopify Web, iOS, Android
Use tools
Figma, Whimsical
Figma, Whimsical
Service Company
Deep Codify
Deep Codify
Background
Background
Background
In the past, the company focused on creating Shopify apps to help merchants increase their average order value through upselling after checkout. However, due to business strategy considerations and user needs, we decided to start from scratch and build a new e-commerce platform to address the issues that users face with Shopify that cannot be met, helping merchants sell more efficiently.
In the past, the company focused on creating Shopify apps to help merchants increase their average order value through upselling after checkout. However, due to business strategy considerations and user needs, we decided to start from scratch and build a new e-commerce platform to address the issues that users face with Shopify that cannot be met, helping merchants sell more efficiently.
In the past, the company focused on creating Shopify apps to help merchants increase their average order value through upselling after checkout. However, due to business strategy considerations and user needs, we decided to start from scratch and build a new e-commerce platform to address the issues that users face with Shopify that cannot be met, helping merchants sell more efficiently.
* Some content will not be fully available as the product has not yet launched.
* Some content will not be fully available as the product has not yet launched.
* Some content will not be fully available as the product has not yet launched.
Challenge
Challenge
Challenge
E-commerce store platforms are large and complex products, including customer front-end and merchant back-end, but due to considerations such as scheduling, existing user migration, and technical aspects, we need to enable current users to quickly and painlessly transition to continue product sales.
E-commerce store platforms are large and complex products, including customer front-end and merchant back-end, but due to considerations such as scheduling, existing user migration, and technical aspects, we need to enable current users to quickly and painlessly transition to continue product sales.
E-commerce store platforms are large and complex products, including customer front-end and merchant back-end, but due to considerations such as scheduling, existing user migration, and technical aspects, we need to enable current users to quickly and painlessly transition to continue product sales.
Contribute
Contribute
Contribute
Collaborate closely with two Product Owners, one Product Designer, one QA, and five engineers. I am responsible for everything from defining the problem, designing the product architecture to final delivery of the design and QA testing, participating in the entire product workflow.
Collaborate closely with two Product Owners, one Product Designer, one QA, and five engineers. I am responsible for everything from defining the problem, designing the product architecture to final delivery of the design and QA testing, participating in the entire product workflow.
Collaborate closely with two Product Owners, one Product Designer, one QA, and five engineers. I am responsible for everything from defining the problem, designing the product architecture to final delivery of the design and QA testing, participating in the entire product workflow.
Step 1.
Discover needs
Step 2.
Define the problem
Step 3.
Design Strategy
Step 4.
Design Principles
Step 5.
Design output
The birth of the product begins here👂🏻
The birth of the product begins here👂🏻
The birth of the product begins here👂🏻
Discover needs👀
Discover needs👀
A product that started due to the business realities and feedback from users.
A product that started due to the business realities and feedback from users.
Shopify is no longer suitable for us to continue operating.
Shopify is no longer suitable for us to continue operating.
Shopify is no longer suitable for us to continue operating.
As Shopify's business strategy changes, it gradually impacts the range of services our products can provide to users, so we need a new platform to offer better services to users.
As Shopify's business strategy changes, it gradually impacts the range of services our products can provide to users, so we need a new platform to offer better services to users.
Company executives
Company executives
Shopify's business restrictions have caused our Intercart App to stop functioning on Shopify, and we need to find a way to continue operating!
Shopify's business restrictions have caused our Intercart App to stop functioning on Shopify, and we need to find a way to continue operating!
Need to address the current shortcomings for users in Shopify.
Need to address the current shortcomings for users in Shopify.
Need to address the current shortcomings for users in Shopify.
In the past, we operated on Shopify, but due to technical limitations, we were unable to fully assist users in selling.
In the past, we operated on Shopify, but due to technical limitations, we were unable to fully assist users in selling.
Merchant
Merchant
Through backend data, it was found that customers have a higher bounce rate during the checkout process, and we hope to reduce it.
Through backend data, it was found that customers have a higher bounce rate during the checkout process, and we hope to reduce it.
Merchant
Merchant
We often need to use multiple apps in combination to achieve a comprehensive sales portfolio, but sometimes the apps can interfere with each other, causing them to not function properly.
We often need to use multiple apps in combination to achieve a comprehensive sales portfolio, but sometimes the apps can interfere with each other, causing them to not function properly.
User research👀
User research👀
Gain insights into demand through feedback from past use on Shopify.
Gain insights into demand through feedback from past use on Shopify.
In the early stages of the project, through interviews with internal users and experts, we gained a better understanding of the current users' feelings and feedback about using Shopify along with the Intercart App. Below are the results we gathered from the interviews.
In the early stages of the project, through interviews with internal users and experts, we gained a better understanding of the current users' feelings and feedback about using Shopify along with the Intercart App. Below are the results we gathered from the interviews.
The Shopify checkout page requires multiple redirections, and the form content is complex.
The Shopify checkout page requires multiple redirections, and the form content is complex.
The Shopify checkout page requires multiple redirections, and the form content is complex.
The Shopify checkout process consists of three steps, where customers may be lost during each transition due to complex form content, long waiting times, or poor internet signals.
The Shopify checkout process consists of three steps, where customers may be lost during each transition due to complex form content, long waiting times, or poor internet signals.
The main selling products have a low unit price, and the best sales combination can only be achieved through different apps.
The main selling products have a low unit price, and the best sales combination can only be achieved through different apps.
The main selling products have a low unit price, and the best sales combination can only be achieved through different apps.
Currently, most of our app users focus on selling low-priced products. They use various sales combinations for promotions and therefore need to use multiple apps to achieve the best results. However, sometimes the apps can interfere with each other, leading to situations where they cannot be used properly.
Currently, most of our app users focus on selling low-priced products. They use various sales combinations for promotions and therefore need to use multiple apps to achieve the best results. However, sometimes the apps can interfere with each other, leading to situations where they cannot be used properly.
Unable to flexibly customize the checkout page design.
Unable to flexibly customize the checkout page design.
Unable to flexibly customize the checkout page design.
Because the product price is low, customers usually do not need to think too much before adding it to their shopping cart. Therefore, if we can increase the opportunities for product sales, we can effectively raise the average order value.
Because the product price is low, customers usually do not need to think too much before adding it to their shopping cart. Therefore, if we can increase the opportunities for product sales, we can effectively raise the average order value.
Design strategy 🛠
Design strategy 🛠
Enhancing the sales experience of the checkout process from different perspectives
Enhancing the sales experience of the checkout process from different perspectives
Through research analysis, we decided to focus on the checkout process and improve the user experience for both customers and merchants from different aspects to achieve a better overall experience.
Through research analysis, we decided to focus on the checkout process and improve the user experience for both customers and merchants from different aspects to achieve a better overall experience.
Interface Layer
The merchant cannot flexibly customize the checkout page design.
Provide a customized checkout page and after-sales additional product page setting template.
Structural layer
The checkout process on Shopify has many steps and complicated forms.
Provide a one-page checkout design and optimize the form content design.
Strategy layer
Merchants need to use multiple apps to achieve the best sales combination.
Increase sales of small components, increase product exposure.
Interface layer
Structural layer
Strategy layer
pain point
The merchant cannot flexibly customize the checkout page design.
The checkout process on Shopify has many steps and complicated forms.
Merchants need to use multiple apps to achieve the best sales combination.
Strategy
The merchant cannot flexibly customize the checkout page design.
The checkout process on Shopify has many steps and complicated forms.
Merchants need to use multiple apps to achieve the best sales combination.
Interface layer
Structural layer
Strategy layer
pain point
The merchant cannot flexibly customize the checkout page design.
The checkout process on Shopify has many steps and complicated forms.
Merchants need to use multiple apps to achieve the best sales combination.
pain point
The merchant cannot flexibly customize the checkout page design.
The checkout process on Shopify has many steps and complicated forms.
Merchants need to use multiple apps to achieve the best sales combination.
When the product goals are clear ❤️🔥
When the product goals are clear ❤️🔥
Wireframe✏️
Wireframe✏️
Quickly define the scope of features starting from a draft
Quickly define the scope of features starting from a draft
Collaborate with PM to quickly produce drafts of basic functionalities using Whimsical, allowing the overall product appearance to be roughly defined and confirming the basic usage flow.
Collaborate with PM to quickly produce drafts of basic functionalities using Whimsical, allowing the overall product appearance to be roughly defined and confirming the basic usage flow.
Use Whimsical to design drafts
Design System🎨
Design System🎨
Build design system
Build design system
To speed up the overall process, we based our technical implementation on Uber's design system Base Web, making adjustments according to our needs, starting with minimal modifications to shorten the development timeline.
To speed up the overall process, we based our technical implementation on Uber's design system Base Web, making adjustments according to our needs, starting with minimal modifications to shorten the development timeline.
Step 1.
Step 1.
Define brand colors
Define brand colors
Color is a fundamental element of a design system, but at this early stage, the stakeholders are quite unclear about this aspect, so I tried to focus their ideas using a Mood Board.
The Shopify App Store has over 6,000 apps, and there are more than 200 results if you search for split testing. How do we differentiate ourselves among so many similar apps to make others feel that our product is more useful, easier to use, and that they want to continue subscribing to our product after the trial period?
The Shopify App Store has over 6,000 apps, and there are more than 200 results if you search for split testing. How do we differentiate ourselves among so many similar apps to make others feel that our product is more useful, easier to use, and that they want to continue subscribing to our product after the trial period?
Step 2.
Step 2.
Visualize abstract ideas
Visualize abstract ideas
I will focus on applying the selected colors to our draft screens, materializing abstract ideas so that the stakeholders can directly see the final result instead of just imagining it.
The product entrance is in the Shopify backend. We want to allow users to feel like they are continuously using Shopify's features, rather than entering into the feeling of another product. Therefore, using Shopify's designed Polaris design system, in addition to being familiar with the usage methods, when there are no corresponding components, design consistency needs to be considered to create suitable components.
The product entrance is in the Shopify backend. We want to allow users to feel like they are continuously using Shopify's features, rather than entering into the feeling of another product. Therefore, using Shopify's designed Polaris design system, in addition to being familiar with the usage methods, when there are no corresponding components, design consistency needs to be considered to create suitable components.
Step 3.
Step 3.
Apply the results to the component
Apply the results to the component
Once the color weights and functionality are confirmed, since we are based on Base Web, we can quickly apply their usage methods to each component.
Once the color weights and functionality are confirmed, since we are based on Base Web, we can quickly apply their usage methods to each component.
Step 4.
Step 4.
As the product iteration expands
As the product iteration expands
There is no one-size-fits-all design, so we will first complete the basic components and then expand them according to the functional design needs, creating a design system that meets our requirements with minimal adjustments.
There is no one-size-fits-all design, so we will first complete the basic components and then expand them according to the functional design needs, creating a design system that meets our requirements with minimal adjustments.
Design Principles 🛠
Design Principles 🛠
Create a smooth user experience like flowing water.
Create a smooth user experience like flowing water.
Can be used immediately without additional learning costs.
Can be used immediately without additional learning costs.
Can be used immediately without additional learning costs.
In the initial stage, the main users are existing customers. To reduce the learning costs for users, we use Shopify as the primary reference, while also considering various direct and indirect competitors for different functions, retaining the good parts and optimizing the areas that are currently not smooth.
In the initial stage, the main users are existing customers. To reduce the learning costs for users, we use Shopify as the primary reference, while also considering various direct and indirect competitors for different functions, retaining the good parts and optimizing the areas that are currently not smooth.
In the initial stage, the main users are existing customers. To reduce the learning costs for users, we use Shopify as the primary reference, while also considering various direct and indirect competitors for different functions, retaining the good parts and optimizing the areas that are currently not smooth.
Interference-free promotional products
Interference-free promotional products
Interference-free promotional products
During the checkout process, we hope to allow merchants to maximize their final sales opportunities without affecting customer operations. We provide various component templates and positions, enabling merchants to freely mix and match to create the best promotional combination for themselves.
Our customers originally relied on various apps within the Shopify App to meet their customized service needs. However, there may be mutual constraints between each app or with Shopify, which prevents customers from creating the best sales experience to achieve the highest sales.
Our customers originally relied on various apps within the Shopify App to meet their customized service needs. However, there may be mutual constraints between each app or with Shopify, which prevents customers from creating the best sales experience to achieve the highest sales.
Design output 📐
Design output 📐
The front desk effectively increases revenue by optimizing the checkout form and creating more sales opportunities.
The front desk effectively increases revenue by optimizing the checkout form and creating more sales opportunities.
Simplify the checkout process, reduce transition time and bounce rate.
Simplify the checkout process, reduce transition time and bounce rate.
Simplify the checkout process, reduce transition time and bounce rate.
Provide a one-page checkout option to improve the time-consuming transition of the original Shopify three-step checkout, allowing customers to have a clear view of all checkout information.
Provide a one-page checkout option to improve the time-consuming transition of the original Shopify three-step checkout, allowing customers to have a clear view of all checkout information.
Before
After
Consolidate the form content to reduce clicks and customer confusion.
Consolidate the form content to reduce clicks and customer confusion.
Consolidate the form content to reduce clicks and customer confusion.
Combine form content and hide optional fields to effectively reduce clicks and avoid overwhelming customers with excessive information.
Combine form content and hide optional fields to effectively reduce clicks and avoid overwhelming customers with excessive information.
Before
After
Increase final sales opportunities, increase the average transaction value per customer.
Increase final sales opportunities, increase the average transaction value per customer.
Increase final sales opportunities, increase the average transaction value per customer.
Merchants can freely adjust the product modules on the checkout page according to marketing needs to find the sales model that best meets their requirements.
Merchants can freely adjust the product modules on the checkout page according to marketing needs to find the sales model that best meets their requirements.
Design output 📐
Design output 📐
The backend settings provide a variety of discount configurations and placements to help merchants effectively promote their products.
The backend settings provide a variety of discount configurations and placements to help merchants effectively promote their products.
Diverse sales settings allow users not to miss any sales opportunity.
Diverse sales settings allow users not to miss any sales opportunity.
Diverse sales settings allow users not to miss any sales opportunity.
Simple steps allow merchants to quickly set up, enabling them to configure multiple plans simultaneously and find the most effective promotional combinations quickly.
Simple steps allow merchants to quickly set up, enabling them to configure multiple plans simultaneously and find the most effective promotional combinations quickly.
The most direct and powerful promotional method: targeting specific products for specific promotions.
The most direct and powerful promotional method: targeting specific products for specific promotions.
The most direct and powerful promotional method: targeting specific products for specific promotions.
Merchants can set specific products to trigger designated promotions, and they can display promotional products in a sorted order, excluding items already in the shopping cart, to create the most direct and effective promotions.
Merchants can set specific products to trigger designated promotions, and they can display promotional products in a sorted order, excluding items already in the shopping cart, to create the most direct and effective promotions.
Provides a variety of product modules that merchants can flexibly adjust according to their needs.
Provides a variety of product modules that merchants can flexibly adjust according to their needs.
Provides a variety of product modules that merchants can flexibly adjust according to their needs.
Through the backend editor, merchants can freely set the style and copy of the promotion module, creating promotional methods that meet their needs.
Through the backend editor, merchants can freely set the style and copy of the promotion module, creating promotional methods that meet their needs.
Reflection and Learning
Reflection and Learning
Learn to manage projects with a business mindset.
Learn to manage projects with a business mindset.
During the process of this project, we encountered various issues of all sizes that caused our business strategy to continuously evolve. In the past, I might have viewed this as a negative experience, but now I believe that insisting on our original ideas without being flexible in response to the market is the worst choice. Although we have not yet witnessed the moment the product is born, I think the most important thing is that the company can continue to operate!
During the process of this project, we encountered various issues of all sizes that caused our business strategy to continuously evolve. In the past, I might have viewed this as a negative experience, but now I believe that insisting on our original ideas without being flexible in response to the market is the worst choice. Although we have not yet witnessed the moment the product is born, I think the most important thing is that the company can continue to operate!
Learning to maintain a flexible mindset to become the best team member.
Learning to maintain a flexible mindset to become the best team member.
The project process is not only about changes in business strategies, but also experiences changes in team organization, position transitions, and the impact of the pandemic. My role and position have been constantly evolving, but I enjoy this process as I have learned a lot of knowledge from different perspectives, including design team management, project management, and optimizing communication within multinational teams. I can quickly adapt and maintain flexibility to meet the needs of various periods, becoming the best team partner.
The project process is not only about changes in business strategies, but also experiences changes in team organization, position transitions, and the impact of the pandemic. My role and position have been constantly evolving, but I enjoy this process as I have learned a lot of knowledge from different perspectives, including design team management, project management, and optimizing communication within multinational teams. I can quickly adapt and maintain flexibility to meet the needs of various periods, becoming the best team partner.