+91 8220676721 [email protected]
Select Page

Serverless360 Website Revamp – UX Case Study

Sep 15, 2019

What is Serverless360?

Serverless360 is a B2B product which helps enterprises to Manage and Monitor their Azure Serverless based applications.

Design Process

I followed the Design Thinking approach to redesign this website. The process includes Empathize, Define, Ideate, Prototype, and Test.

✨ 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


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 sign up with less effort and helps Businesses to understand it as a trustworthy company and a reliable product.

💡 Ideate


  • 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.

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.

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

Resource Page

Webinar Page

Request Demo Page

🧪 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 are 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.