The 3 Step Framework to Design Your Store
Lesson 5 from: How to Design Your Online StoreStephan Peralta
The 3 Step Framework to Design Your Store
Lesson 5 from: How to Design Your Online StoreStephan Peralta
Lesson Info
5. The 3 Step Framework to Design Your Store
Lessons
Welcome to the Course
01:30 2Meet Your Instructor
01:10 3Collect Design Inspiration
02:01 4Shopify Theme Store Tour
04:55 5The 3 Step Framework to Design Your Store
08:34 6The 4 Pillars of ECommerce Design
10:28 7Top Stores and Why They Work
04:59 8Why Branding Matters
03:14How To Create Your Brand Architecture
06:00 103 Elements of a Brand Defining Mood Board
04:48 114 Pillars of a Strong Brand Identity
09:05 12Create a Coming Soon Page
10:08 13How To Pick the Right Theme For Your Shopify Store
03:53 14How To Design Your Homepage
03:47 15How To Design Your Product Page
06:08 16How To Design Your Checkout
02:03 17Build Your Shopify Store
26:01 18Launch Your Shopify Store
01:37 19Tools To Customize Your Shopify Store
01:57Lesson Info
The 3 Step Framework to Design Your Store
once you launch you learn, the problem is I see too many entrepreneurs who want to launch their store but they never do and why is that? It's fear you can call the fancy term like perfectionism. But at the end of the day it's fear that's holding these entrepreneurs back from sharing their ideas with the world. In this course you're gonna learn how to create a beautiful functional Shopify store. As you know, I'm a strong believer in M. V. P. The minimal viable product which means creating and launching your store with the bare bones. You can make changes once your store is live and ready to be improved. I want to start by sharing a real eye opening story. An example of the importance of launching. There's a great company called Condor Cycle. It's a family business that opened in and they launched their first e commerce store nearly 20 years ago which is a lifetime in the world of online businesses. Here's the fun part. There's a handy tool called way back machine. It's like going back ...
in time in the Internet and the capsule and seeing screenshots of what websites used to look like back then here's a snapshot I found from condor cycles years ago and here's what condor cycles looks like. Now as you can see, it looks so much different from the modern e commerce website. It is today. I'm sharing this to you as a demonstration that your design will constantly involve condor design and involve tremendously from when they first started and rest assure your business will. So how do you keep up with making changes to your store? I use a three step repeatable framework that you can use for your web design number one. Empathy empathy is the ability to understand and share the feelings of another person and in your case, your customer, if you can understand who, then you can understand what and why of your design. Number two is to define the problem and the solution. You want to define the problem that your customers have not. The problem that you have and I'll share more on this in a minute. Number three is to iterate. This means continue the test, learn and make changes over time. But first let's dive deeper into how you can develop empathy in your design. So the first step to creating empathy for your customer, especially if you're a brand new business, is to put yourself in the shoe of your customer. So how can you do that? Here's some questions to answer that can help you build empathy. Why is your potential customer coming to your website? How are they feeling or how do they feel when they come to your website? Where is this potential customer coming from? Are they arriving from a social media account that you started? Maybe you're running an ad or maybe they're searching for you organically on google. The idea here is to have empathy for your customer when designing by putting yourself in their shoes. The second way to build empathy with your customer is to talk to your customer or potential customers when you talk to them, you want to learn how they articulate the problem that they have. You don't need to talk to 100 people for this. Maybe start off with five or 10 just to get started. Now, the second step of the framework is to define the problem. Albert Einstein once said if I were given one hour to save the planet, I would spend 59 minutes to find the problem and one minute resolving, discovering and being able to articulate a customer's problem is super important. And you really want to understand how you design your store by defining this problem. It could be more of a challenge or shortcoming that the customer may even have. It may seem really easy to define the problem. However, I want you to remember that you're not trying to define a problem to solve but the problem of your customer. After doing the work to understand and empathize with your customer, you'll have the data that you can use to create your problem statement. And here's an example of a problem. First, a customer's problem, your problem would be, how can I sell 100 phone cases now your customers problem maybe I want a phone case that has a low impact on the environment. Here are a few questions you can answer to get clarity on your problem 1st. Who is experiencing the problem? Start thinking about creating an ideal target customer. Who you think could benefit from your product or service. Second, when and where does the customer experience this actual problem? Start thinking about the scenario or the trigger for when the customer potentially would want to buy a product and why they would want to buy it. And third, why does this matter? This is a big question. But if you can attach a bigger why to the product you're creating, you may be able to get a clear understanding of the problem. Here are a couple examples of how defining customer problems can lead to a better design solution. The customer's problem, I'm not familiar with the brand and it may introduce risk buying from them. Now your design solution would perhaps we incorporate trust badges or review to build instant trust. Now the customer, I might have a hard time reading the project description due to my age and my eyesight. Your solution would be ensure the website copy is large and bold enough and make sure contrasts. Your customer may be worried about additional charges that may occur when they get to the checkout portion. So the solution might be applying a clear call to action, indicating the cost of shipping and taxes before they get to the checkout page. Now that you've learned to define your problems, let's talk a little bit more about crafting a solution and iterating on it. Your first solution will likely not be the last, so don't get attached to your first brilliant idea. There's no specific rule on how often you should be making updates and changes to your website. This is a personal choice for you and your business. Luckily, there are easy ways to make changes such as updating photography, colors, fonts and more though here's my method for assessing if it's time to do a full rebrand or iterate on overall design. If you start to feel like your website isn't up to date or feeling any hesitation With marketing, it might be time to. Iterate. Another reason to redesign is your site isn't delivering the sales that used to make. Another challenge may be that your website navigation and design is getting way too complex as you're growing. When you first start, your business chances are you'll only have a small handful of products to start to sell over time. You may notice your product catalog will increase and you'll start to have many pages and drop down to your website. So once you're clear on what you want to iterate on, how do you do it? Here are three ways that I recommend. Number one, install an app like Lucky Orange. Lucky Orange is a great tool to allow you to heat map and actually record your visitors interaction with your website. It's almost like you're sitting behind them while they interact with your website. Number two community feedback. There are fantastic groups like Shopify entrepreneurs on Facebook that you can share your website and seek feedback from the community. Shopify Academy also regularly runs webinars that you can get live feedback on your store from an e commerce expert. Number three user testing dot com. This is an incredible resource even though it could be a little expensive, the site gives you a chance to have someone in your demographic test your store so you can develop a better customer experience. I recommend trying the service once you start actually making sales. Number four, get an audit from an e commerce agency. Once you start making sales and want to iterate, you can hire an agency that focuses on conversion rate optimization to audit your site. This could be a bit more of a cost effective approach because if you want to hire them right after that's great, ideally the agency will give you some opinions and you can also take those back for any self reflection. This simple repeatable framework is how I approach every new site I start to build with empathy. I work to understand my ideal customer, articulate their problems and then propose my solution and lastly I constantly reevaluate my assumptions and my solutions. These steps allow me to develop a sound business and the well designed online store. My customers will love join me in the next lesson to learn the four fundamental principles of designing a modern e commerce store.