With the design plan in place and the design system and standards ready to go, it was time to start the development process for this new UI. The approach was to convert and clean up the backend code and keep the functionality the same but update the look. This was a challenge because on one hand our users were used to using Aspire a certain way and when you're talking a business management software for multi-million dollar companies you want to disrupt their flow as little as possible.
Problem: Change is hard
I entered into Aspire as the first designer they had since starting the company 6 years ago. They knew they wanted a change but asked “where do we focus first?” I chose to start with the UI part of the product because a change in UI can be jarring enough. Although a lot of UX is intertwined with UI we planned to focus on UX later.
1. Iconography
Icons were not only dated but they were over-used and used to represent complex tasks and navigation elements. Following basic icon-usage best practices we replaced a large amount of icons with words and buttons.
2. Navigation
The structure of Aspire created layers of “pages” on top of other pages. The user would lose all navigation and would have to click a green arrow icon in the bottom left corner of the page to be able to navigate “back” multiple times to get to the navigation.
3. Filtering lists too complex
Here’s a great example of how UI can greatly influence UX. Lists are the backbone of the Aspire system and can be very long with a large amount of data. Filtering was clunky and required you to leave the list page, make the adjustments and save to return results. I decided that it made more sense for the options to be brought forth on the list page in modals that can deliver the results seemingly immediately and can be easily backed out of.
Explorations
We tested and explored many options for many parts of the Aspire redesign but here a few mentioned before.
Iconography
I chose an icon library that was closer to the material design style - flat and solid-filled. I was sure to use recognizable icons wherever possible and supported them with words in most cases.
Aspire is a large and complex product and so is its navigation. The above image is a section of the site-map I built in a white-boarding program. The research here lead us to really dive deep into simplifying the navigation UI as much as we could.
Navigation
User tests revealed having the secondary menu as a second drawer option would result in frustration and too many clicks .
Found a better icon library and added the secondary navigation to the global header area of each module or section.
Moved the logo into the drawer and kept the previous secondary navigation settings. This was the final selection.
As stated above, lists are what drives the entire Aspire system and some of our clients have lists that can potentially return over 5k rows of data. So, filtering lists and saving views is a heavily utilized feature that needed a little face-lift.
Filtering Lists
Design
The end-design resulted in creating over 1k pages, modals and popups all with a cohesive look and behavior. We replaced icons with buttons and words and opened up the navigation to be accessed globally. We removed the green back arrow and gave the user the ability to use the browsers’ back buttons for reverse navigation.
Outcome
After 6 months of planning and nearly a year and a half of designing and redesigning the project was launched to the users in batches during a beta period. This allowed for us to test and reiterate where we needed to ensure a working product that our customers had time to acclimate to before fully transitioning.
Overall, users were satisfied with the new look. Some were hesitant but after getting used to the new look and flow they were happy.
Reflection
Usability testing in the new UI will continue for months after the projects is complete. In retrospect, because I was the primary source of contact, standing in as product owner while also the lead designer, I would have liked to have been able to user-test designs and workflows prior to beta to help eliminate pain points.