Responsive to Members

The Challenge

Sometimes, as software evolves, early designs have to be revisited. The functionality may work well for a while, but as new features are added, a user base grows, & technology changes it becomes necessary to re-evaluate. The "Member Compass", or member facing account dashboard, of Novi AMS was a great example of software in this situation. It had started with just a few features requiring minimal navigation & was designed primarily for desktop use. A growing feature set and an increased mobile user base necessitated a new and responsive design.

My Role

For this project I would be both designer & developer. I started with design, research, and mocks, then later moved into implementation once the initial design was approved.

UI Design

For this project, I went straight to high fidelity mocks in Figma. I tried a few different approaches to navigation on both mobile & desktop designs. With these mocks in hand, I reviewed them with a panel of our existing customers & our product owner. A clear favorite emerged in a left hand column for navigation with the content taking the space on the right. On mobile, this navigation would collapse into a dropdown navigation at the top of the screen.

The new navigation would create some problems for existing tabs - some tabs with tables of information wouldn't fit well inside the now more constrained space. For a solution here, we introduced a "card" style detail component that could be used in place of tables. This new component then would get distributed out to all the tabs that were previously just tables AND it would be responsive to clearly display all the important information on mobile.

Easy Payment

What about that "most important thing" we asked of our customers? They wanted to collect payment on invoices. This feature technically already existed - users could login and view a table of all their invoices, check a box next to each one, click "Batch Actions", then click "Pay Invoices". I knew this was too many steps - plus it was hidden behind a button that was only enabled after you selected your invoices. We needed an all new approach.

I created a design that moved away from the idea of paying a specific invoice. Instead I focused on paying their full balance or just the membership dues. I pulled a quick surprise demo and pitched the idea to our customers at the end of another meeting. The response was immediate - they loved it.

On the engineering side - the implementation was fairly easy. We already had the data, it was just a matter of using it in a slightly different manner. Beyond this initial change, we also quickly followed with a new feature to allow saving of credit cards to user profiles to make it even easier to pay.

Learnings

One of my biggest takeaways from this project is that sometimes a simple reframe can make all the difference. I started out trying to make it easier to pay invoices - but a reframe to focus on an outstanding balance was the breakthrough we really needed. As impactful as the redesign was, we also quickly learned that better isn't always good enough. We had a number of members getting confused by our messaging saying their balance was paid when they didn't have a membership. We had to revisit some messages and tweak some wording just a few weeks later to make things more clear and to encourage non-members to setup their membership first. We landed on a brand new Member Compass that everyone was excited about - and most importantly, yes, more users paid their invoices.