uCloud
UX/UI Redesign
uCloud is a premium Google partner. They not only offer Google products but also provide comprehensive solutions tailored to specific industries, complemented by their range of services. Their extensive experience and global expertise in all things Google enable them to execute customer projects with agility and flexibility.
Roles:
Lead Product Designer
Responsibilities:
UX Research
User Interface Design
System Design
Team:
Montse Grau, supervisor
Juan Sebastián Devincenzi, developer
Problem
The uCloud web is in need of a redesign to improve the user experience, streamline navigation and e-commerce. The current web has a confusing menu from the information architecture point of view, too much content on some pages, as well as a chaotic e-commerce difficult to navigate and missing key features needed for a pleasurable buying experience.
The uCloud top menu has some information architecture issues. uCloud has 3 main groups of products: Google Cloud Platform (GCP), Google Workspace, and hardware (computers, monitors etc). On top of that, they have an important vertical, Google for education. The current menu has these 3 categories all mixed and from a user point of view it is confusing to first understand what uCloud does.
In this menu we first find that the mein 3 categories are not in the menu but some in the submenu, on the other side we can see some important information in a smaller menu at the top
Since uCloud wants to grow the e-commerce business since some of the products (mainly hardware and licenses) are typically bought online, the menu should reflect that with the help of some buttons well integrated into our mental models: CTA to the shop, and a dynamic card button that update when adding or removing things from the card.
In this redesigned menu we can see how the information architecture is more clear for the different products uCloud have since there is a hierarchy with the submenu.
Also we can find in the right a section with “my account” that displays information as well as a CTA to the e-commerce.
On the e-commerce side, all the product cards have a different style. There is no relation between similar products like licenses or laptops. The cards are completely full and it is difficult to understand the information.
The general e-commerce page is missing some key features like filters, a search bar, and more. This is making the users a really difficult and unpleasant buying experience that can drive to a high bounce rate and a poor customer conversion.
This are the different plans the image used does not give any important information, it is the same text that reads in the description (Google Workspace). The card does not give any visual explanation on what it is.
The new e-commerce site has not only a new submenu that lets you filter by the big groups of products but also a side bar where you can find the new filters and search bar.
The Vision
By simplifying the menu and adding a hierarchical submenu we help the users navigate the web more easily. Making it evident that uCloud sells online by adding a clear CTA in the top right we can drive lots of users that enter the web searching for something specific to the e-commerce.
Refreshing the whole shop with new and simplified cards we can deliver a more pleasant experience that helps the user go through the different products.
Finally, by rearranging the information on each product page, having the primary information at the top, and adding visuals the user can spend time on the product and make a good decision.
E-commerce
Main Categories
Top bar dedicated to the main category products you can buy in the e-commerce, wich filter directly by.
Side Navigation
A side bar that displays different and more specific filters like type and size, handy when you need specific features.
Search Bar
A top search bar in case the user knows exactly what he/she needs plus a “sort by” function.
Redesigned cards
Completely redesigned product card with key information, a CTA to directly purchase it and consistency throughout the different products.
Product Page
Header
At the header you can check high quality images, description and key features.
Detailed Features
In this section you can read more about the product features and solve some of the doubts the user might have.
Related Products
In case this product is not exactly what you are searching, a related product section is at the bottom to continue searching.
Configuration
If the product support it, from the product page you are able to configure the desire product as you want.
Technical Sheet
You can have access to all the technical staff that for many is irrelevant but for others is important by displaying the section with the arrow.
