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.
