top of page
UX UI Design | Web App
SPACE CLOUD
A cloud-based B2B SaaS platform for subscription management and services
Project Overview
Space Cloud is a comprehensive cloud-based platform for subscription management and services. It streamlines the management of subscriptions, services, support, payments, and user-related tasks. It aims to provide a unified hub for customers to efficiently oversee their subscriptions and related activities.
My Role
-
UX Principle
-
UX Lead
-
UI Designer
The Problem Statement
Many software companies guide their customers to various portals to access purchased products or services. However, this scattered approach prevents customers from conveniently managing all their owned products in one place, resulting in a suboptimal user experience and operational challenges for the company in handling customer business service providers.
DISCOVER
Design Process
User Research
Interview questions were focused on understanding how target users discover and subscribe to products and identifying the primary pain points and challenges users may encounter when managing their cloud services and subscriptions. The participants include product users, billing managers, and stakeholders.
Users find it is difficult to track the products they’ve purchased in one place
Users feel there is a lack of communication for support, updates, features, etc
Themes & Insights
Competitor Analysis
I focus on the missions of priority I organized from the user interview and looked into 4 similar companies which have Saas and cloud management. I picked 5 features to analyze.
DEFINE
Persona
Creating a user persona with their insights helps me understand their needs, goals, and behaviors. I focused on the product user and stakeholder to understand their different views when they’re using the platform
Customer Journey
After assembling users' experiences in the interviews, I compiled them into 2 series of actions under self-service and sales service with user thoughts and emotions to create a narrative. Focuses on an aligned mental model and shared vision.
Design Goals Approach
By setting HMW questions, we've defined the goals for designing solutions and prioritized them in the Priority Matrix.
HMW make customers feel there is onboarding support for product adoption
HMW create efficient navigation to make customers find their needs easily
HMW track and view the products customers purchased
HMW communicate quickly from Space support and updates
-
Implement a user-friendly and intuitive navigation system that logically categorizes product, service, and support options.
-
Develop a centralized dashboard to display all purchased products and subscriptions in one place.
-
Integrate communication channels within the platform, such as a chat or notification system, to enable users to receive timely updates, support, and announcements. Implement a feedback mechanism to gather user input and address issues effectively.
Site Map
The creation of the site map is a crucial step aligned with our design goals. It serves as the blueprint for organizing the information architecture, ensuring that the solution is structured logically and intuitively.
IDEATE
User Flows
Creating user flow helps me to know how many steps of pages to complete a user’s goal in an efficient way. According to the affinity map, I took users’ needs and goals to convert them into 2 prioritized key user flows.
Purchasing A Product And Managing Subscription
Submitting A Support Case
PROTOTYPE
Wireframes
As refined with the study of information architecture, sitemap, and user flows, I developed the sketches into wireframes, a visual guide representing a website.
Purchasing A Product And Managing Subscription
Submitting A Support Case
UI Style Guide
While creating the user interface, I use light grey and white as the background and royal blue and denim blue on the icons and buttons to represent the brand attributes which are reliable, stable, trustworthy, and intelligent. I also ensured the contrast ratios of at least 4.5:1 by the WebAIM Contrast Checker.
Design System
Initial Mockups
TEST
Usability Testing
I set up moderated remote usability testing in Maze and conducted it over Google meet to evaluate user flows, features, and navigation.
-
The Usability Testing of Workflow:
Overview page & Product purchasing and user assignment
Support Case Webform
-
Participants:
10 people, including secondary account owners, team managers and product users
Key Findings of Overview Page And Product Purchasing Testing
Overview and Products Page Iterations
Streamline page content, create an intuitive interface, allowing users to quickly access information and easily find the necessary portals.
-
Simplify billing content and only keep important upcoming billing
-
Streamline widget layouts and emphasize crucial areas like "Get Started with Space Cloud."
-
Add navigation for purchasing products in the product update area to make it more intuitive for users
Key Findings of User Assignment Testing
User Assignment Prototype Iterations
Make instructional messages clear
-
Revise the instruction and increase the font size and weight of the keywords and related link to make the instruction prominent
-
Label the information of user assignment and billing separately to read easily
Key Findings of Support Case Webform
Support Webform Prototype Iterations
Provide clear and prominent information
-
Add a specific reply time in the acknowledged message
-
Increase the font size and weight of the keywords and related link to make the instruction prominent
-
Label separately the successful messages and the navigation of viewing all submissions to read easily
Outcome
The final usability testing results show that there were significant improvements in the user experience for the product purchasing process, user assignment feature, and support case webform.
These results demonstrate that the changes made to the UX design were highly effective in improving the user experience for all three features. The improvements in duration, success rate, and bounce rate indicate that users found the product purchasing process, user assignment feature, and support case webform easier and more intuitive to use in the final tests.
LEARNING & TAKEAWAYS
As I completed the project, I learned a lot about cloud systems and management. Here are my key takeaways:
Plan usability test ahead
-
Usability test is an important process to understand if designers created functional and practical products for users. It should be engaged as early as possible.
-
Incorporating multiple rounds of testing into design iterations can bring products closer to an ideal state.
Users' priority and friendly
-
Creating the products from users’ perspective. I would imagine I was the user and ask a question myself what it’s the best user experience on every page of my design, is it easy to understand where to go next from here? If not, what should I improve?
Straightforward and simple messages
-
People's attention span is only around 8 seconds. How to send understandable messages and designs to users in 8 seconds is principal to product design. The messages and designs should be straightforward and simple
bottom of page