Goal
Help users find what they need across the platform by introducing a hub-and-spoke model and develop the Hub page, unifying two portals into a single starting page.
My Role
This project was broken up between myself and one other designer. I was in charge of leading the end-to-end design process for the development of the new portal Hub.
Understanding Project Scope
The project held many unique challenges. First, we needed to define personas, project scope, user needs, and business goals. We then set out in understanding the type of hub needed to fulfill those goals. After that we defined all appropriate features to be included in the Hub, and developed a system to categorize all features and sort them hierarchically to meet the needs of users and fulfill business objectives. During this process we went through various iterations of wireframing and signoff from the appropriate stakeholders.
Defining Pain Points
This process began before I started. When I came in, these pain points were loosely defined so I helped to consolidate the pain points, define the top level and supporting arguments, and provide an easily consumable layout.
Audit
I worked on an audit and analysis that looked into consumer, enterprise, and hybrid hubs. With screenshots organized, I worked with the other designer to create a table of features found in each hub and was able to see trends arise. Then we wrote a short analysis to share with stakeholders on features we should include based on the audit and new features that aren't represented in order to add additional value.
Understanding What A Hub Can Be
With the audit completed, we worked on defining what the Hub is and, more importantly, is not. This helped to scope the project for conversations with stakeholders.
Defining Purpose
After reading over user research, stories, personas, past iterations of Hub experiences, and work defining the hub experiences, we were able to succinctly define the Purpose of the Hub, Value to the Company, and Benefits to the Users.
Exploration 1
We began with gray boxes so we could focus on getting a visual understanding of what we were to produce.
We laid out the boxes as we talked through potential capabilities and features.
Exploration 2
We then rearranged pieces of the first explorations so we could start to gain a deeper understanding of what objectives the Hub was to fulfill.
All the ideas from both these explorations helped us to narrow down layouts in later explorations.
Exploration 3
We stopped with moving around the boxes and turned our attention to the capabilities needed in order to fulfill both business and user goals.
We identified and color coded five categories, Getting Your Work Done, Information, Space Jumping, Catalog, and Support, and outlined what features each category would hold.
We also developed a Small, Medium, Large card paradigm to visualize what pieces of information each feature would hold. This helped us to later define distribution and space allocation per feature and category.
We spent a little time creating mocks of those Small Medium Large cards for visual understanding.
Pause for Review
We stopped here to re-evaluate if our thinking and designs were still pointed towards meeting our user needs and business goals.
We also realized the Small Medium Large paradigm was not the most appropriate way to section off the information, so we switched to a weighted system. We were able to ask ourselves what the most important features were and how much space should those features take up.
Because our goals are very complex, balancing the needs of the business and users, we were able to use this system to define content areas and derive hierarchy.
We teased out the categories more and moved some of the core capabilities into a Suite Essentials category, seen in yellow.
Exploration 4
Using the colors from the categories and leveraging known universal design principles, we focused on how information could be grouped to show clearer hierarchy. Looking back at our user stories helped to identify what solutions should be grouped.
This was also when we began to see clear patterns and agreed that using a main content section paired with a right rail would allow the most important information to surface while reserving space for new and evergreen information.
Pause for Content Strategy
Going back once more to review, we created our most up-to-date list of the categories and features needed. The items listed in red had not shown up in our mocks yet, so we paid special attention to including them in the next round.
Exploration 5
We are getting close to identifying what will live in the main content section and what will live in the right rail.
We are now looking into how we can surface new information without users leaving the Hub, beginning to identify what specific content flows and interactions can look like, and what types of cards from vNext we want to pull in.
