Wix Website Design - Case Study Of A Successful Site Build

This might just be the best Wix website design example and the project I've ever worked on!

 

Let the story begin.

​

Some time ago, the CEO of Clickacall, Jordan Worthington, reached out to me to see if I would be interested in redesigning their company website. Without over thinking, I have immediately said yes and we started right away.

 

In this article I would like to take you through this awesome website example and show you a full case study of this very successful site.

​

I wanted to make this post educational for anyone who is interested to learn about website design. It’s also great for anyone that is looking for some inspirations, strategies or best practices.

 

I hope you’ll enjoy reading this article and you’ll find it helpful.

​

The Process – Asking right questions

​

Going back to my first Conversation with Jordan, he quickly briefed me on his company, services and how they see its growth. My immediate thought was that this was going to be a quick and easy website design job until he presented me with their existing website. The company was up and running for some time, their brand was well positioned in the marketplace and they had great exposure with a decent organic traffic.

​

Designing a new website is challenging but redesigning an already successful website is a mission!

​

I knew from the start that time was a key factor and this new website had to be ready to go live ASAP. From past experiences I’m always realistic with the timescale so to ask right questions. I have to be confident that I know at least some fundamentals on how the given business is operating.

 

On the first call I didn’t give any specifics, I just simply said that I need to do some research first, go through all of the pages and learn more about their company. The reason why I have mentioned it is because of the timescale and the best way to start this process is in quick revision stages. The only questions, possibly most important ones, were:

​

• What’s the purpose of this page (homepage)? What is the key objective? i.e. Signup for free account, Free trial, collecting emails etc.

• What do you like and don’t like about your current website?

• Do you have some examples of other websites that you like?

 

First question is very important as you need to know what Call To Action should be used and how it should be positioned.

​

Second and third question is as important as the first one. We all know that saying “the client is always right”, however, we always tend to forget this especially in the creative world. What I always do is I check what do they like or don’t like about their current website, as there may be some elements or functionality on it that I don’t understand their purpose.

 

With the third question I look for the visual layouts, graphics and colors that client likes. It’s worth to remember that for a lot of people it’s hard to describe why they like certain elements and graphics or they tell you exactly what they like but it is virtually impossible to recreate this style without the right assets, i.e. copy, images, videos, animations, etc.

​

Learning about the brand and in depth research on clients website

​

When you’re trying to learn more about any company, I highly recommend checking the pages that no one ever checks! Pages like 'About Us', 'Company Mission' and even 'Privacy Policy'. 95% of this information you’ll probably not use anywhere, however, it may help you with trying to understand the company’s values and it’s message. It is important to understand that at the beginning stages as this has a big impact on what the website should reflect and how it should function.

​

Once I finish going through the whole website, if possible, I always use the product or service. There is no better way to understand the business than actually using it. With Clickacall, I was able to access the entire call interface and test it myself which helped me understand the functionality of this web application and also see the entire business from the user perspective.

​

After testing the software I went back again to read one more time every page on the website. With much bigger websites, i.e. lawyer website, I probably would only go through the most important pages and try to note key services etc. However, when it comes to SEO, before doing any work, it is a necessity to actually go through each page on the website, check it’s ranking and page structure. In this case I was just designing the homepage with some elements to be used on the inner pages and a new call interface.

​

Referring to the previous paragraph, with a right strategy and plan like this you may find it easier to ask the right questions which would help you to avoid many failures and mistakes when designing a website.

​

Here are more questions I asked Jordan during the research:

​

• How do you advertise currently?

• Where is your traffic coming from?

• Where do you plan to advertise after launching the new site?

• Who is currently using this product?

• What’s the company/product USP?

• Any case studies you found interesting?

 

You could say that these are some basic questions you could ask at the very start, however, I’m not looking here for some simple answers. I’m looking to understand the business from the inside-out. Asking these types of questions I’m not only showing a true interest in the business but also I can expand this to a much longer conversation which would give me all the insights that I’ll need when creating the first draft. Depending on who I work with on the project, in this case is the CEO of the company, I want this person to be involved in the process and see the value of a new, fresh and functional design.

​

Creating a mood board and introducing a new style to the existing brand identity

​

Personally I find this to be the best part of the whole redesign process. At this stage I get to experiment with various layouts, graphics, fonts and much more. In this step I let my creativity take control.

​

So where did I start first?

 

Before opening Illustrator and Photoshop I did more research to find certain styles that I already know would work for this project. From the conversations and examples that I have received from Jordan, I knew he wanted to move away from a corporate feel that had blue and white color all over the website. What he wanted was a certain style that is currently trending in the apps and software world. Vibrant colors with a dominate gradient elements and a clean, easy to read typeface with many weights. All the way from the very thin to the very bold-black as we wanted to create a strong contrast between headings and paragraphs in a vast amount of a website copy.

​

Something I had to remember was that with this website design project I was introducing new styles to their existing brand visuals. As I’m not changing their brand identity apart from colors, I’m focusing on how can I compliment their branding.

​

Clickacall logo had a blue “a” letter with three lines/shapes on top of it which are representing a “click action”. The challenge was the blue colour inside the logo. I could just change that to the new color that I would decide to use in a new design, however, because this company had already established good online exposure and had a decent user base, changing it to white was less risky. What I mean by that is imagine they already have some email templates, social media graphics or even business cards or any print marketing. Just in case they would still have a logo with a blue “a” letter, it doesn’t feel that outdated and different by having a whole white color instead of strong orange or vibrant purple.

​

 It may sound like this change is so minor and not noticeable that in this case color doesn’t matter, however, if it comes to large businesses changing a brand identity can be very expensive and if not done correctly it can start to be inconsistent.

