Manage Billing and Subscriptions

The problem at hand

Pride Places is aimed to help small businesses, that are LGBTQ+ friendly, a place to market and promote their stores. We want to help them concentrate more on their customers and worry less on expenses, marketing, and other business aspects that take away from their services.

How can we help business owners easily identify and manage their billing cycles? Can we make switching subscription plans more straightforward and hassle free where they can see everything at a glance?

The current designs makes it difficult to upgrade (or downgrade) their plans as it's hidden within "Active Listings", which isn't straightforward. We lacked a page to update or even manage payment methods used which was extremely frustrating while I was looking throughout the product. The time spent looking for these elements is precious time that could be used on the services the businesses offer. For mobile, the features listed in each subscription plan isn't built to compare between options.

This page can also use some modern UI, so let's try to change this!

Organizing my thoughts

As an intern, I didn't have a full understanding of our product yet so I did my own user testing on myself. Of course, there's some bias there, but doing this allowed me to find major issues with a few important areas.

I broke this down into 3 parts: Invoices, Manage Billings, and Update Subscription Plan. They all have to do with the billings sections so breaking them up helped me focus on each individual area and its' issues. I compiled a customer journey using information I gathered from using the product and research I compiled from other products that have billings pages and subscription plans.

Figuring out the flow

Using the customer journey as my base model and research of these features as reference models, I wrote down key elements I believe would improve our Billings page. From here I could decide what actions and features were crucial and beneficial and designed a sitemap based on these conclusions.

I wanted to ensure a seamless experience, especially with the Stripe integration that's provided. This particular area needed to seem like it's one product rather than simply throwing in Stripe on our website which is why I matched the "full page" design the integration uses.

Applying my thoughts and ideas

In my sitemap and user flow I broke this up into 3 flows, but here you'll see I first, focused on the main billings page. This is where everything is housed as it makes sense to keep updating subscription plans, manage payments, and invoices here. I had a few other designs I considered, but ultimately this worked the best to showcase and separates all 3 features.

Main Page

In the versions below, you'll see that I had difficulty ensuring each section didn't clash for attention, and had a hierarchy. This can be seen with the Subscription Plan and Manage Payment cards as I played with color in different styles.

Version 1 lacked any "oomph", although very simple/clean, the identifier was solely the branding color or reading the text. I wanted there to be a visual marker that said "This is what I am".

For version 2, I did just that by fixing the background color, but the contrast between the purple/white and purple/lighter purple wasn't conducive to reading. Both cards look almost identical with a slight difference in purple and that definitely isn't accessibility friendly.

Subscription flow

After clicking "Change Plan", users would be brought to the page below. As mentioned before, I needed to ensure the Stripe page following this worked seamless with our own designs which is why I decided to create a full page design. This also helps the user solely engage and compare the subscription plans in front of them without any other distractions. Like above, I show 2 iterations that differ in visuals and colors.

Version 1, I mainly worked on the cards and ensuring users can freely exit, toggle monthly/annually, compare plans, and show which plan they're currently on with a disabled button. This however, lacked Pride Place's personality and exude a friendly/safe environment.

In version 2, I added a few illustrations to bring in the friendly environment I mentioned, but wanted to make use of it by having her point to the cards. The illustration is also functional as it helps direct users focus back to the cards.

Challenges and compromises faced

Unfortunately, our main challenges as a startup trying to receive funding, is lack of resources and team members. With this, we work in 2 week sprints and often have to reiterate our designs within time constraints and work closely with developers while providing value in our product for users.

Sometimes things don't go to plan just like, the "Manage Payment" flow that was initially apart of this. While speaking with the dev team and CEO, they needed to do more research on obtaining user's payment information from Stripe so it's been put on hold.

But let's see what we do have!

Final Designs (for now)!

After some team feedback during our weekly demo meetings and few more iterations, a couple of things were changed:

• Subscription plan & Manage payment cards have icons as a visual marker to easily spot the difference and adjusted spacing in mobile view. (Each subscription type has their own unique badge)

• For the Invoices table, each invoice is "standalone" to show more separation between each other and help legibility when they're opened

• Subscription flow illustrations have been updated to better match our branding and more realistic to users updating their plans on a laptop

What comes next?

As a startup, we're limited in hands and are working on user testing the live parts of our site. There's a long line of features that are newly designed that still need to go through some basic user testing, so we had to put this off for now. To help combat this, we have plans to create flows and tasks for users that seem more realistic which will help us test multiple areas with a single user!

We'll need to fix any problem areas we find, but after that, it's off to developers to build and marketing to promote!

I've also worked on other new features, updating the website to improve usability, and working as a team lead for Pride Places :)