header_pnnl

OVERVIEW

– 10 weeks internship with diverse team to revamp Lab’s intranet & newsletter serving 4000+ staff;

– Research = 5 interviews + 3 focus groups + heuristic evaluation;

– Design = 3 iterations + sketches + mockups + interactive prototypes;

– Evaluation = 7 usability testing sessions + card sorting;

TEAM

– Xuan Liu (UX/UI)

– Jackie Francik (UX/UI)

– Thatcher Montgomery (Content)

– Trenton Lam (Developer)

CONTRIBUTION

– Research: Led research planning and analyzing; Administered usability study; Cooperated in requirements gathering;

– Design: Collaborated on creating mockups, prototypes, and design iterations;

– Report: Led documentation and presentation to CIO & leadership team.


CHALLENGE

The Pacific Northwest National Laboratory (PNNL) sends out its internal email newsletter – Inside PNNL – to 4000+ staff twice a week. However, this newsletter is widely disregarded, bringing huge frictions to internal communication. Our intern team was tasked to explore answers to this problem within 10 weeks:

“How to make Inside PNNL more engaging?”

Our initial scope was focusing on the content of the newsletter. But what we found out was that, when asked about the newsletter “Inside PNNL”, people were talking about the “Lab Web” – the lab’s internal website. Because the current newsletter has mere headlines with links to full content, users will be directed to the Lab Web to read more. As the Lab Web serves as a comprehensive platform to present the Inside PNNL’s content, users consider the content, newsletter, and website as a whole.

PNNL Information Flow

DESIGN QUESTIONS

Accordingly, we expanded our scope: We’re still interested in content strategy, but also working on revamping the Lab Web to engage lab staff with more useful features. Our design questions can be divided into two aspects – content and platforms:

“What content do Lab staff want to see?”
“How to improve the platforms (Inside PNNL & Lab Web) to better deliver and present the content?”

APPROACH

The other big challenge was that it’s a high-level requirement, and it became our interns’ responsibility to plan the study, break it down to small tasks, and decide where to go. While my teammate, the other UXer, Jackie focused more on design, I led the research plan, from gathering requirements to usability study. Overall, we applied User-Centered Design to approach this problem.

The 3 focus group sessions and 5 one-on-one interviews unveiled the pain points and expectation for current Inside PNNL, bringing us a good source of design implications. With a handful creativity, empathy and critical thinking added into user requirements, Jackie and I created an interactive prototype for testing. The feedback from testing not only inspired us for 2 more design iterations, but effective content strategies.

Our design deliverable and content suggestions were shipped for future implementation that will be released in Mar 2017.

Design Process


RESAERCH

research-topics-with-questions

square-rating

Interviews & Focus Group

The majority of participants were scientists and engineers – the primary staff at lab. To understand lab staff’s current experience with Inside PNNL and Lab Web, we planned and conducted 5 interviews and 3 sessions of focus group.

Focus group helped to inspire open discussion, bringing us a list of key feedbacks and common themes from a larger subsection of the PNNL employees. For some senior staff who might influence group dynamics, we invite them for one-on-one interviews to hear their individual stories.

What topics were we talking about?

I broke down the design question into 3 areas:

(1) Content; (2) Delivery; (3) Functionality.

Content is the key that drives people to interact with Inside PNNL, so we have to know what content presented in what forms would engage more audiences.

Only with effective delivery can audiences access the content. Thus, we’re interested in people’s experience with all channels and platforms, to find out what to fix and improve.

As Lab Web works as a platform to present the content, it should have robust functionality to bring delightful reading experience. So we investigated the functionality of Lab Web to see opportunity areas.

So you think we were just taking?

Apart from keeping participants telling their stories, I asked them to perform interactive activities to observe what’s going on in their minds.

I’d like to call it “post-it notes activities”: I let participants use post-it notes to brainstorm 2 lists of features – to keep or move, and rate the priority of different features on the current Lab Web with “Square Rating” (see the left photo).

During “Square Rating”, post-it notes in different colors represent different features in the current Lab Web. What I asked people to do was: the more important the feature is to you, the closer you put it to the center. By doing so, we could easily get a visual clue about users’ frictions and preferences, and then asked participants to elaborate their thoughts.

Who are they?

Based on research findings, we summarized 4 primary personas representing major user groups at Lab.

personal-pnnl

(1) Lab Fellow:

Distinguished scientists & engineers busy with work but still interested in research news.

(2) Facility Manager:

Operation & management people focus more on maintaining the Lab.

(3) Strategic Partnership:

Bridge external & internal resources with a high-level view; encourage Lab to grow.

(4) Scientist:

The majority at Lab. Eager to know collaboration & progress to keep updated and network.

Key Findings & Design Implications
1. Content: Perspective matters

pnnl-contents

