top of page
Banner 2.png

UX UI Design | Web App


A cloud-based B2B SaaS platform for subscription management and services

project overview.png

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.



Design Process

Design process.png
Design sprint.png

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.




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

Persona - Copy of Persona .jpg
Persona - Copy of Stakeholder.jpg

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.

Untitled - Frame 1.jpg

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.

Priority Matrix.png

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. 

Sitemap 4.png


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

Purchasing a product and managing subcription-user flow.png

Submitting A Support Case

Submitting a support case-user flow.png



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

Purchasing a product and managing subscription.png

Submitting A Support Case

Section 1.png

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

Space Logo.png

Initial Mockups



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

Key Findings of Overview page and product purchasing testing.png

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

Prototype iterations-old overview desktop.png
Group 10257.png

Key Findings of User Assignment Testing

Key Findings of user assignment testing  50%.png
Key Findings of user assignment testing 37.5 %.png
Key Findings of user assignment testing 12.5%.png
Key Findings of user assignment testing.png

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

Prototype iterations-old assignment.png
Group 10262.png

Key Findings of Support Case Webform

General issue webform 33.3%.png
General issue webform 66.7%.png
Key Findings of Support Case Webform.png

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

Prototype iterations-old successful message desktop.png
Group 10256.png


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.

outcome- product.png
outcome- user.png
outcome- support.png

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.



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