MADISON WATER UTILITY

SAAS product redesign for Madison water utility online portal system.

UX | UI | PROTOTYPE

FIGMA

RAYNA UI

WHAT IT’S ABOUT

Most Madisonians have interacted with the Madison Water Utility’s interface to pay their bill. One time I went on there to view transactions, and I started to wonder how this could be made better and more efficient. This is where I came up with the idea for a redesign.

SOFTWARE

  • Figma
  • Figma Rayna UI Component System

SKILLS

  • UX design
  • UI design
  • Layout design
  • Typographic design
  • Communication
  • Copy writing

ORIGINAL ISSUES

UX

  • Overall layout
  • Inconsistent buttons and links
  • Scrolling required
  • Too many pages

UI

  • Inconsistent color usage
  • Busy aesthetic
  • Inconsistent font sizes, weights and types
  • CTA’s less obvious

USER FLOW AND SITE MAP

General user flow created for following steps:

  • Log in
  • Pay bill or schedule payment
  • Set up autopay
  • Manage account details for autopay setup
  • View consumption
  • View transactions
  • Log out

WIREFRAME

I created the wireframe in order to solve each of the following problems:

  • Each page is as big as one screen to reduce scrolling
  • Minimize number of total pages through consolidation
  • Maintain each page’s abilities while changing layout
  • Increase negative space to make call to actions more obvious for users

STYLE GUIDE

I created a small style guide to figure out best color combinations and a font palette to use. This was not intended to be in-depth, and instead more of a jumping off point. However, with this, I was able to ensure contrast accessibility and consistency throughout my redesign.

FINAL PRODUCT

The final SAAS product turned out different than the wireframe. Main change I made from the wireframe are:

  • Payment pages became pop out menus to reduce load times to have to go to a new page
  • Provided more options on the home page to show everything there right away
  • Implement a more intricate toggle menu to separate out transactions versus bills
  • Consolidate the nav bars into one main nav bar on the side

PROTOTYPE

A basic prototype is available through Figma to peruse. This is to better show how this design would function as a SAAS product, but is not intended to be fully functional.

Scroll to Top