​

Once I established how I was going to work around the logo I started introducing some orange and purple gradients as well as adding Montserat typeface and experimenting with different weights and sizes. I took some of their old icons and gave it a little kick by putting a solid, white shape behind and adding a color gradient on it.

​

Wireframes and website UI elements

 

Oh yes! Wireframes and UI!

​

Well .. not so fast. We all want to show this fancy prototyping which displays where we’re going to place another CTA and how we’re going to layout these images and that text.

​

From my experience, most people I worked with don’t care and sometimes it can be working against you. I made this mistake in the past, but in the company where I currently work,  where I wanted to introduce this new process to save us, website designers, a time on going back and forward with 57 revisions before anything is confirmed. This has added just an extra step in the process and no one really looked at this as something that is so important that needed them to take 1 to 2 hours off from the day to be on a call to look at and listen to our pitch on wireframes and all the reasons why we’re going to display this CTA in that way and why some image is going to be on the right side.

​

I believe there is a time and place to use and present wireframes and it’s really good to build them for your own reference, however, it all depends on what type of a client you’re working with, the industry, timescale, size of the website, how it’s going to be used etc.

​

To save the time and decrease the amount of negative revisions, what works for me best is when I create few elements of the website i.e. hero section, two to three paragraphs that shows the style of typeface in different colors and various sizes and possibly some icons with a text that could be used on a “services” section.

​

Implementing this strategy has not only saved the time and decreased the amount of unnecessary revisions but it also provided some value to the client. I think of this as  'The Behance Style'. If you look at the Behance website you’ll find that the vast amount of projects are displayed in sections and in stages especially Brand Identity and Website projects. When I present these visuals to the client, he or she can now refer to the new design and also they see that some progress was made.

​

Yet again, there is a time and place for everything and some clients will expect to see all the planning and extensive research. My suggestion would be to do as much as possible of all the planning that can be made within given timescale and have it ready to be presented but don’t necessarily present it all at once.

​

Without going off topic which is Wix Website Design and Case Study, lets jump to the next section!

​

Website revision and the feedback

​

After finishing and sending off some of the UI visuals, very quickly I received a response from Jordan with lots of positive feedback and only two minor changes to be amended. We actually did a few revisions during the whole process but each time we had a review, the project started getting more into shape and before we realised, we had a fully ready design of a new homepage.

​

Again, this strategy might not work for everybody as it all depends who you working with. For me the priority is to really listen to them, focus on the end goal/results, ask questions whenever I’m  not sure of something  and leave ones own ego aside. Yes, sometimes you might end up working with someone who’s really trying to take advantage of you especially when you’re just starting out and many times I personally had to refuse working on some of the projects or stop the work in the middle of the development but we learn as we progress and over the time building great relationships with clients becomes easier.

 

Preparing assets for Wix website design

​

Preparing assets wasn’t actually that difficult. A lot of elements can be recreated inside of Wix with some basic shapes and boxes so this saved me a lot of time. Shapes filled with gradient which you can see on the left and right side are simply transparent PNG’s which can be used as a background in the Strip with a no-repeat setting and aligned to the edge.

​

As this website was specifically designed for the Wix platform, there are a few things to keep in mind, i.e.:

​

• Website resolution - The width of a Wix website is 980px and it’s a fixed width which means it is not responsive, it's adaptive instead. Certain elements will resize and pinned elements will stay in the same position of the screen as it’s given, however, it’s not enough to build a fully responsive website on the Wix platform.
   

• Mobile version - As mentioned above, Wix websites are not fully responsive (although, Wix has recently launched Editor X which is indeed fully responsive) so they’re providing us with a mobile view editor, where you can customise your website layout, resize any of the elements, and much more. There are few limitations that is worthwhile looking into, i.e. It is not possible to pin elements to the screen, not too many options for the background in strips and columns and there are a few more.

​

Why did we choose Wix?

​

In our case, Wix was the best option for the landing page, however, Clickacall is made from 3 different sites. First one is the Landing Page, second is the Call Interface and third is the Group Call. Wix is really good when it comes to building landing pages. It is a Drag & Drop builder which means you can edit everything 'On The Go' and this is very helpful when it comes to the marketing and conversions. Being able to do simple or complex changes very quickly has a big advantage. For example, imagine how much time and resource you can save if you would need to move or change a button with a text from left to right. Or when you need to introduce a new section to your page. Even the most advanced programmer would still need to physically write a piece of code and to do so this must be planned out first which means that simple change can already take 1 to 2 days of work.

​

Of course as always there are cons and pros with any platform and one option doesn’t fit all so it’s very important to do some research in advance before suggesting any platform to the client.

​

How did we speed up the design process?

​

As mentioned above, with a very limited timescale what worked best for us in this case were quick revisions at different stages and removing some of the steps from the process, i.e. wireframes, presentations. Many revisions might be tricky sometimes so it’s important to remember to take notes with each conversation you have with a client and bullet point tasks that have to be completed before the next revision. It’s also worth to remember to add some balance to it and make revisions only when it does make sense. This way the client can see the progress that has been made and it also allows for any quick changes that needs to be made at the early stage.

​

In this day-and-age we see a lot of debate going around on having less revisions, charge more money and say “No” to clients or maybe choosing “the right client”. As much as I agree with having your own niche, learn the craft and value your time I would be very careful saying “No” too often.

​

The finale

​

So here we are!

 

Hopefully you’ll find some of this case study useful and maybe it can help you develop a more efficient process in your website design strategy. Yet again, I would like to mention that many things depend on your niche. The process of designing a website for a local business will be different to designing a website for a big corporation.

​