ZAB Design

Website Design

ZAB Design is a website service provider based in Houston, Texas, offering comprehensive and value-packed web design, web hosting, domain, and website maintenance & security. In 2021, ZAB Design started offering new advanced products, and a new website redesign was needed to showcase the unique features and benefits of the new products.

Research

After a market research and cometition analysis, we concluded that:

Business owners’ lack of knowledge regarding websites

According to the SBA, of the 30 million businesses in the U.S., only 64% of small businesses have a website. But this is a problem since a study by Blue Corona shows that 80% of customers will research a company online before visiting it. Similarly, a Stanford University study reveals that customers will judge a company’s credibility by their website design. (Source)

Wow-factor vs performance

As a website design service provider, ZAB Design’s website should still be engaging and aesthetically pleasing, but performance and simplicity is also an essential factor.

Showcase Products Effectively

It is essential to display the product in a simple and easy-to-understand way that informs the audience of all the features and benefits. Also to encourage visitors to take advantage of the product bundle.

Communicate the process:

Learning about the design process would help prospective clients be more comfortable and confident working with ZAB Design.

User Personas


Two user personas represent two common types of clients: the first persona represents a creative director from another design agency who wishes to delegate more design projects. The second persona represents a business owner who wishes to expand his business by having a well-designed but affordable website that can effectively represent his business.

Brianna

Age 43 | Creative Director | Married, two kids | Lives in Houston, TX

Brianna is a busy and hardworking creative director at a major creative design agency in Houston. Their agency has been receiving more and more projects recently, but they have reached their capacity to serve all the upcoming projects. Brianna is seeking another design agency to delegate some of their web design projects to them. She is looking for a reliable web design agency that can handle various web design projects and develop a mutually beneficial partnership.

Archetype: The Creator/Artist
The Creator Archetype are constantly using their imagination to create physical manifestations of their work.

Goals
  • To find a trustworthy web design agency
  • To delegate some of the projects that their agency cannot complete at this time
  • To develop a future partnership with other design agencies in their region
  • To expand some of the services they offer
  • To make their design process more efficient and effective
Challenges
  • Brianna sometimes has a hard time with digital platforms, and she is specialized in print
  • Their design agency has never developed long-lasting partnerships with other firms
  • She is not up to date on latest digital tools and trends
  • Their design process is not optimized and efficient enough to compete with their competitors effectively

Sean

Age 40 | Business Coach | In a Relationship | Lives in Sugarland, TX

Sean is a business coach who used to offer conferences and coaching workshops all around the country. Recently due to COVID-19 restrictions, he had been forced to think of alternative ways to share his knowledge with those who can use it. Therefore he is looking for a reliable and creative web design agency to create an e-learning website and begin selling his courses online.

Archetype: The Magician
The magician wishes to create something special and make dreams a reality

Goals
  • To find a trustworthy web design service provider
  • To learn about E-Learning platforms and how to utilize them
  • To start selling different courses easily
  • To track the progress of those who enroll in the courses
  • To delegate the task of website maintenance so he can focus on the teaching part
Challenges
  • He has never used an online learning service
  • He still doubts the efficiency of E-Learning platforms
  • He has had a bad experience in working with web design agencies before
  • He prefers a face-to-face teaching style rather than an online service
  • He is a little tight on budget at this time

Define

After identifying the problem, we can define the goals and ideal outcomes for the project by asking seven questions and use the answers as a framework of our process. 

What is the purpose (goal) of the design?

To demonstrate the capabilities and products of ZAB Design and highlight the features and benefits of each service and products in an easy-to-understand way.

Who is the audience?

Small business owners who need a modern and secure website, individuals who wish to sell their products, services, or teachings online, and creative design agencies looking for a reliable web service provider to delegate some of their projects.

What message needs to be communicated?

Value, Competency, creativity, reliability and security.

What is the competition and marketplace?

There are lots of website service providers in the region that are considered direct competitors. Due to the nature of web design and services, competitors are not limited to the region. However, companies that provide the exact set of services are harder to find

What is the context?

A fully responsive, user-friendly and fast website which is pleasant to interact with on all devices and browsers.

What is the voice?

Approachable, professional, informative and reliable.

What kind of response is desired?

To inform visitors, provide answers to possible questions that they might have, and encourage them to inquire more about services or products.

Ideate

To make it easier for visitors to navigate the website and find the products and products they need, we divided them into four different categories. The home page will provide necessary information regarding the products and services provided by ZAB Design, and subpages will provide more information and details regarding each product/service.

Site Map

Low Fidelity & High Fidelity Wireframes

Things to consider when designing the structure of the website based on the framework we defined:

  • Amount of content: The page shouldn’t be too heavy to load; otherwise, it would hurt the website’s SEO ranking

  • Wow factor: Web design is one of ZAB Design’s primary services, so it’s crucial to have exciting and interactive elements in the design.

  • Conversation Optimization: Homepage and services pages must follow a logical flow based on conversion optimization principles, starting by introducing the products and services, highlighting the features, and, more importantly, benefits and value proposition. After that, we can add anything that would support the presented content, including social proof or a portfolio of work. 
Home Page

Design

In addition to a new website, we realized we need to update the brand to align it more with the new upcoming products and services. To give more characteristics and differentiate the main products and services

Logo System

Each of ZAB Design’s four primary services is an essential requirement for a website. To add more characteristics and character to each service, I designed a logo system based on ZAB Design’s primary logo. Each logo utilizes color as a unique identifier element, and that color is used as an accent color on each service’s page.

zd_logo
Main Logo

The original logo of ZAB Design that is also the template for the logo system

ZAB Web Design
ZAB Web Hosting
ZAB Web Domain
ZAB Web Security

Typography

Header Typeface:

Rubik Bold
Rubik Medium

Body Typeface:

Karla Bold
Karla Regular

Colors

HEX
#1062FE
HEX
#0940B3
HEX
#FC5185
Logo system colors
Web Design
(ZAB Desgin)
HEX #07A44B
Web Hosting
(ZAB Hosting)
HEX #F0A038
Domain
(ZAB Domain)
HEX #E83F4E
Maintenance
(ZAB Security)
HEX #9452FF

Utilizing Interactivity to Teach Visitors about Services

One of the groups that we identified as ZAB Design’s target market is business owners who may lack adequate information about the services and products that a website needs. The challenge was to present information in an easy-to-understand and engaging way to keep the audience interested and informed. We used many interactive elements to achieve this goal without hurting the website’s performance and speed. 

In this example, we used the analogy of building a house to explain necessary products to have a website up and running.

Final UI Design of Home Page

Final UI Design of Services Pages

Iterate

Performance & WOW Factor:
Keeping it
Simple but Interesting

ZAB Design is a visionary web design and services agency, so the company’s main website should look and feel professional. It should be user-friendly and SEO-friendly. The biggest challenge in this project was keeping things clean and straightforward yet engaging and interactive. Optimizing all assets and content was essential in improving the performance, and user-testing after the lunch of the website showed a positive response to the interactive elements that we integrated within the website.

Thanks for Checking this Project!

Share this page

View More Projects

Collarful

Android/IOS App

Logo Designs

Branding