Lead a v-team with product design representatives from each Power Platform product to align our home page layout and content strategy, while also working with stakeholders from both the design and product organizations.
This project was high priority to design leadership as we had different experiences for products that were offered as a suite.
A v-team essentially is a team created by volunteers working by a cause, where you can choose to contribute to or lead an effort of sorts. In this case, I lead a crew to align on home page design and layout.
I personally enjoy leading and working in v-teams, usually motivated by features that I have or am currently working on. It's the best way to keep visibility across teams in a larger company so there's no surprises, secrecy, and also becomes an inclusive initiative to allow an opportunity for others to offer their opinions when a new design pattern is being made.
It started as an ask from our studio's leadership, after a few different homepages were made separately or in a rushed manner. At this point, the different product home pages looked vastly different, and didn't feel like a unified suite of products.
Also, referring to another piece in my portfolio, Power Apps in Teams: Onboarding, I had designed a thoroughly researched home page that became the predecessor for all homepages for the Power Platform web applications.
To align homepages to create a sense of relation to eachother as one studio.
To update the home pages to have correct spacing, font sizes and weights, and the most up-to-date fluent components.
To have the home page create clarity and offer a clear way to help the user jump in or jump back in to what they were doing.
I started off by organizing the v-team by having at least one representative from each Power Platform product. After leading and participating in v-teams in the past, I'd found that the most efficient means of process for a v-team goes approximately like this:
Audit existing experiences (what do we have to work with? What findings do we have? what should we consider?)
⬇
Identify areas for alignment
⬇
Collaborate and align details with Fluent guidance (Microsoft's design system)
⬇
Finalize guidance + present
Along for the ride, stakeholders were brought along the process for input. I also migrated teams during this initiative between Power Apps to Power Virtual Agents, so I had input for both as well.
So, lets start with the audit.
First thing's first, let's see what we're working with.
Here we learn that Power Portals (formerly Pages) was in process of finding their brand identity, and were starting their home page from scratch. Power Apps and Power Automate have older App-level home pages that follow the last Fluent library's guidelines, while Power Virtual Agents didn't have an App-level home page, but rather a bot-level overview page. From here, we decided that also, with the existence of the Teams home page I'd researched for Power Apps,
We'd also want to consider adding a banner since the banner had attracted users to get started.
We'd identified 2 big areas for alignment: Pixels, and the banner.
Aligning the pixels
For pixels, we saw that there were 3 categories for alignment: content heirarchy, Text sizing/color/styling + spacing, and Illustration styling. We got together to write down the values for each of these categories, really getting into the specifics. I'm gonna just keep things zoomed out to spare you the details.
Content heirarchy means, from top to bottom, what kind of information do we surface first? We each had our content design representatives from each product discuss this, while also running a card-sort research study to see what was most important to each product's users, in their eyes.
Text alignment meant which weight, style, color, and spacing logic to follow. For Power Automate and Power Apps who've existed before the current Fluent guidance, the home pages used different grays and weights.
For illustrations , we'd identified that there were both old and new illustration styles used in our homepages. There were also different illustration styles for learning content, which we identified that we'll adopt the illustration style in those instances from Microsoft Learn, instead of trying to "Fluentize" them. Our users have been accustomed to recognizing the illustrations as links to documentation, and didn't want to blend that concept with the illustration style we use in feature work.
Aligning the banner
In past with the Power Apps in Teams: Onboarding project, the experiences' results curried a lot of interest in the Power Platform, and found it as something all products wanted to adopt a version of.
Researching the banner
With the banner, we decided to run a research study on the efficacy of the banner in the web app, as my previous research was for a different persona, for Power Apps in Teams. Our crew was also pretty torn on having our brands primary color or a lighter color in the background. There was also some conflict of opinions around if we should surface steps in the banner, or just welcome them to the page.
We tested both potential new users and existing users from all products for their thoughts.
As a jist, users enjoyed the visuals and the welcome message, along with the primary color as a base. Users also greatly appreciated the summarization bullet points on the banner to help them see the value of the product at a glance.
After much discussion, we'd gone through our list of things to align and came to the following guidelines.
Then, with the banner guidance, I'd captured clear guidance for any product to be able to create their own, and guidance on when to use certain variations of the banner.
Last but definitely not least, I created the reflow behavior of the page and banner with page layout guidance from Office and the Fluent design system.
With this guidance, everyone was able to recreate their product's home page with the guidance.
With having stakeholders along for the process, there was no surprise that the presentation went smoothly and was received well. We presented the journey our crew took to get to our guidance, including research findings, content design guidance, guidance for building your own home page, and also showing all of our product pages in concept with our home page guidance applied. Each product's home page owner was then to take these findings to their product team and push for it to be something to put into planning.
With this initiative, I felt happy to feel the home page work I'd put in officially become grounds for improving and impacting all products across the Power Platform. Without participation from the other designers who represented their products, there'd be no alignment.
Being a leader in these efforts doesn't feel like much work once you've figured out your leadership style and a basic process that these initiatives follow. I lean strongly on my sense of initiative, ability to always generate achievable action items, and general energy of excitement to motivate all participants to stay engaged, enthused, and leaned in.
There were some hardships, and generally due to it's high-visibility nature, there was a lot of politics involved with "This is from my product team and I want our idea to win!". In these cases, I like to lean on research to keep us all grounded in what actually is best for our users, and do not let any purely personal biases come in the way of clean and meaningful guidance. This approach has helped me a lot in my career at Microsoft, as I create a safe space for all to express their opinions and let the users answer what's best for them. That way, I don't need to take direct "sides" with anyone, including my own.