11 Sight is a leader in the space of
one-click video technology, recognized as
one of the most innovative companies of
2021 at Silicon Valley's annual flagship
conference.
We were first asked to redesign the current site with a focus on the pricing page - to make sure that all the plans are clear, organized and fully reflect the features of the client's pricing policy.
We had to put a major focus on the client's audience: customers and business representatives. We kept in mind that we need to help new users understand what the product is all about, help returning users find the information they need, as well as help companies with the solution their business is looking for.
Problem
Solution
Problem:
The essence of the product was poorly conveyed. Its value and importance were poorly presented, and because of this, it did not stand out from the competition.
A confusing layout and structure of the information around the website did not help the user understand how the product actually works.
The design didn't engage people's attention at any level and did not distinguish the product from other competitors in the space at all.
Solution:
We conducted an extensive UX audit and created a site map using the findings. This helped our team and the client explain their product better, as well as present it to the potential user the right way, increasing the conversion rate in the process.
We organized the information in a structured, coherent way to help visitors understand better how the platform works.
We used a lot of visual "tricks" to make the site stand out from the competitors and inspire trust in the process - for us to drive our client's conversion rates higher.
research
process
1.
UX Audit
This is a necessary step for existing products in order to better understand the way they work in order to find and improve upon what affects the website quality and conversion rates the most. Initially the website was uninformative and somewhat confusing.
It also helped us understand that we needed to change the font styles to make the information easier to read, as well as to make it easier to find the right content in the first place. We also got clear on the use high-quality pictures and infographics, emphasized with animations, which helped make a lot of fairly complex information much easier to understand.
2.
WHAT WE'VE DONE
We analyzed the current design of the website to understand what works, what doesn't, and what needs to be improved. The audit includes the summary of wireframes, user flows and completed research of the space.
We shared our vision of the website with the client, along with the list of pages, features, order of blocks and how to best organize the content to make it easy for visitors to navigate the website to quickly find the resources they need. They helped our client better understand their customers, how they differ in their profile and expectations, which categories the product must be divided into to present it in the best possible light, as well as how to position their product on the market the best possible way.
3.
UX Research
Our goal was to reimagine the entire website and break it down into logical blocks with the correct positioning of the product with a smart structure of the information, laid out to the visitor.
That's why one of our first suggestions was to create a new sitemap to do everything from scratch. To do this, we needed to completely rethink our way around the existing site and share the right information the right way, for each page to focus on its own idea.
We took into account the wishes of the client at each stage and worked closely with their UX team. This helped both us and the client to take a fresh look at the product and understand the main features to emphasize.
The last step was to create a website strategy for the future in order to decide on how to switch from the old look to the new one without any drop in conversion rate.
4.
USER FLOW
After auditing the product and creating a sitemap, we realized that one of the key pages is the pricing page. The most important point on it has to do with the transition from the subscription to the payment page. We therefore created a user flow where we showed what changes required to the flow to make it more user-friendly and well optimized for conversion. At this stage we used the existing UI library and further described how to properly implement the changes on the technical side.
OLD
VERSION
We analyzed the client's existing website and improved it by making it more engaging visually, easier to navigate and even more intuitive in terms of the information presented. We didn't remove any existing features. Instead, we improved on what we had and added new ones, only where they were needed.
Design
process
We completely redesigned the
website and divided it into several
pages, making it easier for the visitor
to navigate and find the information
they need the most.
After analyzing the website and understanding the objective of the team, we structured all the information that was previously scattered all over the place into a beautiful, captivating hierarchy which makes it is easy to find the information the visitor needs.
Our first task was to create a bright, engaging home page and show the main features of the product: video call window, dashboard, e-button, employee call with the client and the quick close of the sale.
Advantages
Here it was necessary to emphasize the main advantages of the product. We used simple, bright visual elements and animations to do so.
Features
Here we have emphasized the main features of the platform and how it can work for a given business. We used the FAQ style to allow users to go through the questions which interest them the most and clarify the provided answers with hint images.
Affiliate
page
Initially, this was only one of the block in the original landing page. We suggested creating a separate page to better draw users' attention to the opportunity to save and bring more users to the platform at the same time.
calculator
The main difficulty from the technical point of view was to create a calculator for cashback, given the number of invited users.
Mobile
We have also created a mobile version that retains all the functionality and ease of use.
visual elements
We created a unique style with which we were able to present important information in a way that was sure to draw attention to the content that visitors needed to focus on the most.
Platform
page
This page was created for a deeper analysis of features, mostly through infographics, to avoid forcing the reader to focus deeply on the details.
A solid amount of mental work has been made to make it all clear in just two sentences.
Pricing
page
The original version of the price was incomprehensible to users because everything was somewhat messy. It wasn't clear what the options and benefits were. Our goal was to increase conversion through customer loyalty by showing the transparency of the available plans.
Easy
We've made it as easy as possible to understand the pricing table with service packages being offered, to make the comparison of all the available options simple and fun.
We've added the option to subscribe for a year or a month, to increase user loyalty even more. Highlighted the main elements: discounts, cost and options. Added the ability to compare the pricing using a slider.
Why 11 Sight page
Here we explain what makes the product a profitable investment and what makes it work. We decided to do it through storytelling, where all the information is revealed gradually, while the user scrolls the page and "dives" deeper and deeper into it.
Content
The challenge of this page was in creating and designing content that would convey all the information about the client in a few sentences, and grab visitors' attention. We also had to choose the best photos to match with the presented text the right, emotionally appealing way.
article
page
On the article page, we have thought through all the possible details of a publication, to give the client the ability to create beautiful articles and add any desired elements they might need.
Adaptive design
We've created a design that easily adapts to different screen sizes, including tablets and mobile devices. This was done to help the client save time and money on the development phase.
