Revloop - a SaaS subscription management platform that is scalable for any business type.
UX/UI Design
Design System
Brand Identity
User Research
Platform
Web
Year
2020 - 2022
Objective
Ubersmith, a company specializing in SaaS subscription management, is developing a new platform named "Revloop". This platform will prioritize user-friendliness and provide customizable subscription and billing options.
What I worked on
As the only designer, my responsibility includes designing the brand guidelines, the Revloop app, the product design system, the marketing website, and the documentation website.
My Team
I worked closely with the CTO, Director of Engineering, Director of Engineering, VP of Product, Director of Operations, Director of Services, Technical Writer, and the Dev team (two software engineers, a web developer, and a frontend developer).
In early 2022, we successfully launched the MVP version of the Revloop web app, website, and documentation.
Discovery Kickoff
Stakeholder interviews
To better understand the business requirements, I conducted stakeholder interviews to gain insight into what is a subscription management platform, the differences between this new product and the original Ubersmith product, who to target as their end users and any technical constraints.
Since I was unable to speak with end users directly, I sought input from the support team regarding our customers' pain points, areas in need of more assistance, and their common feedback.
The target demographic would be startups looking to find a platform that can help manage their customer accounts and billing automatically. The end user would be a CTO or Business analyst.
Defining the MVP Product
Competitor Analysis
To differentiate ourselves from the competitor, I conducted a competitor analysis on Stripe, Chargebee, Recurly, and Zuora to compare their features, identify their strengths and areas for improvement, and determine the competitive advantage that led to their success.
Card Sorting
I worked with the Product team to review the app's information architecture and identify which actions and features should be given priority at the main level. Together, we made sure that these functions were easily accessible to users. To determine the location of each subcategory, I conducted a hybrid card sorting session with stakeholders.
User Flows
I started by creating user flows for Revloop's main sections: product creation, subscription creation, and customer addition. These features are crucial to the platform. To gain insight into how to tackle the problem, I looked at our primary competitors and other products for inspiration. User flows were developed to understand the steps a user takes to complete a task and to determine the level of complexity we want for Revloop.
Feature Prioritization
Reviewing the main flows, we realized that it might be too complex to build due to the time constraints for our planned MVP launch in early 2022. With this in mind, I decided to determine which functions we should prioritize and which ones we should postpone for a later date. To help us in this decision-making process, I used a feature prioritization matrix to assist our team in identifying our essential features.
Design Process
Design System
In preparation for high-fidelity screens, I met with the development team to better understand our technical limitations. From these meetings, I discovered that we will be using the Ant Design Vue UI component library, and Feather icons and Tabler icons for our icons. With this knowledge, I began to customize the Ant Design UI components on Figma to align with our Revloop brand, including typography and colours. This customization served as the foundation for our UI components style guide, which grew from atoms to molecules as I built out the high-fidelity screens. Ultimately, this resulted in a fully functional design system.
Usability Testing
Once I finished creating the hi-fi screens and prototypes, I conducted an internal usability test with employees who were not part of the product team to determine if the flows met our users' needs and if they were easy to understand. I also analyzed the completion rates to gauge the level of success in completing tasks. This gave us valuable insights into the usability of the flows. Based on the results of the test, I made improvements to the existing flows and added some notes before passing them on to the developers.
Dev Handoff
When handing over a project to the development team, I usually schedule a meeting to go through the flow with them. To help them better understand, I may create a prototype and demonstrate the interactions. I also make a point to communicate with the team daily to ensure we are aligned and to catch any potential issues that I may have overlooked.