Project Info

Client: Wanderift

Services: UI Design, UX Design

ProviderSoft Web App Redesign

LAST UPDATED: JUNE 03, 2019

image

About

ProviderSoft is an established SaaS solution for child behavioral professionals. The ProviderSoft team approached me looking for help with a web app re-design.

They were looking for an updated look that represented their brand, while at the same time simplifying the complex features of the app.



The Problem

ProviderSoft wanted an updated look for their web app, without straying from their existing layout structure.

The ProviderSoft team knew that the new look would need to be consistent with their brand guidelines, as well as help simplify and streamline the user experience. It was important to maintain the same structure as the previous design, but to give it an update look.

The web app functionality itself is quite complex, with endless possibilities for users. The re-design required that 160 screens in total be re-designed.

Customers most commonly used desktop to access the web app, so it was important that the designs prioritized desktop in this particular case.

They were also looking for some quick UX wins to help alleviate common usability obstacles.

Plus, this was an urgent issue, so they were on a tight timeline. We agreed on 1 month to complete the re-design, and finished ahead of time!



Requirements:
  • Simplify app complexity
  • Create more room for the user
  • Keep existing structure
  • Maintain brand guidelines


The Process & Solution

Since this app had so much functionality, I was super excited to work on simplifying the look and feel for users.

After taking some time to chat with the ProviderSoft team about the main problems the web app solves, along with learning more about its users, I was ready to roll up my sleeves and get started. For this project, my agency teamed up with another UI designer to help work on this project.

We were able to get the final deliverables sent and approved before the one month deadline.

After learning more about their customers and brand guidelines, I got straight to work and created an initial design mockup to help set the foundation for the other 160 screens. Using their brand color palette, along with a minimalist twist, I created a mockup screen and after a few tweaks (like modifying the avatar color) which took about an hour, we had a final mockup that would set the tone for the rest of the project!

One of the main challenges was striking a balance between simplicity and function. With so much functionality, it needed to be straightforward for users.

A major change involved the navigation menu: I condensed the original menu by moving the logo and menu items to the same bar, conserving space.

Once the initial mockup was finished (which took about 2 days), I partnered with my agency’s design assistant and we split up the tasks to build out the remainder of the screens (160 in total), maintaining the same structure but making aesthetic and usability enhancements. The whole project took 1 month total.

At the end of the project, in addition to the screen designs, I also handed over a CSS file with front-end development suggestions.


Iterations

After receiving feedback from the ProviderSoft team, we decided to make some modifications to the main navigation menu and logo.

Namely, the client was looking for a pop of color to energize the look of the layout. They also had a new logo variation to share.

I made the logo color brighter and resized it, while also making the user avatar placeholder initials more colorful. A "support" button was also added, to make it easy for customers to get help.


Before photo (prior to the redesign)


before


1st Draft

SaaS UI UX design


Final Product

SaaS UI UX design
🔍 View full size