![project images.png](https://static.wixstatic.com/media/256bb3_17d2c66549ed4a549f3c3e78bd2b2fe6~mv2.png/v1/fill/w_980,h_465,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/project%20images.png)
Lawrence Livermore National Laboratory (LLNL) is a federally funded research and development center focused on national security and technology innovation.
LLNL was looking to improve their ServiceNow Employee Center experience. The redesign aimed to align with the recent overhaul of another internal employee site, ensuring consistency in the user experience. The focus was on enhancing usability, providing a modern interface that would serve LLNL employees efficiently across various platforms.
CLIENT
Lawrence Livermore National Laboratory
ROLE
UX/UI Designer
Challenge
LLNL needed a refreshed Employee Center experience that not only fit within the templates provided by ServiceNow but also incorporated their updated style guide. The challenge was to offer a personalized and visually cohesive design that aligned with other employee tools and sites, while maintaining functionality and ease of use.
01.
Working within the bounds of ServiceNow's templated Employee Center.
02.
Ensuring that the design matched the look and feel of other internal employee sites.
04.
Navigating feedback from multiple stakeholders to deliver design options that aligned with both employee needs and LLNL's strategic goals.
![](https://static.wixstatic.com/media/256bb3_2a7ea25713c24212a6bab791407d42f7~mv2.png/v1/fill/w_459,h_344,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_2a7ea25713c24212a6bab791407d42f7~mv2.png)
![](https://static.wixstatic.com/media/256bb3_85fd52311cba4185ad6af9e6a45601bd~mv2.png/v1/fill/w_459,h_344,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_85fd52311cba4185ad6af9e6a45601bd~mv2.png)
Design System
LLNL's updated style guide played a critical role in driving the visual decisions for the Employee Center redesign. The key areas of their design system included:
Color Palette
LLNL’s palette emphasized neutral tones combined with bold accent colors to create a clean, professional appearance. These colors were used strategically to highlight important elements and create visual hierarchy without overwhelming users.
Typography
The style guide called for the use of modern, readable fonts that maintain accessibility standards. A mix of serif and sans-serif fonts were employed to distinguish between headings, body text, and callouts, ensuring clarity throughout the platform.
Iconography
LLNL’s design language emphasized minimalist, clean icons that enhance usability without detracting from the content. Icons were carefully placed to aid navigation and provide visual cues, ensuring a seamless user experience across the Employee Center and other internal sites.
![](https://static.wixstatic.com/media/256bb3_3a72cc00fc3c491e818814a9c91269d1~mv2.png/v1/fill/w_495,h_320,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_3a72cc00fc3c491e818814a9c91269d1~mv2.png)
![](https://static.wixstatic.com/media/256bb3_91b9da7169e74eaaacbdfb1281ab95ce~mv2.png/v1/fill/w_231,h_323,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_91b9da7169e74eaaacbdfb1281ab95ce~mv2.png)
![](https://static.wixstatic.com/media/256bb3_650aedfbbca64f1c87ef2e9e385faab6~mv2.png/v1/fill/w_231,h_323,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_650aedfbbca64f1c87ef2e9e385faab6~mv2.png)
Solution
Multiple mockup options were developed for LLNL to review, offering variations that aligned with their updated style guide while working within the limitations of the ServiceNow Employee Center.
These mockups included designs for the homepage, profile, and settings pages, as well as the onboarding center. Each option aimed to maintain consistency with other internal employee sites while improving functionality and user experience. This iterative process allowed LLNL to choose the design that best fit their vision for upgrading the employee center experience.
![](https://static.wixstatic.com/media/256bb3_de9b29cd77dd49daba754458bd1581f9~mv2.png/v1/fill/w_980,h_463,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_de9b29cd77dd49daba754458bd1581f9~mv2.png)
Employee Center Page Mockups
![](https://static.wixstatic.com/media/256bb3_1dc7d3ec85fb409eac06b846a422dd06~mv2.png/v1/fill/w_503,h_367,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_1dc7d3ec85fb409eac06b846a422dd06~mv2.png)
User Preferences Page Mockup
![](https://static.wixstatic.com/media/256bb3_c5f7b971d6d347d6bae7296fe2c2b1b7~mv2.png/v1/fill/w_466,h_368,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/256bb3_c5f7b971d6d347d6bae7296fe2c2b1b7~mv2.png)