✨ Empathize

Why Serverless360 website needs a redesign?

After analyzing the entire website, I drew up with the following conclusion why it needs to be redesigned:

The website looks outdated

There are no trust factors for the users to believe in the product

The brand values are not clearly visible on the website

Research

What is Serverless360?

A web-based portal to Manage and Monitor Azure Serverless Entities

B2B product

Being used by large enterprises

Targeted Users

Azure Architects

Azure Developers

Azure DevOps Engineers

Azure Application Testers

Azure Support Engineers

Business Consultants

Targeted Countries

American Countries

European Countries

Australia

✍ Define

Problems in the current website

Information about the product is outdated

The Website looks outdated in terms of visual design

The CTAs were not prominent

The primary color of the site and the Primary CTA colors were not aligned

The homepage is not engaging

The Bounce rate in the main pages was high

Users were not able to find the right information about the product

Users couldn’t understand what problem does the product trying to solve right from the Homepage

There is no proper section for announcements

Use cases

Users want to

Know about the product and its features

The problem the product trying the solve

Different use cases of the product

Pricing Plans

Existing users and Testimonials

Comparisons with similar products

Hassle-free Sign up options to try the product

Problem Statement

To redesign the website for Serverless360 that helps To help the users to have a clear cut idea about the problem this product is trying to address and making them to sign up with less effort and helps Businesses to understand it as a trustworthy company and a reliable product.

💡 Ideate

Solutions

Deliver a clear cut idea about the product in the hero section

Bringing the trust factors like existing customers logo within the 1st scroll of the website

Bring the Azure Serverless Components to which the application offers support

Providing links to the pages that helps users to understand more about the features

Adding main screenshots to give the user an idea of how the application works?

Providing the right data instead of mock data

Remove distractions in Landing Page by focusing on a single goal.

Placing CTA at Right spot using the heatmaps

The primary color of the brand should align with the color of Primary CTA

Information Architecture

I ran through the entire Serverless360 website to make the Information Architecture of the Home Page of the website.

🐱‍🏍 Prototype

I started making pencil sketches on paper to get a rough idea about the flow of the website.

Low fidelity Design

I used Adobe XD to convert the pencil sketches into low fidelity design. After completing the low fidelity design, I passed the design for approval and with the mentioned comments I moved to the high fidelity design.

Serverless360 Low Fidelity Designs

Visual Aspects

Before starting the High fidelity system, I started to create a Design System. This Design System will have Primary, Secondary and other Brand colors to be used on the website. This Design system will also contain the details about Typography which includes the font family details, the font weights to be used.

Serverless360 Brand Color Palette

Serverless360 Typography

Mood Board

Mood Board

Mood Board

High Fidelity Design

I designed the Final UI after incorporating the changes mentioned by the team. I used Adobe XD to design the High Fidelity Design and Prototyped using the same tool.

Home Page

Homepage — Serverless360

Resources Page

Resources Page — Serverless360

Webinars Page

Webinars Page — Serverless360

Request Demo

Request Demo Page — Serverless360

🧪 Test

I’ve tested the website internally within the team and collected the feedback. After the internal testing, the site is made live for public usage and used Hotjar to collect user feedback.

🎉 Conclusion

After the revamp we used Google Analytics and Hotjar to check the outcomes. After the revamp we could see noticeable changes in the user engagement time which is increased by a margin of 16% and the quality scores for the landing pages is also increased. With the Hotjar Analytics, we could see the page scroll percentage is also increased.

Design Thinking is a continuous process. These steps will be repeated from time to time with the data and feedback collected from these tools to provide the users with the quality of content and better usability.