InterPages
InterPages
By splitting test product pages and prices, it helps merchants make data-driven decisions to create higher sales.
By splitting test product pages and prices, it helps merchants make data-driven decisions to create higher sales.
Execution time
2019.12 - 2020.07
2019.12 - 2020.07
Product usage platform
Shopify Web, iOS, Android
Shopify Web, iOS, Android
Use tools
Sketch, Whimsical, inVision, Zeplin
Sketch, Whimsical, inVision, Zeplin
Service Company
Deep Codify
Deep Codify
Results
Results
Interpages is an application on Shopify that allows merchants to split test product page prices, discounts, and components through a single URL. Real-time data enables merchants to quickly make data-driven decisions, choose the optimal way to present products to increase revenue, and also reduce advertising costs to maximize product profits.
Interpages is an application on Shopify that allows merchants to split test product page prices, discounts, and components through a single URL. Real-time data enables merchants to quickly make data-driven decisions, choose the optimal way to present products to increase revenue, and also reduce advertising costs to maximize product profits.
Contribute
Contribute
I participated in the entire product development process, handling everything from early competitive analysis, defining the product architecture, interface design, and prototype production, to collaborating with stakeholders and both front-end and back-end engineers for development, as well as participating in product testing until it was successfully launched in the Shopify App Store.
I participated in the entire product development process, handling everything from early competitive analysis, defining the product architecture, interface design, and prototype production, to collaborating with stakeholders and both front-end and back-end engineers for development, as well as participating in product testing until it was successfully launched in the Shopify App Store.
The birth of the product begins here👂🏻
The birth of the product begins here👂🏻
Discover needs👀
Discover needs👀
Businesses need to invest a large amount in marketing costs.
Businesses need to invest a large amount in marketing costs.
From our interviews with users, we learned that businesses using advertising placements value data feedback highly. Through data, they can find the best sales methods and effectively increase their revenue. However, to find the best sales method, multiple testing rounds are required, which can take a lot of time and advertising costs. Therefore, we hope to allow users to test multiple sales pages simultaneously in a single advertising placement.
From our interviews with users, we learned that businesses using advertising placements value data feedback highly. Through data, they can find the best sales methods and effectively increase their revenue. However, to find the best sales method, multiple testing rounds are required, which can take a lot of time and advertising costs. Therefore, we hope to allow users to test multiple sales pages simultaneously in a single advertising placement.
Competitive analysis 📑
Competitive analysis 📑
Analyzing the product from different perspectives allows for a deeper understanding.
Analyzing the product from different perspectives allows for a deeper understanding.
Shopify is the world's largest platform for opening stores, allowing sellers to set up their own shops, while also enabling developers to create related apps to help merchants sell and manage their businesses. As of now, there are already about 6,000 apps in the App Store. We conduct competitive analysis from two perspectives: sales and customized product pages.
Shopify is the world's largest platform for opening stores, allowing sellers to set up their own shops, while also enabling developers to create related apps to help merchants sell and manage their businesses. As of now, there are already about 6,000 apps in the App Store. We conduct competitive analysis from two perspectives: sales and customized product pages.
Sales testing
Sales testing
In terms of sales, we downloaded three apps from the App Store search results for "Split Testing" that have a higher number of downloads, better ratings, and more complete features, as well as Click Funnel, which specializes in sales funnels, as targets for competitive analysis.
In terms of sales, we downloaded three apps from the App Store search results for "Split Testing" that have a higher number of downloads, better ratings, and more complete features, as well as Click Funnel, which specializes in sales funnels, as targets for competitive analysis.
Customized page
Customized page
Customized product pages have a wider range of competitors to analyze. Therefore, in addition to the apps in the App Store, we also reference website building platforms, article platforms, resume building platforms, etc., as objects for competitor analysis.
Customized product pages have a wider range of competitors to analyze. Therefore, in addition to the apps in the App Store, we also reference website building platforms, article platforms, resume building platforms, etc., as objects for competitor analysis.
Define product architecture🛠
Define product architecture🛠
Establish MVP through analysis
Establish MVP through analysis
The product architecture is defined based on the results of competitive analysis and the main core functionalities of the product. I will use features that more than two-thirds of competitors have as basic features, and focus on the missing, optimizable parts identified, as well as the main core functionalities of our product as key features.
The product architecture is defined based on the results of competitive analysis and the main core functionalities of the product. I will use features that more than two-thirds of competitors have as basic features, and focus on the missing, optimizable parts identified, as well as the main core functionalities of our product as key features.
Sitemap
When the product goals are clear 👊🏼
When the product goals are clear 👊🏼
Principles of Interface Design
Principles of Interface Design
Stand out
Stand out
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?
A feeling of fluidity as if you never left.
A feeling of fluidity as if you never left.
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.
Simplify the complex
Simplify the complex
The product is based on the data results from the product page and price split testing, helping merchants make data-driven decisions to achieve more sales. We hope to present clear and simple data that allows both novice merchants and experienced ones to easily and quickly apply and observe the data, resulting in better sales outcomes.
The product is based on the data results from the product page and price split testing, helping merchants make data-driven decisions to achieve more sales. We hope to present clear and simple data that allows both novice merchants and experienced ones to easily and quickly apply and observe the data, resulting in better sales outcomes.
UI Design📐
UI Design📐
On Boarding
On Boarding
Collaborate with PM to quickly produce drafts of basic features using Whimsical, establishing the general appearance of the product and confirming the basic usage process, which also facilitates subsequent Design System construction.
Collaborate with PM to quickly produce drafts of basic features using Whimsical, establishing the general appearance of the product and confirming the basic usage process, which also facilitates subsequent Design System construction.
UI Design📐
UI Design📐
Create product page
Create product page
Directly using Shopify product data, you can customize prices, discounts, and add reviews, allowing merchants to quickly create promotional products.
Directly using Shopify product data, you can customize prices, discounts, and add reviews, allowing merchants to quickly create promotional products.
UI Design📐
UI Design📐
Create an event page
Create an event page
The event page will have a separate URL, and you can add the product pages created yourself for split testing, effectively reducing the marketing budget.
The event page will have a separate URL, and you can add the product pages created yourself for split testing, effectively reducing the marketing budget.
UI Design📐
UI Design📐
Customized page
Customized page
Each product page can independently customize text and colors, allowing merchants to test marketing copy through page design.
Each product page can independently customize text and colors, allowing merchants to test marketing copy through page design.
UI Design📐
UI Design📐
real-time data
real-time data
Through data, merchants can see the best-performing product pages and allocate more advertising budget to those pages to increase revenue.
Through data, merchants can see the best-performing product pages and allocate more advertising budget to those pages to increase revenue.
UI Design📐
UI Design📐
Front-end product page
Front-end product page
Through backend customization settings, merchants can freely present their ideal product pages.
Reflection and Learning
Reflection and Learning
Understanding design systems
Understanding design systems
In order to provide users with a consistent experience, we chose to use Shopify's design system. This design system is actually very well developed, with clear usage guidelines for each component, so it is important to understand how to apply them during design. However, there are always some components or operations that we need, but are not included in Shopify's design system. At that point, we must decide whether to create components specific to our product or to discover unexpected ways to use the components, which is a very interesting process.
In order to provide users with a consistent experience, we chose to use Shopify's design system. This design system is actually very well developed, with clear usage guidelines for each component, so it is important to understand how to apply them during design. However, there are always some components or operations that we need, but are not included in Shopify's design system. At that point, we must decide whether to create components specific to our product or to discover unexpected ways to use the components, which is a very interesting process.
Retention of functional flexibility
Retention of functional flexibility
Initially, when I heard the requirements, I thought it would be a very simple product, but after gaining a deeper understanding, I found that the range of what the product could do was very large. Therefore, we decided to develop it in phases, but each phase has certain dependencies, so during the design process, we had to think further ahead and maintain a high level of flexibility. This taught me that while designing, it's important not to just focus on the present needs, but to also consider the future development of the product.
Initially, when I heard the requirements, I thought it would be a very simple product, but after gaining a deeper understanding, I found that the range of what the product could do was very large. Therefore, we decided to develop it in phases, but each phase has certain dependencies, so during the design process, we had to think further ahead and maintain a high level of flexibility. This taught me that while designing, it's important not to just focus on the present needs, but to also consider the future development of the product.
Learn a different way of development
Learn a different way of development
In the past, common design processes often involved substantial user research in the early stages. However, in this project, we tried using the Lean UX development approach. We quickly produced an MVP (Minimum Viable Product) and gathered user feedback for iteration. Through this process, we could rapidly understand what kind of services users want, instead of making numerous assumptions early on that might end up completely different from users' thoughts. Besides receiving immediate user feedback through the MVP, sometimes there can also be discrepancies between the design and the final developed product. At that point, we can promptly identify how to iterate for the next version better, rather than discovering issues after spending half a year on design. The cost of making modifications at that stage is relatively higher, so I believe this is a great development approach!
In the past, common design processes often involved substantial user research in the early stages. However, in this project, we tried using the Lean UX development approach. We quickly produced an MVP (Minimum Viable Product) and gathered user feedback for iteration. Through this process, we could rapidly understand what kind of services users want, instead of making numerous assumptions early on that might end up completely different from users' thoughts. Besides receiving immediate user feedback through the MVP, sometimes there can also be discrepancies between the design and the final developed product. At that point, we can promptly identify how to iterate for the next version better, rather than discovering issues after spending half a year on design. The cost of making modifications at that stage is relatively higher, so I believe this is a great development approach!