Background
Though an MVP was already in the hands of target users, it hadn’t been built with a UX designer guiding the process. As a result, there were many documented usability issues. The client brought us on to redesign core workflows, navigation, and the visual design of the application.
Process
We worked with the product team for nearly a year, and took a user-centered approach. Communication would be key to keeping our team aligned with the client’s goals. Below I detail some of the ways we ensured that our adjustments were aligned with user goals as well.
1. Discovery session with the product team.
We met with the client’s team for a day to go over the application, their organizational goals, and the product’s userbase. Fortunately, the client had been gathering feedback for some time and we were able to review the information they had gathered.
2. Design audit of the existing features and interface.
This would be included in a report to get on the same page with the product team regarding the scope of work and opportunities for improvement.
3. Conduct 11 greenfield user interviews.
There was one particular feature for which the client noted very low engagement. I wanted to ensure that we could better understand how their users conduct their work in order to better understand out how this feature fits into their workflow.
Ultimately, this approach revealed that the feature was not being used largely due to a key limitation of the data. We learned that users typically got this information from internal teams as they needed a level of granularity and customization that was not currently possible. Despite the initially disappointing findings, it was a win to both the client and our team to be armed with this information. This feature was ultimately cut from the scope of work and in its stead we prioritized enhancing other areas of the application.
4. Design revised workflows and conduct small-batch usability tests.
As we were going to suggest considerable changes, we wanted to ensure that our changes made sense both to existing users of the application and potential users. I redesigned workflows as wireframes using Sketch, and hooked them up as prototypes in Marvel. I wrote a testing script and one of my teammembers then conducted tests with several users. The findings led us to make several changes to our thinking before we applied the new designs.
5. Overhaul the visual design and UX of the application elements and document changes in a style guide.
One of the biggest issues with the current application was inconsistency in the application of visual design. Elements would appear and disappear depending on availabilty, there were no focus states, color was frequently used and jarring, and color contrast was low.
I introduced new UX and UI patterns to elements like data tables, buttons, lists, and navigational elements, bearing in mind a11y. I then documented the changes in a Sketch style guide for the client and future development teams to review changes against.
6. Implementation of the designs.
I worked with the development team directly on creating reusable components in a React application, and was also responsible for a11y and final polish of the various elements on the screen.
This work was completed fairly recently, but the client has so far shared positive feedback from users with our team.
