project overview
Redesign the information architecture of an real-time dashboard
Company
Aquila Clouds is a cost management platform for Cloud applications (AWS, Azure, GCP).
Skills
Information architecture
UI design
User testing
Prototyping
Role
Lead product designer
(team of 6)
Timeline
7-week sprint
the problem
A complex navigation system users didn’t understand
After defining the scope with the client, we were tasked with redesigning the navigation system of the site and visually improving the “look and feel” of the product to fit the new ethos.
Our challenge was to take a product that’s complex in nature and reduce the learning curve for new and pre-existing users.
the solution
Simplified the information architecture to help users focus on critical information
The goal of Aquila Clouds is to present real-time data quickly and clearly. We designed a robust 4-level navigation system that's future-proof and scalable.
We achieved a 100% completion rate (5/5 users) for our primary success metric — users can navigate through the 3 primary levels of the new navigation system.
the constraints
Focused solely on the information architecture due to time constraint
Due to a 7-week time constraints, our team solely focused on the redesign of the information architecture. Therefore, in the images below, the cards and graphs are not designed. The specific focus was on the information architecture and the navigation design.
• • •
final deliverable
An clear and concise navigation system
In a 7-week sprint, the team delivered a redesigned information architecture that provides users the ability to see both from a high-level viewpoint and microscopic-level of each Cloud service. During our usability test, 100% of users (5/5) successfully navigated through 3 out of 4 levels.
• • •
• • •
research
Designing for individual contributors
The research team conducted 5 usability tests with people within our persona — individual contributors (site reliability engineers, dev ops engineers, and system administrators. This was a strategic decision on the client side to focus solely on individual contributors instead of executive-level operators.
• • •
usability testing
3 areas of improvement discovered
With the help of the research team, we conducted usability testing with current users and people within our targeted persona. The findings yielded from each interview were then synthesized and prioritized by the most important users' needs tied to business capabilities.
Top 3 findings prioritized:
  1. Redundancy in sidebar tabs that caused confusion among users
  2. Users desired more Cloud services (currently, only providing AWS service)
  3. Users felt lost on the site, they didn't know where they were after navigating around
information architecture
Re-categorized and bucketed content for SREs
After the research team created a content inventory list with all the pages, they discovered that there were overlaps in information and content available on each page. As a result, we decided to create a more robust navigation structure with 4 levels of navigation opposed to 2.
  1. Cloud services
  2. Technology categories
  3. Individual items of technology categories (level 2)
  4. Visibility and action categories
user interviews
A recent update can spark a vital business decision
One major takeaway from this project — interview more users.
I initially relied too heavily on client-provided information and market research. In the process of wireframing, I realized I was designing “in the dark.” I hadn’t understood the user and their needs as much as I had considered the business goals.
Within 2 business days, I interviewed 5 people within our target persona — corporate/business development, equity investment analyst, and investment banking. Essentially, people who tracked multiple companies to make business decisions.
These interviews yielded immensely valuable information that the client had not discovered yet. I used a spreadsheet to analyze and track responses by interviewee and question. This led to a more organized and efficient affinity mapping session and a list of prioritized findings.
• • •
• • •
design
Creating a clear hierarchy of information
With the updated content inventory list, the design team worked on multiple iterations for each level of navigation and decided between a 2-column grid and a 3-column grid.
grid system selection
Defining a consistent layout to achieve consistency and organization of information
We explored 2 options for the card layout of the dashboard. It was important to reduce cognitive overload for the user as the contents of each card will contain complex and important metrics affecting their real-time cloud operations.
3-column grid
This is how Aquila Clouds originally set up their page layout with a 3-column grid. With this layout, users can view more information initially without scrolling to see more.
2-column grid
This option emphasizes the information inside the cards. The original layout felt cluttered and decreased visibility of information.
2-column grid prevents cognitive overload
The goal is to provide users with clarity on their cloud performance. Because Aquila Clouds is presenting real-time changes that update by the second, we wanted to make sure the users saw the information clearly. If we had chosen the 3-column grid, users could feel overwhelmed with amount of data in front of them.
navigation design
Designing a simple user experience
After defining the inventory list, usability testing, and competitor research, we designed a navigation system that focused on two things: providing users with clear bucketed information and allowing them to know exactly where they were when moving through the site.
  1. Cloud services
  2. Technology categories
  3. Individual items of technology categories (level 2)
  4. Visibility and action categories
Level 1 navigation
As we overhauled the navigation system, we incorporated new Cloud service offerings that the client recently added to the product.
Cloud services:
  • AWS
  • Azure
  • GCP
Level 2 navigation
Worked with the client to narrow down 16 items in the original level 2 navigation system to define technology categories.
Technology categories:
  • All Overview (aggregate of all categories)
  • Infrastructure
  • Applications
  • Business Services
Level 3 navigation
This is a 'filter' of level 2 navigation and is dependent on the company's offerings and products. The amount of items in a level 3 navigation is dependent on the company itself.
The dropdown, search, and select solution allows users to individual identify specific items within the dashboard.
Level 4 navigation
This 4th level of navigation provides the user with tailored dashboards.
Level 3 challanges and iterations
The level 3 navigation is a dependent on both the level 2 navigation selected and the company's internal data. Because of the dependencies, this could mean that the level 3 navigation could show 5 results or 1,000+ results. Also, the users want to be able to individually select items within level 3 to control the information shown on the dashboard.
Hidden dropdown
This failed in validation testing. Users did not visibly notice the arrow, therefore completely missing the level 3 navigation.
Search bar + dropdown
We decided to directly show users the search bar. Once the user clicks the search bar, the dropdown will appear with level 3 items.
• • •
validation testing
5/5 users navigated through 3/4 levels
The design and research team collaborated and conducted testing with 5 new users in our targeted persona to validate our solutions. The primary finding was that our level 3 navigation solution was not understood by users. As a result, we went back to the whiteboard and designed more solutions.
What we were looking to learn from testing:
Testing results:
• • •
results
Reduced redundancies and updated the "look and feel" to Aquila Clouds' new brand
• • •
Changes made within a 7-week sprint:
  1. Updated the UI (colors, icons, typography) to clients' new brand and ethos
  2. Redesigned the navigation system to increase flexibility and add robust functionality for SREs, system administrators, and dev ops
  3. Updated the dashboard to a 2-column grid layout to reduce cognitive overload
• • •
learnings
Working with 2 teams: research and design
I used an optimal strategy that benefitted the team through speed and time efficiency. I split the team of 6 product designers into 2 teams: research and design.
The 2 teams worked simultaneously in a rhythm. While the research team sourced and conducted usability testing, the design team researched competitor products and audited the current UI of the site. After, both teams would re-unite, discuss findings, and disperse to continue to the next step of the project. The 2 teams would converge during important phases of the project: sketching, design critiques, validation testing, etc.
The teams would provide feedback and information based on their specific knowledge and understanding of the project. This created a beautifully, streamlined process that allowed for expertise and collaboration at the right times.
Contact MeLinkedinMediumTwitter