Are you currently running an e-commerce business? Or thinking of starting one? How exciting! As a newbie e-commerce founder, I totally get you that you want to save as much money as possible. Do you even need a website then? Probably not. You can do the traditional social media marketing and get your customers to purchase through bank transfer or cash only. But you're probably limiting your business to grow. If you're business aren't growing, then you're not doing something right... I've been there and I am here to help. So here is a step-by-step guide on how you can design and build an e-commerce website.
Already have an e-commerce website and don't want to read this? Check out "5 ways to optimise your e-commerce website" here
In this blog example, I will be introducing WIX as a website builder for e-commerce. Not only I am a massive WIX fan, WIX sometimes gives a 50% discount to e-commerce plan so you'll only pay $14/month on an annual plan. I usually go for 2 years plan because it's cheaper. It also comes with a free domain within the plan too! As a designer, WIX is quite flexible to customise my design and allows me to optimise the user experience. It's so easy to use with the drag and drop feature. The back-end customer management is also easy to navigate and straightforward. Let's get started!
Inspiration and Mood board
Step 1: Research
Before you should even start your business, do your competitor research. What are they doing and how can you do it better? Check our their websites and start to screen capture the homepage from multiple sites. I use a Chrome plugin called "GoFullPage" to take a photo of the whole page. Then I have the pictures save into a folder.
Step 2: Download Figma
Figma is a design software that most User Experience designers use to sketch out design whether it be a website or a mobile app (or even social media post). It is completely free to download and I would recommend getting a desktop app for it.
Step 3: Creating a mood board
Paste all the screenshots that you saved from GoFullPage plugin into Figma design file. This will give you a bird eye view of what your business industry is doing and what works best. From here, you can pick some of the features that you love and start highlighting what can be used in your website. Importantly, we can explore the brand here as well. Having this bird eye view provides an opportunity to decide what branding you might incorporate.
Starting the Design Phase (non-designers edition)
Step 1: Leveraging existing WIX templates
WIX has amazing templates which you can browse through to build your e-commerce website. For me personally, I don't usually like to use templates because it doesn't give the best user experience and it doesn't stand out to your brand. You want your business to stand out. This will do the job for now!
Step 2: Screenshot the chosen template
After you have decided on a template, go to "live" preview and use the GoFullPage Chrome plugin to screen capture all the pages of 'that' template. You want to do this so you can get a bird-eye view of how the template works and what element it offers.
Step 3: Figma
In Figma, create a new page (within the same file) and name it "WIX Template". Paste all your WIX template screenshots in there. You should have a home page, about page, shop page etc.
The next step is to see where you can fit the highlighted elements from your inspiration board and fit it to the WIX template. Start sketching out what your homepage can look like. Repeat this for every page! (this is the most time consuming part)
Spending too much time designing where you could be making money right now? Chat with Penny for a free consultation!
Implementation Phase
Step 1: WIX Account Set-up
Assuming you haven't sign-up with WIX yet, you can use your Facebook or Gmail to do so. It is such an easy process! Once you're in, navigate to the template that you have picked previously and start editing the template.
Step 2: Set your Theme Manager
Set your style guideline first. Head over to the left hand column and click on "Theme Manager". In here, you'll have two options: Colors and Text. You have to determined your own theme. What's the majority of colour that you see most in your website design? Alternatively, you can use the template colour provided. This is the same as typography text.
Step 3: Design with grid
Using the grid system to design will help your website look clean and align. We don't want a wonky website do we... Head over to "Strip" and start dragging the plain white ones onto the main board. When clicking on the strip, the toolbox will pop-up. Click on "Manage Columns" to start adding columns to the screen. You'll also see another option in the tool box that looks like arrow point both left and right. The "Stretch Strip" option is important when it comes to responsiveness. I would try to stick to "Page" as much as I can.
Ultimately, design takes time and it takes creativity, practise and knowledge to claim the eye for design. A quick guide won't be able to help you become a designer overnight, and that's why I am here to guide you go through the design process too.
Optimising for SEO
SEO stands for Search Engine Optimization. This is how your website drives traffic (visitors). People are relying on Google to help them find things they need. When people look for 'products', your website should come up! When people navigate to 'images' tab, your product photos should at least be there. This takes time for Google to process your newly launched website
In WIX, make sure that you are every page settings has a slug URL, description and images to go with. You can navigate to the left column to find the individual page settings.
...and now PUBLISH!
If you've bought the WIX plan and got the domain connected, your website shouldn't take long to publish and be live. It takes about 3 months got Google to process (from my experience at least). So be patient!
Struggling to design your own website? ... Or just simply don't have time for a revamp?
Get in touch with Penny for a chat and good times. Honestly, I just love hearing about your business!