Usually, the Inside PNNL likes to highlight what the Lab has achieved on the main Richland campus. But when discussing what content is valuable to scientist and researchers, they repeated two common themes: (1) what’s going on; (2) quality over quantity.

“What we have done is not what’s going on”, one participant said, “It could almost be networking, in a way – I would be able to skim through and see people’s faces and see who is collaborating with who and how they’re doing.” Also, research highlights are welcome, but they are more interested in upcoming seminars and visiting speakers, as they consider it’s a way to get more involved. Apart from research news, they also like to find out lab-wide news, including PNNL news from other locations.

>> The content side could try a different perspective to cater to audiences’ needs – highlight collaboration, progress, and research events.

2. Delivery: Cross-platform solution with better accessibility is the solution

delivery-solution

There are two scenarios in which users access Inside PNNL:

(1) In office – use a desktop with Lab Web; (2) Out of office or off campus – choose mobile with the email newsletter.

When accessing Inside PNNL in office, desktop is handy and people prefer use Lab Web as it’s more informative, attractive, and convenient than the email newsletter. They like to “scroll and skim” through the articles, looking for quick information like pictures or synopses. Outside of their office, users go with mobile devices. But what frustrated them is the limitations of mobile use due to the Lab’s fire wall. VPN is required to access intranet on mobile, so people without VPN can only read the headlines in newsletter and are not able to access full articles on mobile Lab Web.

>> The solution should make newsletter accessible on mobile device;

>> Apply responsive design to keep consistency across different platforms;

>> Rearrange the layout of newsletter to keep it consistent with users’ habits on desktop – scroll and skim to look for interesting topics, synopsis, and picture.

3. Functionality: Improve or remove; Maximize the customization

pnnl-functions

The reviews of current features on Lab Web fall into 3 categories:

(1) Popular & helpful; (2) Would be helpful with improvement; (3) Useless and disregard.

The popular ones like MyLinks are appreciated due to its feature of customization. Customization was the most common theme came from user research, so we planned to provide more customization in the redesign to meet different needs from 4000+ lab staff.

Some features are considered far from effective and efficient, which need improvement to better solve problems. For example, the current Calendar is not efficient in delivering time sensitive information. Users expressed a strong desire for an up-to-date, complete calendar they could use to find all kinds of lab events with sort, filter, and add to Outlook functions.

Besides, features like the Reading System of Inside PNNL was deemed useless, which should be removed in the redesign to maximize the information space. In reality, users rarely comment or rate the articles on Inside PNNL. What they actually do is reach out to the author directly via Email, or share the article with colleagues via instant message. Accordingly, we planned to remove the current Reading System and facilitate users to do what they really want to do.

>> Utilize customization to meet different needs from different user groups;

>> Enhance current features to maximize their functionality and usability;

>> Replace disregarded features with helpful ones to address the real problems.

Research done, so?

after research

As user research unveiled the requirements for content, delivery, and functionality, we handed the content suggestions over the content manager, and reported the accessibility issue to developer for technical solution. Thus, what left to us designers were more focused on redesigning the visual layout, information architecture, interaction and functionality of the Inside PNNL and Lab Web.


DESIGN

Design Scope

design scope and flow

Although it should be responsive design, it’s technically difficult to achieve universal accessibility on the mobile version of Lab Web in short term (due to PNNL’s fire wall). According, as we had only 10 weeks for this project, we prioritized the redesign of the Lab Web’s desktop version, and worked on redesigning both mobile and desktop versions of the Inside PNNL newsletter.

Even though mobile Lab Web is out of scope for this project, we still kept responsive design in mind and proposed high-level design solution for the mobile version. Only by doing so, can we make sure the design on different platforms are consistent and scalable.

Inside PNNL Email Newsletter Redesign

inside pnnl newsletter

newsletter on different platformsWe brought 3 major new features to the redesign of Inside PNNL newsletter:

(1) Pictures and synopsis;

(2) Color coding different categories;

(3) Responsive design.

As users complained the current newsletter is too flat – has only links to full articles – we added thumbnails and synopsis to the redesign to make it more informative and attractive.

Also, many participants mentioned their habits of “scroll and skim” on the Lab Web to find anything interesting to them. Accordingly, we brought this pattern to the newsletter, make it a long, scrollable list of news. To help users quickly locate their interested topics, we utilized different colors for different topics( Lab News, Science & Technology, etc.) to make each group stand out.

Since the solution should work across different platform, we applied responsive design in the prototype to keep the newsletter consistent on desktop and mobile device.

The most frequent parts we iterated were the size of thumbnail images and the length of the synopsis. How did we approach it? We researched various current newsletter on a different device to figure what font size and image size fit our goals the best.


Lab Web Redesign
1. Inspiration: Design should be solution based, visually satisfied, technically feasible, and content friendly

inspirationTo redesign the Lab Web, we started with a board collecting all kinds of inspiration.

