Serverless360 Website Revamp — UX Case Study
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
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.
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
Resources Page
Webinars Page
Request Demo
🧪 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.
