Revloop

Ubersmith

Role

  • \ UX/UI Design
  • \ Competitor Analysis
  • \ Journey Mapping
  • \ User Research

Platforms

  • \ Web

Date

  • \ Aug 2020 - Jun 2022

Objective

  • \ Design a SaaS subscription management platform that is easy to use, and offers flexible subscription and billing services.
The Problem

Ubersmith is a SaaS subscription business management company. The team noticed their customers have been having a difficult time navigating their platform. Customers heavily relied on the support team for assistance to accomplish their tasks. 

Ubersmith hopes with its new SaaS Subscription Management platform "Revloop", it will make billing and invoicing painless for businesses, so that they focus on the important work of growing their business.

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.

My Team

For this project I was the sole designer on the team and I worked with the CTO, Director of Engineering, VP of Product, Director of Operations, Director of Services, and a Technical Writer throughout the design process. For developer hand-off I primarily work with the Director of Engineering, 2 software engineers, a web developer, and a frontend developer.

My Tools

Some tools I've used to help me with the design process was Figma for the creation of screens, components, and prototyping. Pen and paper for lo-fi wireframes.

The Process

I conducted some stakeholder interviews to gain insight on business requirements. Some things I wanted to gain insight on was: what is a subscription, management platform, what is different between this new product and the original Ubersmith product, what do they want to target as their end user, and what are some technical constraints I have. Unable to talk to direct end users, I discuss further with the support team to gain insight on what pain points our customers were experiencing, what sections required a lot of assistance, and what were their typical feedback.

After gaining insights and requirements I started with some competitor analysis. I looked into what Stripe, Chargebee, Recurly, and Zuora. I compared their features, what they are doing well, what we should do, and what their competitive advantage was that made them successful.

Then I looked at the information architecture with the Product team and discussed upon what actions or features the app should have at the main level. Theses functions should be brought to the front where it is more prominent to the users. I conducted a hybrid card sorting session with stakeholders to determine where each subcategory should be located.

I started mapping out some user flows afterwards, to map out what actions the users will take to achieve their goal. Then I created user flows for the main components of Revloop such as Product Creation, Subscription Creation, and Adding a Customer. I kept in mind what the competitors user flows were when going through the ordering process. From time to time I pulled inspiration from those to create an intuitive useable experience. By creating these user flows it helped us visualize a user takes to complete a task and helped us determined how complex we want Revloop to be.

Looking at the creation flows I realized that it might be too complex. I wanted to figure what features to keep and what features we should remove/save for later. We had a timeline to follow and we wanted to launch a MVP product early 2022. To help us figure it out I used a feature prioritization matrix to help the team determine what our core features are.

Before I started creating hi-fi screens and prototypes I met with the development team to get a better understand on what our technical constraints are. From those meetings I now know that we will be using the Ant Design Vue UI component library. Icons will be from Feather icons or Tabler icons. From there I started customizing the Ant design UI components on Figma so it matches our Revloop brand. Along with typography and colours, this was the starting point of our UI components style guide. As I gradually build out the hi-fi screens our components grew and grew, from atoms to molecules. Eventually we had a working design system.

After completing the hi-fi screens  wanted to test out whether or not these flows achieved what our users needed. I conducted an internal usability test with employees outside the product team. This helped us understand if this solves what users needed, if it was confusing or not, and I looking at the completion rates to see how success are they when it comes to completing the task (this quantitative percentage gave us an insight as to whether or no this flow was difficult to use). From the usability tests I refined our existing flows and added some additional notes before I handed it off to developers.

During developer hand-off the I would have a meeting with the dev team to walk through the flow with them sometime I would visualize it using a prototype and showcase the interactions. Then I communicate on a daily basis with the development team to ensure we are on the same page/there isn't any edge cases I've missed.

The Outcome

We successfully launched the MVP version of the Revloop app early 2022, along with our product website and documentation which I worked on as well. Our goal is to track KPIs on completion rates , and the adoption rates to gain an insight on how success the product is.