.png)
Team:
Microsoft DSX Team
Actalent Service LLC
Role:
UI/UX Designer
Time:
Oct -- Feb
Software:
Figma
React
MudBlazor
Overview
The Agile Waterfall management application was a tool that provided visualization of the progress of each product and work item, allowing managers to gain a direct visual understanding of milestones and overall progress. This application allowed for easy tracking and monitoring of project progress, enabling managers to quickly identify potential issues and make informed decisions.
At each sprint planning, managers use the report charts and tables generated by the Agile Waterfall tool to present the progress made during the last sprint to the team or stakeholders. This information is then used to make plans based on the available data. Additionally, the tool allows managers to get an idea of team member capacity management by looking at the points of work items.
The initial version of the application was created by a Dev team in a very short amount of time, resulting in some shortcomings. Specifically, it lacked a friendly user experience flow, and there was a need to speed up the generator time. Additionally, both UX and UI needed improvement to enhance the overall user experience. To address these issues, I worked with 3 developers and a PM to improve the Agile Waterfall tool. As the only designer on the team, I was responsible for researching the initial version and creating a prototype for the updated version.
.png)
Background of Agile Waterfall Methodologies
The initial version of Agile Waterfall version one was created for Microsoft internal use only, and it combined the philosophy of "Agile" and "Waterfall" methodologies. The purpose of using this approach was to provide a flexible and adaptive development process that allowed for the efficient delivery of high-quality software products while maintaining a structured approach.
The main benefits of using Agile Waterfall methodology are:
Flexibility: The Agile Waterfall methodology provides flexibility by allowing for changes to be made throughout the development process, while still maintaining a structured approach to project management.
Predictability: The methodology allows for a clear understanding of project milestones, goals, and deliverables, which enables teams to work towards predictable outcomes.
Risk management: The methodology allows for early identification of potential issues and risks, which can be mitigated before they become major problems.
Improved communication: The methodology promotes collaboration and communication between team members, stakeholders, and customers, which leads to better outcomes.
Faster time to market: The methodology allows for the delivery of software products in smaller increments, which enables faster time to market and reduces the risk of delays
Overall, the purpose of using Agile Waterfall methodology is to provide a development process that combines the best aspects of both Agile and Waterfall methodologies, enabling teams to deliver high-quality software products efficiently and effectively.
User Interview
To gain a better understanding of the initial version and determine how to improve the next version, we reached out to several users who have used the initial version extensively. Here is some feedback that we received:
.png)
Name: Fransisco
Age: 35
Title: Software Engineer Manager
"The logic behind the navigation menu is disorganized, and sometimes, even though I know which project I want to view, I struggle to find my way there. I use this tool on a weekly basis to take screenshots and incorporate them into my presentations for my boss and team."
Name: Jacob
Age: 27
Title: Program Manager
"I've recently started my job at Microsoft, and I'm having difficulty understanding how to use this tool. There are too many terms that only use initials, and if I click on the wrong folder, it's difficult to navigate back and find my way again."
Name: Emma
Age: --
Title: Project Manager
"I frequently refer to the progress bar, as it provides me with the most essential information. The fact that all of the information is consolidated into one place is ingenious, as it allows me to compare different data with just a glance. However, I wish that the progress bar would include more explicit figures to indicate the size of each work item, or to indicate which work item requires my immediate attention."
Name: Justin
Age: 34
Title: Lead Program Manager
"Most of my team uses this tool to track progress. During every sprint planning, we utilize ADO to assign work items and determine team members' capacity, such as the number of points they can handle in the upcoming sprint. We usually include vacation time using a Json file, but this can be difficult for PMs without coding experience, as they may accidentally omit a semicolon and cause the entire system to crash. As a result, I'm wondering if there's a way to add the features we need to this tool so that we can use it exclusively during each sprint planning."
Findings and solutions
"The logic behind the navigation menu is disorganized"
Based on the items in the navigation menu, I decided to spend more time understanding the purpose of each section and the terms used. I collaborated with my Project Manager and Technical Manager to have weekly meetings where I could ask questions about things they may know better than me as a PM and non-technical person. After understanding the meanings of everything, I created a tree chart to demonstrate how to navigate to specific project pages. I then interviewed three users with different roles to showcase the logic I had developed. Everything worked out well, and I passed the chart on to the developers to implement.
"I'm having difficulty understanding how to use this tool"
When I first started using this tool, I had the same problem. There were too many initialisms and terms that I couldn't understand, such as "MFP." After interviewing a few users, I created a table to serve as a dictionary for these terms, and my goal was to create a guide for new users. I designed multiple flow windows that would appear when a new user logs in, which would guide them on where to get started and how to use the navigation header. Additionally, I added a "?" icon on the main page to provide an explanation for any terms that may have a confusing meaning.
"Add features we need, so we can use it exclusively during each sprint planning"
Based on these requirements, I added two new features to the tool - "Report Builder" and "Team Configuration." With the report builder feature, users can save reports and combine them easily for presentations by using the "screenshot" button. The team configuration feature combines the ADO Team Capacity page and Json.file page into one, allowing managers to add or delete team members, assign authorizations, and plan for the next sprint. It also provides a way to add vacation time.
"I wish that the progress bar would include more explicit figures"
The initial version of the progress bar had two parts - the upper bar represented the completion percentage calculated by the work item's points, while the lower bar represented the independent work progress. However, I noticed a problem - the length of the bars remained the same, whether the work item was 500pts or 5pts. As a result, users couldn't tell which item they should work on first. To address this issue, I changed the length of the whole progress bar based on the number of points. For instance, a work item with 5pts would be represented by a 5-pixel bar, while a 300pt item would take up 300 pixels. This solution helps users to quickly understand the importance of each work item with just a glance.
Feature Development
.png)
Design System
For the design system, Microsoft has pretty strict rules and already has a design system that can be directly utilized. However, when the project was handed over to frontend developers and was halfway through, we received an order from stakeholders to switch to MudBlazor instead of React. MudBlazor is an open-source UI component library for building web applications using Blazor, a .NET-based web framework for creating interactive client-side web applications, which has its own set of components. Therefore, I have to create a design system that incorporates MudBlazor while still adhering to Microsoft's design system rules.
As individual features gradually came to life, I built a design system to ensure the interface was cohesive throughout the product. Typeface and colors were chosen to meet the client's goal of positioning their brand and product as modern and simple.
