Overview
Schwab's intranet was designed by our team in Figma and later developed into sites within SharePoint by our developers. With over 30,000 employees relying on the intranet for daily operations, ensuring a smooth and efficient design-to-development process was essential. However, our team faced significant challenges due to the disconnect between design intentions and SharePoint’s technical limitations.
Timeline & Status
4 Quarters, Launched Q1, 2023
My role
Lead UX Designer - Design Library Creator, Workflow Optimizer, Cross-Functional Collaborator, Component Designer
Team
1 Team Lead
1 Lead UX Designer/Researcher- Me!
Problem
Our small team of four recognized that the handoff from design to development was slowing down our workflow. Since designers were unfamiliar with SharePoint's capabilities, designs were frequently returned to us with revisions, resulting in additional iterations and delays. These unnecessary revisions often extended the development timeline and affected the overall efficiency of the project.
To complicate matters, we were in the process of updating to a new version of SharePoint. This transition meant that we didn’t have full access to all the features yet, which led to even more frequent revisions. We quickly realized that, as part of this transition, creating a comprehensive design library would be a logical solution to streamline our workflow and align our team’s efforts.
Building the Design Library Foundation
Cataloging and Structuring SharePoint Components
I knew that we would be moving to a new updated SharePoint intranet soon, so I decided to take proactive steps to remedy our internal handoff issues. The goal was not only to streamline the process but also to help the team adapt to the new version of SharePoint more effectively.
I began by cataloging all of the available new SharePoint artifacts, paying close attention to the different sizing variations. Many components had small, medium, and large formats, which could change shapes depending on how they were implemented. This required a careful inventory of each component and its potential use cases.
Prototyping in Figma: Balancing Simplicity and Functionality
Next, I brought the screenshots I had gathered into Figma, where I started to create low-fidelity mockups. The intention behind this was to balance simplicity and functionality. The mockups were low enough in fidelity that we wouldn't get bogged down by details, but still high enough to provide stakeholders with clear, actionable visuals. I wanted the mockups to serve as both a communication tool and a starting point for further refinement.
Collaborative Iteration
To ensure alignment with the team’s needs, I shared these mockups with designers and developers regularly, inviting feedback and making necessary revisions. This collaborative process ensured that the mockups would be practical and well-aligned with both design and technical constraints.
Optimizing Components for Easy Implementation
To make the components even more efficient for development, I ensured they were designed to scale easily and could be quickly dragged and dropped into various website templates. This was achieved by establishing consistent component sizing and maintaining clear, standardized spacing, all while adhering to the technical constraints of SharePoint. By aligning with SharePoint’s limitations and capabilities, the components were ready to be seamlessly integrated into the different sections of intranet mockups without requiring further adjustments.
Impact of the Design Library - Streamlining Workflow and Improving Consistency
The design library became an essential tool for our team, dramatically improving our workflow. By providing a clear, standardized set of design components and templates, we were able to reduce the turnaround time by approximately 50%. This not only sped up the design-to-development handoff but also minimized the number of revisions and the back-and-forth between designers and developers.
The library also improved consistency across the intranet, ensuring that components were used in a way that aligned with SharePoint’s technical limitations. As a result, our team was able to deliver more polished, functional designs with greater efficiency, while stakeholders could see more accurate representations of their content early in the process.
Furthermore, the library became a go-to resource for onboarding new team members, allowing them to quickly get up to speed with our design standards and the nuances of SharePoint. The improved collaboration and communication within our team helped foster a more cohesive working environment, contributing to higher-quality outcomes and faster delivery times.
Lessons Learned - How can we improve? What can we learn for next time?
Reflection
This project reinforced the importance of anticipating technical constraints early in the design process. By taking the initiative to create the design library, I was able to bridge the gap between design and development, ensuring smoother collaboration and faster delivery times. The process also highlighted the power of cross-functional communication; regular check-ins with designers and developers helped us align on priorities and make adjustments in real-time, improving the overall outcome.
