Designing Smart Pages – The origin\u00a0<\/strong><\/h2>\nBefore I take you through this journey of creating this beautiful product, let me please introduce myself. My name is Shyamal Rajput, a product designer by heart and also by role here at Instamojo.<\/strong> Being part of the product & design team, we try to work very closely with all of you to achieve and deliver the best functional, suitable & usable product there can be.<\/p>\nAs a mental model for an eCommerce website, it is an online repository of all the products which a business wishes to sell to its customers. Each product has its product specifications, images and the price at which it is supposed to be sold.<\/p>\n
Coming back to Smart Pages,<\/strong> the aim was to build a \u201cproxy online store\u201d which catered to a certain set of custom specifications which we have figured out over time. To dig more into it, let’s first understand some basic questions which can help us understand the foundation of Smart Pages better.<\/p>\nHow do merchants sell online?<\/b><\/h2>\n
As a merchant or a seller who wants to sell online, they often look for online platforms where they can sell their products and make a living out of it. As this problem statement is pretty cliche now, we have massive eCommerce marketplace giants where you can go and start selling your own products.<\/span><\/p>\nAnother medium for selling, that merchants take, is creating their own eCommerce website<\/a>. However, it comes with added costs for designing, developing, maintaining and managing it.\u00a0<\/span><\/p>\nWhat was missing?\u00a0<\/b><\/h2>\n
Businesses which are product-focused and have a large inventory usually create an online store<\/a> where they can showcase their products and eventually sell.<\/p>\nBut, for service-based businesses which are generally providing a service like coaching, mentoring, counselling etc, an online eCommerce store does not solve the purpose. Similarly, a business or an entrepreneur which wants to sell just one product or just a service, will most likely not want to create an eCommerce store.\u00a0<\/span><\/p>\nLet\u2019s take an example of a career coach who runs a counselling business and wants to start online, will not need an online store because he will not have any multiple products to sell.\u00a0<\/span><\/p>\nThus, Smart Pages was discovered where we thought we needed to cater to such service-based merchants or businesses who are looking to sell their services online.<\/span><\/p>\nRelated read:\u00a0Tips to improve your landing page conversions; With examples<\/a><\/strong><\/p>\nAnswering the why, and defining the how<\/b><\/p>\n
This is a very important step or rather question we try to always seek answers to do justice to whatever project we are trying to build. In context to Smart Pages, there were again 2 similar questions\u2014<\/span><\/p>\n\n- Why is this required\/ or why do we feel a need for it? <\/span><\/li>\n
- How are we going to provide a solution?\u00a0\u00a0<\/span><\/li>\n<\/ul>\n
As we answered the \u201cwhy\u201d above, the second part of the quest was how we can provide the best solution to such businesses. <\/span><\/p>\nBased on many user feedbacks and understanding of how the offline service-based industry works, we came up with Smart Pages<\/a> where a business can build their landing page or one-pager website and showcase all their services\/portfolio they want to offer to their potential customers. <\/span><\/p>\n\u201cTo add on top of it and keeping the online store ecosystem in mind, we built Smart Pages to become a one stop solution for all these businesses where they will be able to list\/showcase their service and further collect payments towards it\u2014having the checkout experience intact.\u201d<\/strong><\/p><\/blockquote>\nHow did we go about it?<\/b><\/h2>\nStep 1: Defining user personas<\/b><\/h3>\n
For every problem statement, we try to work on, we try to draw out user personas for whom we are designing or solving. <\/span><\/p>\nIn terms of Smart Pages, we figured out some primary user personas which were:<\/span><\/p>\n\n- Consultants\/ Lawyers describing their profile<\/span><\/li>\n
- Travel Agencies trying to create an itinerary & sell packages around it<\/span><\/li>\n
- Event Management Companies hosting a single or multi-day event\u00a0\u00a0<\/span><\/li>\n
- E-learning coaches who provide online ebooks and courses.\u00a0<\/span><\/li>\n<\/ol>\n
There can be many more personas, but we started off thinking about how can we help these sets of users sell their services online.<\/span><\/p>\nRelated read:\u00a07 Smart brands using smart landing pages to grow online<\/a><\/strong><\/p>\nStep 2: Researching what already exists<\/b><\/h3>\n
As part of the research, we did a market study to see if there are similar products out there that are solving the same use case. We went through several single-page websites or landing pages and tried to understand the trend in terms of information which people generally showcase.\u00a0<\/span><\/p>\nStep 3: As a merchant, I should be able to<\/b><\/h3>\n
While trying to look around different user personas and also researching similar products we tried to get into the shoes of the merchant and tried to understand what s\/he will be needing to sell their service online.\u00a0<\/span><\/p>\nAs a merchant I should be able to:<\/span><\/p>\n\n- Let people know who I am as a business<\/span><\/li>\n
- Communicate what I am here to sell\/offer\u00a0<\/span><\/li>\n
- Elaborate+educate+convince customers why they should buy it<\/span><\/li>\n
- Win customer\u2019s trust around making the product\/service look genuine and credible by using social proof and other similar elements<\/span><\/li>\n
- And lastly, tell the customer how much it costs<\/span><\/li>\n<\/ol>\n
For the first phase of the product, we figured out that if we could solve these 5 use cases, merchants will be able to position the business online impactfully.<\/span><\/p>\nDefining sections for the landing page<\/b><\/h3>\n
Based on the above use cases which we discovered and wanted to solve, we defined sections which should be part of the page. <\/span><\/p>\nProfile Section: As a business who am I\u00a0<\/b><\/p>\n
The idea for the profile section was for the businesses to clearly explain to the customers who they are and what they are all about.<\/span><\/p>\n![\"Instamojo](\"https:\/\/www.instamojo.com\/blog\/wp-content\/uploads\/2022\/06\/Profile-snap-1013x1024.png\")
<\/span><\/p>\nHaving a business logo, name and a proper profile section talking about the business makes the customer form up belief in the brand\/business.\u00a0\u00a0\u00a0<\/span><\/p>\nPage Header: <\/b><\/span>As a business what am I offering?\u00a0<\/b><\/span>
\n<\/span><\/h3>\nLike any other landing page, this section was designed keeping in mind the main service that the business wants to provide to the customer.<\/span><\/p>\n![\"Instamojo](\"https:\/\/www.instamojo.com\/blog\/wp-content\/uploads\/2022\/06\/Header-snap-1024x956.png\")
<\/span><\/p>\nBusinesses can explain with a title and cover image what it is that they are selling.\u00a0<\/span><\/p>\nPage Theme: As a business how do I want my page to look?\u00a0<\/strong><\/h3>\nPage theme was an idea for businesses to customize their page based on their needs and taste. This feature gives them a whole lot of customization from selecting fonts, the theme colour and also choosing between light and dark mode.<\/span><\/p>\nThe basic idea behind this customisation was to let businesses customize their page as close to their original brand identity as possible.<\/p>\n
![\"Instamojo](\"https:\/\/www.instamojo.com\/blog\/wp-content\/uploads\/2022\/06\/page-theme-1024x762.png\")
<\/span>
\n
\n<\/b> <\/b>Pricing: <\/b>As a business how much am I charging?\u00a0<\/b><\/h3>\nOnce a business has started with the page creation and explained to their customers what they are selling, the next big thing to <\/span>communicate is the price for that service<\/b>.\u00a0<\/span><\/p>\n![\"Instamojo](\"https:\/\/www.instamojo.com\/blog\/wp-content\/uploads\/2022\/06\/pricing-1024x700.png\")
<\/span><\/p>\nThe pricing card helped businesses to range out multiple pricing options which they might need for their services. For example, an entertainment company is hosting a 3-day event and they want to create multiple pricing options for 1-day, 2 days and 3 days tickets respectively.\u00a0<\/span><\/p>\nRelated read:<\/strong> How to set the right price for your product or service<\/a><\/p>\nContent area: As a business, I want to explain what I am selling?\u00a0<\/strong><\/h3>\nPage content area is technically a rich text editor which can be used by businesses to clearly explain in detail about the service they are providing.\u00a0<\/span><\/p>\n![\"Instamojo](\"https:\/\/www.instamojo.com\/blog\/wp-content\/uploads\/2022\/06\/page-content-700x1024.png\")
<\/span><\/p>\nTaking an example of an event happening, the business might need to tell more about what the event is all about, who all are coming to that event, what are going to be the keynotes and so forth.<\/span><\/p>\n Page content area was deliberately made a rich text editor, giving the freedom to add more images and videos as well if needed for a business.\u00a0<\/span><\/p>\nAdditional Content: As a business, I want to show more relevant content?\u00a0<\/strong><\/h3>\nWhile researching different products and single landing pages around services and events, we felt a need to bring in a section specifically which businesses can use for social proof by adding testimonials and also by adding key FAQs if there are any.\u00a0<\/span><\/p>\n![\"Instamojo](\"https:\/\/www.instamojo.com\/blog\/wp-content\/uploads\/2022\/06\/content-1024x512.png\")
<\/span><\/p>\nFor version 1, we decided to just have Testimonials, FAQs<\/a> and the Enquiry form but the aim for this section will be to bring in more elements which can help businesses create trust, empathy and social proof among their customers.\u00a0\u00a0<\/strong><\/span><\/p>\nPage Settings: As a business, I want to manage my page<\/strong><\/h3>\nThis is one of the most important sections in terms of business use because it lets them control many key aspects of the page. <\/span><\/p>\nAs earlier discussed we were looking for an amalgamation of a landing page and an online store and so there were many important features we thought will be helpful as page settings for the businesses.\u00a0<\/span><\/p>\n![\"Instamojo](\"https:\/\/www.instamojo.com\/blog\/wp-content\/uploads\/2022\/06\/settings-1024x956.png\")
<\/span><\/p>\nFrom collecting more custom information from customers, adding a discount code for the services to tracking page analytics<\/a>, businesses can do a handful of actions from the page settings section.\u00a0<\/strong><\/p><\/blockquote>\n\u00a0<\/span>What\u2019s more to offer<\/b><\/h2>\nWhat we discussed above in terms of sections for the page are the key aspects while a business is trying to create its own smart page<\/a><\/strong>. <\/span><\/p>\nTo add on top of this, businesses have a bunch of more features like<\/strong> <\/span><\/p>\n\n- they can connect their own custom domain to their page<\/span><\/li>\n
- can add social media links to increase more presence around their business<\/span><\/li>\n
- manage the post-purchase experience as well for their customers\u00a0<\/span><\/li>\n<\/ul>\n
Conclusion<\/b><\/h2>\n
As a mental model for an eCommerce website, it is an online repository of all the products which a business wishes to sell to its customers. Each product has its product specifications, images and the price at which it is supposed to be sold.<\/p>\n
Coming back to Smart Pages,<\/strong> the aim was to build a \u201cproxy online store\u201d which catered to a certain set of custom specifications which we have figured out over time. To dig more into it, let’s first understand some basic questions which can help us understand the foundation of Smart Pages better.<\/p>\n As a merchant or a seller who wants to sell online, they often look for online platforms where they can sell their products and make a living out of it. As this problem statement is pretty cliche now, we have massive eCommerce marketplace giants where you can go and start selling your own products.<\/span><\/p>\n Another medium for selling, that merchants take, is creating their own eCommerce website<\/a>. However, it comes with added costs for designing, developing, maintaining and managing it.\u00a0<\/span><\/p>\n Businesses which are product-focused and have a large inventory usually create an online store<\/a> where they can showcase their products and eventually sell.<\/p>\n But, for service-based businesses which are generally providing a service like coaching, mentoring, counselling etc, an online eCommerce store does not solve the purpose. Similarly, a business or an entrepreneur which wants to sell just one product or just a service, will most likely not want to create an eCommerce store.\u00a0<\/span><\/p>\n Let\u2019s take an example of a career coach who runs a counselling business and wants to start online, will not need an online store because he will not have any multiple products to sell.\u00a0<\/span><\/p>\n Thus, Smart Pages was discovered where we thought we needed to cater to such service-based merchants or businesses who are looking to sell their services online.<\/span><\/p>\n Related read:\u00a0Tips to improve your landing page conversions; With examples<\/a><\/strong><\/p>\n Answering the why, and defining the how<\/b><\/p>\n This is a very important step or rather question we try to always seek answers to do justice to whatever project we are trying to build. In context to Smart Pages, there were again 2 similar questions\u2014<\/span><\/p>\n As we answered the \u201cwhy\u201d above, the second part of the quest was how we can provide the best solution to such businesses. <\/span><\/p>\n Based on many user feedbacks and understanding of how the offline service-based industry works, we came up with Smart Pages<\/a> where a business can build their landing page or one-pager website and showcase all their services\/portfolio they want to offer to their potential customers. <\/span><\/p>\n \u201cTo add on top of it and keeping the online store ecosystem in mind, we built Smart Pages to become a one stop solution for all these businesses where they will be able to list\/showcase their service and further collect payments towards it\u2014having the checkout experience intact.\u201d<\/strong><\/p><\/blockquote>\n For every problem statement, we try to work on, we try to draw out user personas for whom we are designing or solving. <\/span><\/p>\n In terms of Smart Pages, we figured out some primary user personas which were:<\/span><\/p>\n There can be many more personas, but we started off thinking about how can we help these sets of users sell their services online.<\/span><\/p>\n Related read:\u00a07 Smart brands using smart landing pages to grow online<\/a><\/strong><\/p>\n As part of the research, we did a market study to see if there are similar products out there that are solving the same use case. We went through several single-page websites or landing pages and tried to understand the trend in terms of information which people generally showcase.\u00a0<\/span><\/p>\n While trying to look around different user personas and also researching similar products we tried to get into the shoes of the merchant and tried to understand what s\/he will be needing to sell their service online.\u00a0<\/span><\/p>\n As a merchant I should be able to:<\/span><\/p>\n For the first phase of the product, we figured out that if we could solve these 5 use cases, merchants will be able to position the business online impactfully.<\/span><\/p>\n Based on the above use cases which we discovered and wanted to solve, we defined sections which should be part of the page. <\/span><\/p>\n Profile Section: As a business who am I\u00a0<\/b><\/p>\n The idea for the profile section was for the businesses to clearly explain to the customers who they are and what they are all about.<\/span><\/p>\n Having a business logo, name and a proper profile section talking about the business makes the customer form up belief in the brand\/business.\u00a0\u00a0\u00a0<\/span><\/p>\n Like any other landing page, this section was designed keeping in mind the main service that the business wants to provide to the customer.<\/span><\/p>\n Businesses can explain with a title and cover image what it is that they are selling.\u00a0<\/span><\/p>\n Page theme was an idea for businesses to customize their page based on their needs and taste. This feature gives them a whole lot of customization from selecting fonts, the theme colour and also choosing between light and dark mode.<\/span><\/p>\n The basic idea behind this customisation was to let businesses customize their page as close to their original brand identity as possible.<\/p>\n Once a business has started with the page creation and explained to their customers what they are selling, the next big thing to <\/span>communicate is the price for that service<\/b>.\u00a0<\/span><\/p>\n The pricing card helped businesses to range out multiple pricing options which they might need for their services. For example, an entertainment company is hosting a 3-day event and they want to create multiple pricing options for 1-day, 2 days and 3 days tickets respectively.\u00a0<\/span><\/p>\n Related read:<\/strong> How to set the right price for your product or service<\/a><\/p>\n Page content area is technically a rich text editor which can be used by businesses to clearly explain in detail about the service they are providing.\u00a0<\/span><\/p>\n Taking an example of an event happening, the business might need to tell more about what the event is all about, who all are coming to that event, what are going to be the keynotes and so forth.<\/span><\/p>\n Page content area was deliberately made a rich text editor, giving the freedom to add more images and videos as well if needed for a business.\u00a0<\/span><\/p>\n While researching different products and single landing pages around services and events, we felt a need to bring in a section specifically which businesses can use for social proof by adding testimonials and also by adding key FAQs if there are any.\u00a0<\/span><\/p>\n For version 1, we decided to just have Testimonials, FAQs<\/a> and the Enquiry form but the aim for this section will be to bring in more elements which can help businesses create trust, empathy and social proof among their customers.\u00a0\u00a0<\/strong><\/span><\/p>\n This is one of the most important sections in terms of business use because it lets them control many key aspects of the page. <\/span><\/p>\n As earlier discussed we were looking for an amalgamation of a landing page and an online store and so there were many important features we thought will be helpful as page settings for the businesses.\u00a0<\/span><\/p>\n From collecting more custom information from customers, adding a discount code for the services to tracking page analytics<\/a>, businesses can do a handful of actions from the page settings section.\u00a0<\/strong><\/p><\/blockquote>\n What we discussed above in terms of sections for the page are the key aspects while a business is trying to create its own smart page<\/a><\/strong>. <\/span><\/p>\n To add on top of this, businesses have a bunch of more features like<\/strong> <\/span><\/p>\nHow do merchants sell online?<\/b><\/h2>\n
What was missing?\u00a0<\/b><\/h2>\n
\n
How did we go about it?<\/b><\/h2>\n
Step 1: Defining user personas<\/b><\/h3>\n
\n
Step 2: Researching what already exists<\/b><\/h3>\n
Step 3: As a merchant, I should be able to<\/b><\/h3>\n
\n
Defining sections for the landing page<\/b><\/h3>\n
<\/span><\/p>\nPage Header: <\/b><\/span>As a business what am I offering?\u00a0<\/b><\/span>
\n<\/span><\/h3>\n<\/span><\/p>\nPage Theme: As a business how do I want my page to look?\u00a0<\/strong><\/h3>\n
<\/span>
\n
\n<\/b> <\/b>Pricing: <\/b>As a business how much am I charging?\u00a0<\/b><\/h3>\n<\/span><\/p>\nContent area: As a business, I want to explain what I am selling?\u00a0<\/strong><\/h3>\n
<\/span><\/p>\nAdditional Content: As a business, I want to show more relevant content?\u00a0<\/strong><\/h3>\n
<\/span><\/p>\nPage Settings: As a business, I want to manage my page<\/strong><\/h3>\n
<\/span><\/p>\n\u00a0<\/span>What\u2019s more to offer<\/b><\/h2>\n
\n
Conclusion<\/b><\/h2>\n