UX Strategy | Business Alignment
Dashboard for Portal Integration
Created a consolidated landing page for two portals merging into one, delivering end users a seamless entry experience that streamlines access to and utilization of multiple applications within the unified portal
Team /
1 Design Lead
2 UX Designer
1 Product Manager
2 Developers
Timeline /
Jan 2023 - May 2023
Tool Used /
Figma
Sketch
Miro
Notion
Contributions /
User Research
Ideation Workshop
Prioritization Workshop
Wireframing
User Interface Design
Prototyping
A Bit of Back Story
While all teams were focused on delivering features for the integration of two portals, the design team uncovered a substantial misalignment between the team-centric requirements and the overarching objectives of portal integration
The Goal
Identify the essential components that enable a frictionless and cohesive user entry experience on the landing page, ensuring users can easily navigate their journey
OLD
NEW
Results
1
2
Streamlined 80% of the data points, allowing us to concentrate on the essential requirements for the MVP
Effectively facilitated 5 workshops involving diverse stakeholder teams to harness innovative ideas
What was lacking or absent in the portal integration?
Throughout the integration process, each team was concentrated on their respective application-level requirements, overlooking the potential utilization of space on the portal landing page
1
2
Lack of teams communication
The team did not communicate with each other about collaboration or integration.
Fragmented Feature v.s Portal's Core Values
Owing to siloed team work, the product failed to address the core value of the portal
Which app should serve as the landing destination for users when they log in to the portal? Should it be the first app that the user has access to?
Stakeholder
In what way can we offer distinct entry screens when users possess multiple user roles upon logging in?
User
Challenge Statement
How can we offer an efficient entry point for users of our apps to access knowledge and communication, enabling them to work swiftly and effectively
0️⃣ Our Approach
The design team aimed to effectively communicate the value of incorporating the landing page into the roadmap for the agile development team. Here is our approach and the process we pursued:
Here's our plan:
-
Prepared pre-kickoff materials to gain agreement from the board.
-
Conducted internal brainstorming sessions to generate initial ideas.
-
Created abstract mockups while gathering the right stakeholders for the project.
-
Presented our concept to the stakeholders to ensure resonance and alignment.
-
Once the previous steps had been successfully completed and the stakeholders had agreed to proceed, we officially kicked off the project.
1️⃣ Internal Design Brainstorming to Get Started
As a dedicated design team of five, who have invested nearly two years in close collaboration with the agile development team, specifically focusing on their respective application-level requirements for the portal integration project.
To initiate the project, we carefully categorized our previous feedback into four distinct sections: Dashboard, Guides and Resources, Notifications, Training Videos, and Coach Marks. Additionally, we painstakingly compiled over 100 data points for each category.
.png)
Coach Marks
52 ideas
.png)
Notification
87 ideas
.png)
Guides & Resource
127 ideas
.png)
Dashboard
108 idea
2️⃣ Ideation Workshop with Stakeholders
After finalizing the four main categories, we conducted an ideation workshop that involved five teams with twenty stakeholders to brainstorm business-oriented ideas. Ultimately, we collected a total of 256 data points. Below, you'll find the key features that emerged from the card-sorting activities
🖥️ Dashboard
Custom Dashboard
Calendar Widget
Bookmark links
Help & Support
Announcement Widget
Notification Widget
📄 Guides & Resource
FAQs
Help & Support
Searchable Content
G&R Template
Downloadable Content
Training Video
Bookmarks / Favorite
🔔 Notification
Notification Template
Schedule / Send
ServiceNow Integration
Notification Settings
👨🏻🏫 Coach Marks
Recall / Reset
Visual Assistance
First-time Tips
Link to G&R
System Announcement
3️⃣ Prioritization
With each topic having its own essential features, we asked stakeholders to evaluate their value in the MVP using the impact effort matrix. This activity aimed to comprehend stakeholders' prioritization and foster collaborative discussions concerning the needs of each team, especially when differing opinions arise among stakeholders
.jpg)
.jpg)
.jpg)
.jpg)
At the conclusion of the prioritization workshop, stakeholders from the five teams unanimously agreed to prioritize the 'Do It Now' bucket for the MVP. Below, you will find the topics and features they wish to include in this prioritized implementation
🖥️ Dashboard
Bookmark links
Help & Support
Announcement Widget
Notification Widget
📄 Guides & Resource
FAQs
Bookmarks / Favorite
Help & Support
Training Video
Searchable Content
G&R Template
Downloadable Content
🔔 Notification
Notification Template
Schedule / Send
System Announcement
Insights
-
Exclude Coach Marks from MVP
While the design team acknowledged the significant value of coach marks in aiding first-time users, and stakeholders even expressed requirements related to their inclusion, the decision was made to exclude them from the MVP.
-
Things to remember: Have to adhere to the Framework and Avoid Creating New Components
The stakeholders aimed to minimize additional work efforts, which required the design team to strictly adhere to the framework guidelines. Their goal was to ensure efficiency and reduce unnecessary complexities in the project, emphasizing the importance of operating within the existing framework without introducing new components.
4️⃣ Concept Generation
Information Architecture
I initiated the process by delving into information architecture. This foundational step ensures the meticulous inclusion of both the principal and its associated minor features within the site's overarching structure.
User Flow
Subsequently, I underwent five rounds of internal user flow reviews with the design lead to eliminate unnecessary flows that could potentially lead to extra development time, while the business was also making decisions about which features to retain or remove
.jpg)
Version 1
%20copy.jpg)
Version 2
%20copy.jpg)
Version 3
The final user flow is concise and clear, considering and clarifying two user groups:
.png)
Final Version
Wireframe
Lastly, I employed three distinct wireframe layouts to assess whether the design can be executed within the existing framework, eliminating the necessity of creating new components
.jpg)
After reviewing with my team, we opted for the third approach, which is straightforward. Users won't be overwhelmed by the features we provide, yet they can still stay connected with company announcements, receive support, and seamlessly engage in their work
5️⃣ Deliverables
🏠 Landing Page
Before:
Simple page with a few links.
After:
-
Notifications keep users informed.
-
One-click access to Help Center for assistance.
-
Bookmarks and Recently Visited streamline workflow.
🔔 Notification Widget
Before:
Users relied on email notifications as there were no in-app notifications available.
After:
The introduction of in-app notifications enables users to swiftly navigate to specific tasks without the need for external navigation, enhancing efficiency.
🏠 Help Center
Before:
The file hierarchy was poorly structured, making it challenging for users to search for and find the documentation they needed.
After:
To improve usability, we have reorganized the contact and support sections into separate areas. This enables users to easily find the assistance they require and search for specific information, eliminating the need to create a ServiceNow ticket every time they have a question.
🔗 Quick Links
Before:
In the legacy platform, there was no built-in functionality to save links or utilize a bookmark feature. Users had to rely on their web browser for this purpose.
After:
Users now have the capability to save both internal and external links within the platform. Additionally, based on user feedback, we have incorporated a recently visited feature to allow users to conveniently pick up from where they left off during their last session.
👩💼 Admin View: Manage Announcement
Before:
In the previous setup, the business had to create a ticket to inform the tech team about an announcement that needed to be made.
After:
With the new system in place, administrators have the ability to create and manage announcements directly within the application. This feature allows them to configure the content of the announcement, specify the recipients, and schedule when the announcement should be sent.
