The project's hand-off designs and prototyping map.
Rocky Mountain Bottled Water - Littleton, CO. RMBW provides water solutions for both commercial and residential customers. With an active customer volume of over 7,000 accounts, they are considered a leader in Colorado's water industry. To better serve their rapidly growing customer base, the company invested in their first ever fully functional online user portal, where customers can manage their deliveries, pay their invoices, and manage their account settings.
Rocky Mountain Bottled Water, a residential and commercial water and coffee provider based out of Denver, Colorado, launched their new user portal in the summer of 2020 and a wave of issues and complaints began to flood in. I was hired as a freelance UX and UI designer for the project, and my first task was nailing down what the actual problem was.
My first impressions using the portal were interesting, to say the least.
Immediately problems started appearing for me, some obvious others not so much. Here were my beliefs about what the problems were.
In order to understand the issues actual users were having, I began gathering feedback. I created an invitation to offer feedback, which we sent to current customers (who had been with the company for over 5 years- CEO's request). In the invitation, I asked users to sign up (if they hadn't already) and complete a list of tasks, taking note of anything that stood out to them or came to mind throughout the entire process. A link to a Google Form was included, which we requested they fill out as soon as they finished. I then created a research notes board where I organized the feedback from three users from different key demographics in order to find pain points and strengths from the current application.
Question 15 asked user's to summarize their experience, and let us know how it could have been improved. The majority opinion from our 3 focus subjects included the need for better navigation/organization, to make the main features used most often easily found.
Questions 3 and 10 asked users to describe their experiences trying to view their delivery schedule and print their delivery schedule. No one was able to print their schedule, and only Jenny was able to find their future schedule.
The other pain points for our test group included trouble viewing and printing invoices, filtering for past-due invoices, the overall "look and feel" of the product, issues with onboarding (requires users to have their account number handy), and editing account settings.
The two strengths were surprising (adding a card to Auto-Pay and editing the delivery address). These surprised me because stakeholders at the company stated most users were having trouble with Auto-Pay (less than 30% of users who had logged in already added an Auto-Pay card), and editing a delivery address was also a pain point for one of our subjects. This told me there were no slam-dunks when it came to current strengths.
After wrapping up our survey, organizing the results, and focusing in on three key users due to their demographics, we were able to confirm what the actual problems were.
I decided to start from complete scratch for this redesign, given the extremely poor ratings the current portal received and the UI design being extremely outdated. I began wire framing screens in order to begin to solve the problems laid out above.
The first problem to solve was onboarding. I cleaned up the UI, and added prompts as placeholders explaining what each field requires and where to find their account number quickly. We also wanted to keep it on brand with RMBW's website, so the background was taken from the website's main hero background so user's feel like they are still in the same company's portal. All of the UI was cleaned up as well, which would go on to serve as our style sheet for the rest of the portal.
For the portal home screen, we added in 'quick action' links that instantly take users to the top 4 features of the portal. If the user doesn't have auto-pay enabled, a red warning banner shows up at the top of the portal on their home screen explaining why they need to fix that issue with a button that takes them into account settings.
I also added navigation to the left sidebar which takes users to the main feature screens. This navigation is fixed and does not close, as one of the pieces of feedback we received from the old portal was the hamburger menu was an extra step to get to where users wanted to go, so we scrapped the idea of hamburger navigation.
The deliveries screen was completely redesigned to easily allow users to see their schedule/past deliveries, add their schedule to their calendar, and change their address.
The new invoices table has everything RMBW's users need right at their fingertips. They can easily print, download, or email their selected invoices. They can pay their selected invoices instantly, and they can filter invoices now by their payment status!
Here is a single invoice screen, much improved over the open in new tab receipt PDF view method of the current portal. Users do not have to leave the portal to view invoices, and they can email, download, print or pay their invoice or move back and forth between invoices with easy bottom navigation.
Account settings, payments, and every other screen was redesigned as well. The entire portal now has a brand familiar UI, clean and easy navigation, and all of the features front and center for the users.
We had to do almost all of our user testing remote, due to Covid-19. We sent out a similar invite to a smaller selection of customers this time as to avoid too much public knowledge of what we were working on.
Overall feedback was extremely positive for the new portal! Out of all of our users that tested it (over 30), we only had issues with 3 users. Those issues were browser related though, as 2 users tried testing it on mobile (which had not been designed or built yet - mobile designs were out of the companies budget). The other user had issues with Figma loading everything too zoomed in, which we determined was a Figma technical issue.
Stakeholders did have some requests for changes, such as the color of the UI (which was originally a lighter shade of blue) and the original design for the home screen did not include a banner asking users to set up auto-pay. The first version also did not require users to add their account number during onboarding, but due to system requirements for user management we needed to add that back in. To lessen the confusion from that pain point, however, I added the placeholder description letting users know the quickest way to find that number (it's located at the top of their invoices).
There will most certainly be areas of improvement based on our user feedback and testing going forward into the future although we were able to make all of the small bug fixes needed to present the MVP to the software company. RMBW is currently waiting on a quote to re-build the portal, and waiting to see if MangoWeb will be willing to make the suggested changes and updates required to launch.
.svg)
