Spencer Goad
Developer & Product Designer

Responsive to Members

Responding to user needs through responsive design

Original

Original "Member Compass" - featuring non-responsive tables

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.

Research & Design

Research

This project was a bit unusual in that it wasn't a direct user request. We had ideas to add new features to the Member Compass, but there simply wasn't room to add them. Depending on your permissions, there were 7 navigation tabs across the top and no room to add more even on large screens. On mobile, these tabs became icons that were not familiar to most users. I knew the percentage of our user base using mobile devices was growing, and any redesign meant it was time to think mobile.

I didn't want to just fix navigation though - I wanted to make sure the Member Compass really worked it's best on the most important functionality. I had conversations with a number of our customers and asked them - what's the most important thing members come here to do? The answer (possibly influenced by cash flow constraints from the COVID-19 pandemic), was "we want them to pay their invoices."

Clean Navigation w/Room to Grow

Clean Navigation w/Room to Grow

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 Pay

Easy Pay

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.

Responsive to  Members

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.

5
redesigned tabs
3
new tabs
100%
mobile friendly