web portal navigation
Date. 2021 - 2022
Format. Web & Responsive Mobile
Role. Primary UX and UI designer | Lead in research
Context
Our property management platform has grown significantly in both quantity and types of features. The original way of managing these feature was to add a link to the growing list in the side navigation. There was no particular organization or rationale to where the features we placed in the list. More importantly, there were no plans to future-proof or address scalability of the navigation. Out of necessity, the task of taking a deep dive into the site map and design a better organized, thoughtful, and scalable navigation was born.
My role in this project was the leader in research and primary experience and interface designer.
Research
Before moving a single feature, a baseline for the navigation needed to be established. The first task was looking at the current usage data, feature by feature and the path the user took to get there (was it the link in the side menu, a quicklink in the header, somewhere else?). This provided a clear list of which features were most frequently used as well as the preferred way of navigating the site.
Next was to address scalability and look at how best to group features. After researching best practices for our type of site, I decided we should stick with a left side navigation that incorporated mega menus. We just needed to figure out how to organize the features in an intelligent way that would allow us to grow while allowing the property manager to quickly and easily find what they need. This is where a card sorting test worked very well. This test gave participants a list of all of the features and had them organize them into groups that made sense and give each of their groupings a label.
Crucial to this test was to hear from those who actually use, or at least understand property management. While most people are familiar with the tasks related to rental apartment living, very few have a working knowledge of managing a rental property. With this in mind, we ran two separate card sort tests. One with property managers and on-site staff who frequently interact with our (and other) property management platforms and one with internal employees that frequently use the product. The next step was to compare the results with our organization plan.
The final topic to explore was the findability of features. Did our new groupings of features increase the speed in which people navigate to certain pages? Are we seeing traction and use on features that previously were under utilized? Before creating the designs for the navigation I ran a few tree tests to see if people could find a feature if they were only presented with the top level categories. Also, did they find it on their first try, and if not, what was the path they took to get there?
Initial Design
Once there was a good plan in place for the structure of the navigation, it was time to get some LOFI design work going. I knew scalability was top priority. I wanted a mega menu that could house all of the current features while being flexible to accommodate future features. This is also prime real-estate to house other things like product highlights, descriptions, and even someday adding in search capabilities.
Challenges & Pivots
As smoothly as we wanted implementation to go, a few concerns were brought up part way through. The first was in regards to functionality. The question was brought up of whether a user would find the navigation if they have to hover over it to expand out from just a vertical bar of icons. While I was confident in it being an intuitive action, this was evidence I needed more data and proof to back-up this design decision. Fortunately, a few user tests through Usability Hub and some client interviews showed the findability of the "hidden" navigation was not an issue. This was a reminder to continue the due-diligence and have relevant data and best practice examples to back up my design decisions.
Final Design
The final design improves the navigating experience for property managers by grouping features into relevant categories. It also increases some feature usage with the new arrangement making them more visible and easily accessed.
The new design is also a major improvement for the business as it gives us room to grow and scale. Also having a flexible design opens up lots of opportunity for types of content to include in the future.
