screenshots of inside redesign
screenshots of inside redesign
screenshots of inside redesign

Redesigning an Intranet Hub

Redesigning an Intranet Hub

Redesigning an Intranet Hub

As one of 3 UX designers on the project, I explored how to transform INSIDE into a more flexible, integrated and user-customizable experience. I ideated on design concepts, conducted competitive analysis, designed low and high fidelity interactive prototypes, and implemented our design styling in code.

As one of 3 UX designers on the project, I explored how to transform INSIDE into a more flexible, integrated and user-customizable experience. I ideated on design concepts, conducted competitive analysis, designed low and high fidelity interactive prototypes, and implemented our design styling in code.

As one of 3 UX designers on the project, I explored how to transform INSIDE into a more flexible, integrated and user-customizable experience. I ideated on design concepts, conducted competitive analysis, designed low and high fidelity interactive prototypes, and implemented our design styling in code.

MY ROLE

UX Research, UI Design, Front-End Development

TIMELINE

2022-2024

Challenge

INSIDE is the intranet "hub" at Sandia National Laboratories. It provided Sandia-related news to employees as well as information relevant to their employment. However, there was little integration with other applications across the labs, and users found it difficult to find information that was pertinent to their employment. Plus, there was little to no customization of the experience, which had been a continued request of users.

Objectives

network icon

Tie INSIDE with enterprise applications at the labs to bring a more integrated experience for users.

icon of user

Provide customization options and user profiles for employees to easily locate personal information and network with others.

icon of grid layout

Reorganize and optimize the layout of INSIDE to accommodate new functionality and content.

Research

Research tasks were completed to identify user pain points, determine requirements, and generate new ideas. I conducted the following activities along with other team members.


Competitive Analysis

We researched a variety of award-winning intranets in organizations across the world to discover how they approached the design of their intranet and content that was presented. We referred to Nielsen Norman's top intranet report for top trends in modern intranets and to describe the journeys that organizations took to build successful intranets and intranet hub applications.


User Interviews

Reaching out to a diverse group of employees was essential to find out how INSIDE was being used the most, what was working well and where there were pain points. I observed and participated in several of these user interview sessions.


Usage Analytics Analysis

Matomo had been used to collect usage data of INSIDE for over 4 years. With this data, we were able to infer what parts of the application were most popular, how much time users were spending and where they were coming from/going to. We also were able to collect demographic data, such as job title and department.

Design


Whiteboarding

With our research data in hand, it was time to hit the whiteboard and ideate on design ideas for how INSIDE could be re-imagined. Myself and each of the other designs worked on pen/paper and stickies to generate ideas for each of the new features of the app, including a new layout and user profile page.


photo of room with whiteboard


We shared our ideas and identified the pros and cons of each approach. The design ideas we thought were most successful were identified for future use in our wireframes to put in front of users.


photo of stickies on notepad sheet



Low-Fidelity Wireframing

Next, we interpreted our whiteboarding design concepts in Balsamiq to begin building wireframes, which we could put in front of users. I produced a series of Balsamiq wireframes that presented a new layout of INSIDE, an employee menu, employee profile, and widget-specific designs.


wireframe example


wireframe example

Above: Examples of INSIDE layout changes and employee menu


wireframe example

Above: Example of the Employee profile screen, which enables the user to view information about their department, leave balances, equipment and other information specific to their employment at Sandia.



Socialization and User Feedback

After we completed our low-fidelity mockups, we presented them to employees of various roles and divisions across the labs. This gave us both an opportunity to socialize our effort and collect valuable feedback. Working with UX researchers on the project, we captured notes and aggregated our data to identify common themes and what was working and what needed to be re-worked in our wireframes.


High-Fidelity Prototyping

Once our wireframes were modified, we reviewed them with employees of various roles across the labs to get additional feedback. This iterative design work on our low-fidelity wireframes was instrumental to generating high-fidelity interactive prototypes. In our high-fidelity prototypes we developed the final visual design and determined many of the nuanced interaction patterns.

I created highly interactive prototypes in Axure that enabled the team to conduct extensive usability studies using real-world tasks.

Example:

"You are a level-one manager and you need to search for an employee in another division. Please locate Connor Lee and describe his title."


Above: Example of using Directory to search for an employee


Above: Example of a design pattern in the new Favorite Web Apps widget


Above: Using the tabbed interface for the new My Recent Activity widget


screenshot of user profile

Above: Design of a new user profile page


screenshot of settings flyout

Above: A new settings fly-out menu enables the user to toggle the visibility of their widgets and toggle a dark mode, a highly requested feature


screenshot of redesign in dark mode

Above: Example of toggling on dark mode


Results

icon of thumb up

An influx of positive feedback from Sandia employees noting the new customization and integration features of the new INSIDE.

icon of clock

A significant decrease in the amount of time spent among employees locating information relevant to their employment.

icon of high five

Praise from stakeholders across various organizations relating to the integration of their data into INSIDE (e.g. Enterprise Reporting).

Let's connect

Reach out to collaborate or just to say hi. 👋

Let's connect

Reach out to collaborate or just to say hi. 👋

Let's connect

Reach out to collaborate or just to say hi. 👋