As customization is the way that users advocated to meet their diverse needs, we planned to highlight the customization with a dashboard view. My teammate Jackie, the other UX people in the team, gathered many visual mockups from Pinterest and proposed to use a masonry layout to achieve the dashboard view. Google plus is a representative of masonry layout, which arranges different functionalities with blocks.

While my teammate focused on Pinterest, I spend more attention on looking for functioning websites that share similar goals with ours. References from Pinterest are always good looking, but may not be technically feasible and validated by real users. Existing websites, however, are more likely equipped with better usability and doable backend solutions.

Besides, I believe visual is far from sufficient to built a robust website design. What also matters is the information architecture that organizes information in a clear, logic, and user-friendly way. So, how can I approach it? I realized the lab is more academia-like environment that involves various departments, scientists and research groups. Therefore, it reminded me of websites of universities that share similar ambience with Lab Web. Accordingly, I investigated universities’ websites to look how they present news, organize information, and help users navigate. I also paid attention on their design of campus calendar to see what’s their solution to deliver time sensitive information across the board.

2. Ideation: The loop of sketch and iterate to tailor a design that solves our problem

sketch by Jackie

sketch_by_XuanSketch by Xuan (me)

Inspiration ready? Go sketch! For each issue, we brainstormed first, and then jumped into the infinite loop: diverge, converge, critique, tweak, and iterate.

Based on the masonry design, we started with wireframing to figure out where and how to layout each feature. After the basic layout came the interaction and interface design. We went through each feature one by one to iterate the look, feel, interaction, and usability.

3. Design feature by feature
Layout – Enable customization with dashboard view

current-and-redesign-layout-highlight-customizationThe most common theme we heard from research was “customization”. Therefore, in the redesign we brought the concepts of customization:

(1) Customizable functionality:

We turned the layout into a dashboard view, where all sections become moveable and resizable “widgets”. Basic widgets like Inside PNNL are mandatory, but others are elective. We hope by doing so, users will feel more engaged with Lab Web as it becomes more useful and personalized to serve their unique needs.

(2) Customizable content:

When it comes to internal news posted on Inside PNNL, some scientist focus on research progress, but non-scientists care more about general lab news. To help audiences prioritize their focuses, we enabled Inside PNNL news feed – “My News”. By subscribing to specific topics, users are able to read their favorite categories in a separate tab. All news will still be available under the other tab “Inside PNNL Today”.

(3) Solutions to responsive design

When it comes to responsive design, we talk about “mobile first”. But in our project, the mobile version is out of scope due to technical feasibility. Under such circumstances, how should we treat the responsive concepts? As the redesign introduces the block-like “widgets”, we imaged that those widgets could be collapsed in the mobile version according to the view size. So, even though we couldn’t realize the mobile prototype, it’s still possible to implement the new feature – customization – across different platform.


current-navigation

redesign-navigation

Navigation – Clear & Efficient

(1) Site Logo:

This logo will direct users to the PNNL external website, but users expect it to bring them back to the internal Lab Web’s homepage. To eliminate such confusion, we move the logo from header to footer for clear navigation.

(2) Topic Index:

When using current Topic Index, users have to click through multiple pages to get destination. To save a step for this popular feature, we brought it to the homepage as a sticky navigation for better efficiency.

(3) Navigation bar:

The major features of current Lab Web were displayed as a side bar, but research indicated that users consider top navigation the primary and would disregard the side bar. Thus, we centralized navigation to the top to make them stand out.


My Links – Maximize internal resources by enhancing interaction design

current-and-redesign-my-links-and-interaction

MyLinks is the top popular function in current Lab Web. It’s a panel on Lab Web’s homepage that allows users to customize quick links. However, some users were still not aware of the call to action button – “Edit”, or confused about how to edit links due to lack of instruction. Besides, there is no timely feedback and confirmation when user edit links, making it hard to recover from mistakes.

Accordingly, Jackie differentiated the color of “Edit” button to make it stand out, and I added feedback in interaction.

What’s more, I noticed that there are so many useful internal PNNL websites exist, but it’s hard to know what they are and how to get there. To maximize the internal resources, I added an internal links library in the interaction where users can easily search, choose, drop, and drop their links to the current list. By doing so, internal resources become more visible, and users don’t have to copy and paste URL links when editing their links.


current-calendar

redesign-callendar

Calendar – Follow convention

When skimming through the newsletter, most audiences are looking for seminars. But this is not the most efficient way to discover time sensitive information – a robust campus calendar is highly desired.

The current calendar on Lab Web is disregard due to many flaws. It’s not only visually confusing but make users jump between different pages when filtering different categories.

When asked about the calendar, one participant impressed me by mentioning Google Calendar, Apple Calendar, Outlook, etc. I realized that the best way to design an internal calendar would be following the convention – design something like the popular calendars people are familiar with.

