Microsoft Bing Industry Solutions: Framework
A few months before leaving on maternity, I was tasked on trying to build up the foundation and base framework for this extensive product which had no design support. The product allows a company to use the Bing search engine for their own retail websites. Towards the end, I was in charge of training the vendor who was taking over my work once I was on mat leave.
- ROLEDesign Lead
- Time Span2 months (before maternity leave)
- Team1 Project Manager, 1 engineer, 1 design vendor
I needed to create a well-defined framework, navigation model, and page architecture to try to build a strong foundation to hand-off to the team before I would leave on maternity.
There was minimal research done for this product. I needed to do a deep dive with competitive research and analysis on how products in the same space were performing.
By focusing on the main product areas, I had to try to wireframe out as much of the base of the product to create clear user flows for the vendor to work off of.
To ensure that the team would be left in a good state, I would need to write up an extensive document to clearly lay out the current state and where the gaps were before visual design.
FRAMEWORK INVESTIGATIONS
With MSBing Industry Solutions already have some components been built and a good understanding of what services they were providing, I had to go through with what was existing to try to better structure it. In order to do that, we needed a deeper dive into competitors and the other M365 products to really build out the foundation of the product.
I did a deep dive on several competitors such as Algolia, Cludo, Swiftype Site Search, Google Site Platfom, Site 360, and Elastic Search. This really helped see how other companies were handling their intense dev systems and how they decided to handle their information, user flow, and what specific services they were providing.
Since MSBing Industry Solutions is part of M365 product, it needed to follow much of the same structure, I/A, and UI/UX. I had to do a deeper dive into all of the M365 products to get a grasp on that framework and what elements we would be able to pull from to ensure it still fit within the M365 suite.
Since they had been trying to build the product without design help, the PM had already laid out a very rough IA model. I initially went through her decks to start organizing areas into tiers so that we had an better understanding of how we would structure the navigation model
NAV MODEL INVESTIGATIONS
The MSBing Industry Solutions product is geared towards engineers since it allows them to use our code to build their systems. So the navigation model was really extensive and messy. I had to worked heavily with the PM and the engineer to restructure the nav and create several models and iterations until it started to come together.
The scope diagram was a deeper dive into user flow since the product is very technical heavy and geared towards engineers. There is a logic flow that had to be established with some of the product areas since it was purely focused on engineering.
The portal box model was created in order to explore the tenant dashboard for the product to try to establish what bits of content would be surfaced at a higher level and what would be tucked away in the other areas within the navigation.
I had to lay out as much of the current navigation that existed in the product, restructure it and find the areas that were lacking or had no real great model to interact with. This became the working model to them explore other nav models or find areas to change.
After going through several iterations I was able to establish the areas that could be improved through a combination of some of the areas or flattening the model buy surfacing content in the same area.
PAGE ARCHITECTURE
Before moving onto wireframes, I took each area of the product to establish the architecture templates and the types of content would be here. This was to ensure that we were following M365 product patterns.
WIREFRAMES
Here are some examples of the wireframes I needed to come up with. There are around 40 pages of wireframes I needed to develop, so I am only showing a few. These wireframes were important for the design vendor to then use and iterate on once I was gone.
