How to use WIX – website builder for small business

Wix website builder

Wix website builder

I admit, I am not a web developer, I have no coding skills and the prospect of building my own website from scratch with no external help first appeared a bit daunting.

I know a lot about the different stages of building a professional, effective website. I am a digital consultant after all, and have managed numerous web design projects. I can do strategy, planning and project management, but I have always worked with teams of specialists that delivered the technical stuff. These days however, anyone who’s used to working with digital applications (basically anyone over the age of 7 with a computer, tablet or smart phone), should be able to build a website without coding skills. I believed it to be true and now I can prove it.

Why not WordPress?

WordPress is the leading platform, and you can get many free templates to start you off. However, I had already worked with WordPress and wanted to try another platform, plus my research for suitable WordPress templates didn’t come up with anything I really liked. I couldn’t get the freedom I wanted.

WordPress is known to be robust, stable and optimised for search engines. There are probably a hundred thousand developers that can help you with it. It’s probably the best platform. But if you don’t really know what you’re doing… it’s not quite simple enough to my liking. To make something unique and amazing, I would need external development help, or spend many days studying how to use its advanced modules.

Why WIX?

I’d heard a lot about HTML5 being the latest language and highly effective with mobile technology. Somebody mentioned WIX and so I decided to experiment with it. Once on the WIX website, I instantly recognised several templates I could use – the style of the free templates available on WIX seemed really contemporary, with lots of white space and images, and it was a clear opportunity to employ good UX principles (User-Experience).

This is what I achieved with WIX:
www.digital-heart.co.uk

There is no other site like Digital Heart anywhere, it’s completely unique. It’s not the prettiest site, I would like to improve the look of the header area (suggestions welcome). Is it the best site in the world? not by a long shot, but it’s all mine, and it works.

 

WIX's "design agency" template

WIX’s “design agency” template

How to work with WIX

Once selecting a template (I selected this trendy yet simple template), you can go through the various existing pages and amend the text and images to suit your needs. But nobody’s ever happy with something that comes out of a box, right? and rightly so. Your business has its own specific needs, you want to communicate your own messages in your own way, to your own audiences.

The thing about WIX, is that whichever template you select is just a starting point from which you can change literally everything. Nothing is set in stone. Complete freedom. It’s really quite fantastic.

Of course, if you start changing things you should probably have a good idea of what you want to achieve.
The process in the case of Digital Heart involved several stages. By no means did I go straight into the design phase, oh no!

  1. Market Research
  2. Personas development
  3. User-stories
  4. Requirements document
  5. Several Design iterations + testing

Market Research – how to design a website if you’re not a designer…

I started by searching for competitor websites and award-winning websites. I used my intuition to list those I particularly liked, and then analysed them and documented everything I noticed:

  • What the headers and footers looked like
  • What the navigation looked like and what it contained
  • Position and size of logo
  • Size of various text and boxes on the page
  • How they segmented the content on the homepage (what weight did each element have in the overall design, how prominent etc.)
  • What came first and what was next, how they designed their user-journeys (which is easy to decipher simply by listing the steps I would take as a user on their site)
  • Fonts and typography
  • Images and how they positioned them

I’m afraid there’s no time to discuss the next two stages in this post (Personas development and user-stories), because they are super-important from a strategic business perspective, and should have their own dedicated posts.
This is where you should explore who your audience segments are, what they are looking to achieve on your site and what you wish for them to achieve.
You’d be amazed how many insights you can get from going through a facilitated Personas workshop, it’s a highly recommended exercise.

In fact, as this post is about WIX, I shall move straight to the design phase!

Designing in WIX

The design interface is well laid out and super-easy to learn to use. A simple navigation bar on the left contains 5 items:

1. Pages: here you tell WIX which pages you want to create, giving them a name, page address and basic SEO in form of a page title, description and keywords.
You can copy pages, hide or include them in the navigation menu on your website, and even password-protect them.
Here is also where you select the basic layout from a set of pre-designed layouts included in your basic free template. As I mentioned before, any page layout and other design elements are completely editable.

2.  Design: this is the place to make changes to the template’s background, colours and fonts. Any changes you make in this area will cascade into the actual pages on your website in one click, and you can test it instantly. Groovy. You can either select one of the existing pallet or use your own – I used the Color Scheme Designer website to come up with my colour pallet, and so I changed the scheme on WIX accordingly using the HTML codes for each colour. It was easy to find the colour’s code on Color Scheme Designer, it shows up when you hover over your colours.

3. Add: a verity of elements you can add to a page: text boxes, images, galleries, other media e.g. video, shapes, stripes and lines, buttons, menus, blog widets, online store, social media icons, forms and many other widgets and apps from the market place.

Great free image bank on WIX

Great free image bank on WIX

WIX have recently updated their built-in image repository (royalty-free stock photos and illustrations), and have added hundreds of beautiful images all organised by topic / function. It saved me money I would have had to spend on purchasing stock images.
I did create some images myself using Illustrator and Gimp, when I couldn’t find appropriate options on WIX.

There is one down side to the WIX image bank, and that’s the fact there is no keyword search function, so you have to scroll through hundreds of photos to find the right one for each situation. I spoke to WIX about it and they said it’s in the roadmap. A search function for images will save lots of time and effort so I hope it does go live soon.

4. Settings: in this area of the interface you can manage your domain, go through an SEO Wizard to optimise the site for search engines, set up Google Analytics so you can see traffic stats, and add a favicon.

App Market within the WIX editor

App Market within the WIX editor

5. App Market: hundreds of widgets and apps for you to add stuff to your website through 3rd party providers, in a similar way to most web builders these days. Social media integration widgets e.g. Instagram feeds, form builders, comments, job widgets, video galleries, Google Adsense and many many more. I really should spend some time looking through these…
I added the Blogger Feed widget to Digital Heart, as that’s where my current blog sits. This widget could be better though, it’s a bit buggy and the design somewhat limiting.

I spent about 2 days creating the Digital Heart website on WIX, and a few additional hours sorting out the Mobile rendering – WIX gives you an option to optimise the design of your site for mobile devices which is an important feature and something you definitely have to do. This is what will enable your website to be “responsive” to whichever device is being used to view it (responsive design).

Of course, my website is small and informative, it doesn’t require complex architecture and the functionality is basic. I also already had a lot of the content ready. I guess a project like this would take about a week to complete if you’re starting from scratch. That’s 5 days of work. I did it in the quiet period just before Christmas, but you could easily spread it over a few weekends, or even dedicate one hour every day for a few weeks.

Have a look at the result:

The Digital Heart website

The Digital Heart website

Good luck with building your website, have fun with it!

P.S. I’m always happy to help. Do get in touch with me if you need advice on what would be the best way forward for you and we’ll set up a Skype call for a (free) chat.

First published January 8, 2014

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.