City of Dallas ePay | Evan Russum

Overview

As part of my internship with the City of Dallas I was tasked with evaluating and redesigning the city's utilities payment portal.

Overall, the design took around 2.5 weeks.

Due to the quarantine, access to research materials and users was limited. I relied on existing design principles along with the design of other city's payment portals to support my redesign.

Goals

Decrease the amount of time users spend scanning the interface for targets.

Increase interface aesthetic, brand consistency, and availability.

Original ePay Site

Registration

FAQ

Account Activities

Mailing Address

Auto Pay

Evaluation

Original Site

Without the ability to gather requirements or any provided documentation, I began by evaluating the ePay site completely. I concentrated on its organization, consistency, and how the site lined up with the assumed user's mental model.

Based on my evaluation I concluded that:

There was no consistency with the other city's websites.

The information architecture made it hard for users to identify relevant content in an efficient way.

Small font and large blocks of text decreased legibility and readability.

By not having a way to pay by mobile phone, the site is ignoring how users prefer to make payments.

The Problem

Considering my evaluation, I decided the main problems I needed to solve for were improving the organization of content in way that allows users to easily scan for relevant information, add design features that aligned with the city's branding and homepage, and create a mobile version of the site that allows users to complete payments from their phone.

Ideation and Wireframes

Organization of Content

After examining the content, I was able to establish themes and categories that could be grouped to provide less noise and better navigation.

I separated the login page into four distinct sections: login, sign-up/registration, new service, and help. This allows users to easily scan for their intended goal immediately.
For the registration page, I removed redundant instructions, separated content into login and account details, made the form consistent with user's mental models, and provided an example of where to find their account information.
The FAQ page had confusing tabs that needed to be explained and very little organization. I removed the tabs and organized the content so that main topics could be easily scanned and expanded to reveal more specific topics.
Once logged-in the users originally had navigation on the left displayed vertically. I changed it to top navigation and combined "Bank Accounts", "Credit Cards", and "Auto Pay" into one "Bill Pay" category. Also, I combined "Mailing Address", "Notification", "Change Password", and "Move-in/out" into the category "Account Details".

Login
Registration
FAQ
Account Activities/Navigation
Account Details
Bill Pay
Mobile 1
Mobile 2

Final Design

The final design uses existing design principles and information architecture while keeping functionality basically the same. I tried to keep the theme and design as close to the city's homepage as possible. The mobile design is consistent with the desktop and offers users the ability to pay on their phone. (Built using Adobe XD)

City of Dallas ePay Portal (Spring 2020)