Thus, we created an event widget where users can filter events in one place and easily add events to their personal calendar. Also, we proposed the expanded full calendar view should follow the convention.


Prototype

After creating those hi-fi mockups, we built an interactive prototype with inVision to demonstrate the interface, flow, and interaction. With the prototype ready, we moved forward to testing to get feedbacks from users.

>> Play with the prototype <<


EVALUATION

test-flow

Prototype Testing

We randomly selected 7 PNNL staff as participants for user testing.

I planned a series of  scenario-based tasks that users can experience every feature in the redesigned Lab Web and Inside PNNL newsletter. From accessing a specific article on newsletter, edit My Links, to add, remove and resize customizable widgets, users were asked to thinks aloud to inform us what works and what doesn’t.

Apart from success rate for each task, I designed a post-test questionnaire with Likert Scale focusing on evaluating users subjective feeling. With both quantitative and qualitative data, we were able to move forward to more iterations.

Card Sorting

I consider Lab Web and Newsletter platforms that deliver the content of Inside PNNL, so usability testing is far from sufficient to validate a redesign. Accordingly, I introduced card sorting to collect content related data to enhance our design.

I gathered article samples in different categories from Inside PNNL archive, printed as cards, and asked participants to group them and name each group.

By doing so, I was not only able to know how users would like to categorize the content but what is the gap between the current categories and expected ones that we heard from user research.

The following charts show the results of post-test questionnaire. The statements displayed on charts are simplified from the original questions. Check the questionnaire for detailed questions.

Lab Web redesign: Clarity over simplicity

lab-web-testing-feedbackThe statements in the charts are simplified from the original ones on the questionnaire. The Lab Web redesign was built on the new feature – customization. However, one participant is not a fan for customization at all, so he had super low agreement on any statement associated with Lab Web redesign. But over all, most participants considered the redesign helpful and easy to use.

The most significant issue was about labeling and icon. We utilized many icons and minimized the labeling with the hope to achieve simplicity. However, users got confused with some icons, mentioning not knowing what the icons stand for and what would happen if click on them. I realized that such a simplicity sacrificed clarity. So in the iteration, we focused more on clarity by completing the labeling and applying more standardized icons.

Inside PNNL Newsletter redesign: Content is the drive

newsletter-testing-feedbackParticipants were presented with both mobile and desktop version of the newsletter redesign.

While the majority of participants agreed that the redesign is more visually attractive and informative than the current one, it’s still hard to engage audiences in diving deep with the content. Since the visual part is so far so good, we assume the reason is on the content side. According, we proposed to test it again when the content change is ready.


ITERATIONS

Based on that feedback, we designers ran more rounds of iterations to improve the features, and the content side took the results from card sorting to develop a better information architecture.

>>>Check the 2nd prototype<<<

layout-iteration

inside-pnnl-widget-iteration

calendar-iteration


REFLECTION

When it comes to the feature of customization, what am I thinking?

Flexibility VS. Simplicity

While most participants considered the customizable widgets helpful, 5/7 of them claimed it’s “way too busy and complicated” with so many widgets displayed on the homepage. Thus, in the design iteration, we cut down the widgets to the most popular and basic ones, and inform users to add more if necessary.

What to customize? The feature or the content?

As for the calendar, we once designed event filters and focused on what’s going on today. But participants in testing mentioned that they would like to plan in advance, indicating the needs to filter by date enjoys a higher priority than by category. Also, the pre-set categories in the first design didn’t apply to all users. Some would appreciate the “seminars” tab, but some wouldn’t. Thus, I rethought about the calendar widgets: filter events by date for planning, color coding different categories for skimming, enable category subscription to decide what to display in the widget for customization and provide intuitive direction to full calendar view for navigation.

Mnay times, what users say ≠ whay they think ≠ what they will do

Also, 3/7 participants indicated that “We’re too busy to play around the customization.” Although they echoed “Let’s do customization!” in focus group, I realized that what they meant is “Please customize for me!”. Accordingly, I believe the best solution is not to ask users to perform customization, but provides different user groups better default page setting, so they can just enjoy the customization.

Bottom-up VS. Top-down: Balance users’ needs with business goals

In the first design, we provided the option to create one’s own Inside PNNL news feed, which means one can subscribe or unsubscribe certain topics for content customization. We thought it could help users better prioritize then news feed and focus more on their interests points. However, from the testing feedback, we realized that users were not only too lazy or busy to perform customization, but share the fear of missing any updates from the curator. Some even mentioned that, since Inside PNNL is an internal communication medium, all information from the high level should be delivered to every staff. So, it might fail its business goal when some topics were allowed to be unsubscribed. Besides, as many users get used to scrolling and skimming full articles, we disabled the ability to customize content but enabled users to toggle between synopsis view and full article view for a more familiar scrolling experience.