Builder Portal - Simplying Gas Installation Requests
Team: 2 Developers, 1 Business Analyst, 1 UI/UX Designer (me ✌️), 1 Product Owner, 1 QA Tester, 1 Network Administrator
My Role: Lead Designer(User research, Wireframing, Interaction + UI Design, User Testing)
Note: This project has two separate user roles. The Company Administrator and The Customer. Because one role is strictly internal, I will only be describing the customer flow with limited visuals. Please contact me for further details.
Problem
Construction companies in the city of Houston request gas service line and meters using the Builder Portal. This application was built over 10 years ago and needed an update. On the customer side, the portal did not provide them enough information about status and the request forms caused numerous errors. Users also required multiple usernames to access different companies and registration required calling customer service and possibly being put on hold.
Solution
We created a revamped version of the portal for phase one which included updated UI, implementation of new requested features, and a technical upgrade. This version gives users more control when registering and switching between the companies they work for. It also provides status updates and organization abilities. The new version has reduced customer calls by 32%.
My Process
Gather Information
The project began with initial meetings with customer service representatives who gave an overview about the entire process from receiving a request to completing it. I noted what customers complain about, what the represenatives would love to have to improve their workflow, and what is working well with the current application. From here, the Product Owner, developers and I all discussed what was feasible within our budget, timeline and the platform we will be building on.
Research Methods
User Interviews
To gather additional details from the kickoff meetings, I scheduled interviews with 5 customer service representatives. It was crucial to get the perspective of the individuals in this group since each handled customer calls with unique situations and problems. During these calls (remote due to COVID-19), I had them describe their process depending on what task they were responsible for.
Additionally, I collected information about common questions from customers
"Status says 'approved' but the order hasn't been completed, what is going on?"
"What is the timeline for when my order will be completed?"
"My order was rejected and I have no idea why. Can you give me more information on the problem?"
Affinity Mapping and Surveys
To gather insight from the customer point of view, I compiled survey data that had previously been collected from customers. The commentary was organized using affinity mapping. With this method, I found multiple patterns of pain points as well as features the customers enjoyed. I found that about 43% of the comments were very similar. After filtering the feedback and removing suggestions that were not feasible for the first release, I found opportunities to improve the following:
- Status updates are misleading.
- Customers must call or fax in order to get a login and password to access the Portal. Depending on call volume, this can take some time and delay projects.
- Forms are submitted multiple times due to missing information.
- When forms are rejected, customers must fill out all the data again.
- Difficult to use on phone.
The Redesign
For the customer role, we decided to focus our redesigning efforts on improving the experience of the following features:
- Registration - Allow users to create their own login and select the builder(s) they work for.
- Work order table organization - filters, sorting and organizing.
- Improve usability of request form including saving information.
- Making the portal mobile responsive.
Registration
To improve the registration experience, we leveraged existing technology to build a new process.
The user can now register using their email address and set up their own security questions. Previously, a form needed to be faxed/ emailed and processed by one of the representatives.
For the design, I followed the steps required by Customer Service and our new sign-in technology to create the new user flow.
In the new flow, the user will register with their email and select their builder at registration. Since there are multiple builder companies with the same name, the user will have the opportunity to verify they are selecting the correct one.
Old flow
New Flow
To register additional builders, users will have the option to add another company once their account is approved. They are also able to switch between companies easily.
The user also has the option to view all their builders in their profile.
Work order table
To improve visiblity, we re-worked the existing statuses and added a few more options. Since each order is different, the amount of information available at any given time is limited. However, the new statuses do provide more accurate details.
The UI was updated to remove harsh red buttons and clarify some of the actions along with adding new ones.
Old work order table
New work order table
Form Submissions
The form was kept with the same fields but re-designed to follow a one column flow (except for logically related inputs). The enhancement we focused on was making it editable and allowing the use of pre-populated templates. Previously, if the form was rejected, the user would need to fill out the form from scratch and re-submit. Since customers/users frequently work on construction sites of large neighborhoods where multiple work orders are needed with similiar details, we have included the ability to save and reuse templates.
Old Form
New form
What I learned
This project brought many lessons learned. It was the first project that was completed completely remote due to the COVID-19 pandemic. The biggest takeaway was learning to be flexible and adaptable to changing requirements. What began as only a "technical upgrade with UI improvements" evovled into a very large project that introduced new features that each required their own "UX process" to fit into the current application.
Note: I was also responsible for building the pages using HTML/CSS and JavaScript.