Information Architecture and the new MAAS layout design
This 2 weeks iteration we ran a design sprint to quickly prototype the new MAAS layout design. In the previous release, we created an experiment to figure out 3 different Information Architecture possibilities and we selected the one that makes the most sense to test out the new MAAS layout. This is the first phase of our revamping process and there is still a long way to go.
Here is the prototype if you would like to play with it.
Because we had a very limited amount of time to work on this project, we scoped our work to test out 3 main components in the UI; the new MAAS Information Architecture, the action bundle and the bottom status bar. We did a rapid prototyping style user-testing with 6 MAAS users from different environment categories. While testing out this prototype, we focus on 3 aspects of the design; learnability, efficiency, and error tolerant.
The design above went through several iterations of redesigning during the testing phase and here are the learnings that we got.
- Navigation: A few people find the concept of spaces out of place in the navigation, because they feel that it belongs in the Networking tab and it’s functionality was not used as frequently.
- Quick-access machine listing column: 5 out of 6 people were really excited that there is an ability to switch between different machines to view its details, because we’ve discovered that many users had to open up several tabs for 2 reasons; 1. They are trying to compare configurations between different machines, 2. In a huge MAAS environment, it can take longer to load the entire list of machines.
- Bottom status bar: In our earlier prototype, we found that we were trying to fit in 2 purposes in one concept by adding both local and global statuses in this area and the white background colour made this bar out of sight, so a lot of information that we surfaced was not getting enough attention. As a result, we decided to only include global statuses in this area and changed the background colour to make it standout.
Action bundle: In the previous MAAS design, we realised that the
Take Actionbutton is too far from the interaction point and there are too many actions inside the dropdown, so the complexity score is quite high. So in this prototype we broke down the take action button by the most popular action and moved it closer to the interaction point. We hope to make it more contextual by showing the right action for different machine statuses.
Our next step after we finalise these 3 components is to focus on how we can tailor the advanced search and filtering functionalities to match with how people work as well as templating machine profiles, and notification center.
Sharing Feedback about the UI with us
For anyone who would like to share their experience or tell us how you query your search in MAAS (or any other relevant experience in our next topic) feel free to share your feedback/thoughts with us in this thread!
MAAS react migration sprint
Continuing from our last week planning work to migrate MAAS to react faster, we’ve joined forces with other web-team members to quickly turn the angular legacy pages to react.
In this sprint, we did a pair programming style sprint, where we on-board the web-team members with MAAS architecture and how the API works. Then we split tasks into different components and pages for each pair. So far we’ve made really good progress in the UI where the Availability Zones and Subnets page are now in React.
The next step for this migration is to summarise our work task, clean up, and refactor code in a few places before we ship it.