UCD for SaaS Portal


This company was a SaaS that had a customer portal nobody had redesigned in many years. They were starting to lose out to competitors and hired me to come up with fresh interaction design.

The client already had personas. We did a competitive analysis, IA for a new portal structure, interaction design for every screen of the portal, and user testing.

All wireframes and prototype screens are in medium fidelity. There is no final visual design shown here.

No mobile version was needed since this was a system nobody was using from tablets or phones.

This project is from 2015. The company was acquired in late 2016.

Some of the Process and Deliverables

Competitive Analysis

One page from our competitive analysis report with some high-level commentary. This was the main competitor they were eyeing, but even this company’s site didn’t seem that amazing or modern.

Proposed IA and Hierarchy

The portal that had been barely touched in nearly 10 years needed a fresh hierarchy and menus. For years, when they had something new, it had been slapped on without huge thought to the customer experience. This is why we called for some items that had been menu choices to now live elsewhere, such as being reports on the reporting page.

Interaction Design – Billing Plans

The system had a huge amount of complexity and flexibility surrounding the billing of packages, promotions, items, and subscriptions. This was one of dozens of wireframes showing a client’s offered billing plans.

This is a screenshot of a prototyped page.

Interaction Design – Autobilled Customer

An individual record in this system had a huge amount of relational data. Customer details, card on file, what they purchased, which billing plan, transactions over time, account credits, and notes.

We decided that for this long page with so much info, so many actions, and so many important sections, the best design would be to create a “panel” where all the actions are. This way, a customer would not have to scroll the whole page to find an action they were looking to take (which might be contextual to a module on the bottom of the page).

The action panel is also pinned to the side, meaning it stays in place while the rest of the page scrolls.

This is a screenshot of a prototyped page.