End-to-End Responsive Website Design Leading to a 83% Increase in Lead Generation

Gigasearch is a consulting company specializing in a leading, data-management technology known as Elasticsearch. The website is the company’s primary portal for advertisement and conversions.

While working for Gigasearch as a UX/UI designer, I noticed users having issues navigating the company’s website. I approached the owners of the company to redesign the website and they gave me the go-ahead.

Team
Tenzin Woser (Dev & Design)
Sergio Horton (Copywriter)

My Role
‍Developer & Designer

Tools
Figma, HTML5/SCSS/JS

Timeline
Dec. 2020 - April 2021
(Approx. 3 months)

Problems

Users having issues navigating
The top navigation links didn’t match user expectations of the content users would see after having visited the link.

Users wanted info about company
Most users navigated to the About link on our page but information they saw there didn’t have the depth they wanted.

Low user conversion rate
While the conversion rate was not terrible, the owners wanted to increase the conversion rate by at least 2% with a redesign.

UNDERSTAND

Google Analytics & Ads

I wanted to understand the most popular content and who was visiting our website on our site, so I gathered information about our visitors through the demographics provided from Google Analytics and Google Ads.

Most commonly visited links:

1. About Us
2. Services
3. How we work

Demographic information has been omitted for security reasons.

Inspectlet - Live Recordings

I used Inspectlet, a service that allows website owners to view recordings of user behavior on their site, to investigate the needs of our current users.

I was interested in what users site behavior, in most popular links, and in what they were doing right before they left.

Inspectlet footage of a user experiencing the navigation problem

Finding 1:

Users expected top navigation links to be new pages but were unsatisfied when they just sent them to sections of the page they were already on.

Finding 2:

About Us link led to un-engaging content prompting users to leave.

Finding 3:

Users navigated to the website for the sole purpose of signing up.

Competitive Analysis

I then jumped into analyzing the websites of competitors in our space. I wanted to understand what our direct competitors and other tech-consulting websites did.

As I dove into each of these websites, I collected pictures of their sections and its’ organization in a Figma document. My key purpose through this analysis was to identify best practices and ways to make Gigasearch’s website distinct.
‍
One common theme I noticed was the use of icons. I assembled a collage of areas where icons showed up on the pages to analyze how and why they were being used.

Figma notes taken on icon usage on competitors' websites

These websites provided invaluable information about what could be improved about our website and what users expected out of their experience on the website.

Each finding shaped design decisions I made as I progressed through the redesign.

Finding 1:

Websites optimize for scan-ability of their content

Finding 2:

Companies tend to use around 3 to 4 distinct colors to style their sites.

Finding 3:

Iconography is used to reinforce the company brand, add visual interest, and visually represent services

ANALYZE

User Personas

To distill the research I’d done into a concrete and reference-able form, I created two user personas. They represented distinct user populations I identified over the course of my research.

Information Architecture

With the needs of users and goals of the website clear in my mind, I proposed a new information architecture for the website.

Dedicated page for consulting - Users could not identify how our Consulting and Monitoring offers differed leading to assumptions that we only did one or the other. I dedicated a page to consulting and grouping the services together made our services instantly understandable.
Created page for Sign-ups - Users did not expect to be directed to the bottom of the page to sign up when clicking the top right CTA. I added a new page as the destination for this button fit users’ expectations and gave us more space to sell our expertise.
Organized home page sections - The previous layout of home page sections overwhelmed the home page with information making it difficult to find information users needed. I reorganized them by deleting sections users didn’t find valuable, combining ‘Process’ with the consulting page, and dedicating a page for About Us information.

DESIGN

Lofi Wireframes

To begin the design process, I created lo-fi wireframes of the pages mentioned in the information architecture section.

The inspiration for the organization of these sections came from the research I gathered about user expectations and the way this information is typically presented.

After having found the best lo-fi wireframes for all of the pages, I assembled them in the information architecture to get a bird’s eye view of how the website would look.

Developing the Brand

Now, I needed to develop a strong brand to convey the feel and tone of the website. Based on prior research, I identified the most significant attributes for the website as authenticity, professionalism, and clarity.

Optimizing the visual design

An example of my aesthetic design process can be understood through the development of the About Us page.

Beginning each version, I critiqued the previous page's design referencing the user research we'd conducted, the user personas, and Nielsen's 10 Usability Heuristics for User Interface Design. When I finished the changes, I stepped away to work on other things until coming back critique the design again.

If a larger budget was available to me, I would have also conducted micro-usability tests between each iteration.

REFINE

A/B Testing

The Principal Engineer liked the original website’s design for the case study page but I thought bringing a fresh look would work best. I decided it would be best to test the performance of both designs by conducting a A/B survey test.

I put together a short survey that guided users through assessing both designs based on relevant multiple choice questions chosen from the SUPR-Q and SUS questionnaires. These time tested questions allowed me to quickly probe key areas of the design.

I sent the survey to 30 respondents chosen based on a convenience sample.

As you can tell, the designs were neck-and-neck on all metrics. The comments showed us that both designs had their own strengths and weaknesses.

Significant comments

“I find that the tags make for a cleaner design and easier to scan the page.”
“More clear separation between the two case studies”
“All the boxed in content for Design 2 is unappealing compared to Design 1.”
“With boxes to separate content it's easy to skim things quickly and efficiently.”

Using the findings from the preference test, I redesigned the case study page which satisfied the Principal Engineer and I.

Usability testing

With the hifi designs put together, I wanted to do some final tests before I began development of the website. I conducted virtual think-out-loud usability tests with new members of our target population.

Improvement #1 - Case Studies Cards

Simplified Keywords - Users found the tags did not meet their scan-ability needs. Shrinking the tags to keywords that users could identify with allowed users to quickly understand the context of the case studies.

Improvement #2 - Sign Up Section

Switching Required to Optional - When filling out the scheduling form, users found that they didn’t always have something they wanted to put in the ‘How can we help?’ field. To avoid the frustration of having to enter this section, I changed the site to accept responses with this field empty.

DEVELOP

I developed the pages using HTML for structure, Sass for styling, and JavaScript for functionality. I developed the website to be fully responsive.

Below is a series of page sections being shrunk on the most common devices used to browse our page.

Home Page

Monitoring Features

Consulting Process

Footer sign-up

Conclusion

Results

In the 3 months after release of the new website design, we observed an increase in website traffic by 20%, surpassing projections by 4% and an increase in lead generation by 15%, surpassing projections by 9%.

Key Learnings

The time constraints of this project taught me to plan out my design work and be realistic with myself about my capabilities.

Things I'd change about my process

Spend time doing usability tests and interviews after the lo-fi wireframes were produced. 
Test user performance in key tasks on the previous site to compare to user performance in usability studies on the redesigned site. 
With the lack of resources, it would have been more cost-effective to focus on the elements I had evidence were causing usability problems rather than redesign the entire website.