Analytics Tool for Genentech
Internship Project
Role
UI/UX Designer
UX Researcher
Tools / Concepts
Figma
FigJam
User Research
Prototyping
UX Strategy
Timeline
January - March 2023
DESCRIPTION
Revamping my team's internal analytics tool to increase user satisfaction.
CONTEXT
After graduating, I interned for a year at Genentech on the Product Development, Global Clinical Operations, Insights & Analytics Team. There, I sought out product design opportunities and spearheaded the improvement of an internal analytics tool.
*Note: all IP has been redacted in the following showcase
Background
On my analytics team at Genentech, our main task was to provide data analyses to support stakeholders. My team had developed an internal web application containing a model that made predictions based on user inputs. New features were added over time to accommodate more complex use cases, thus causing the tool to become crowded and difficult to navigate for novice users, while lacking useful features for advanced users.
Since my team wanted to make this application more self-serviceable and I was looking to pivot into product design, I spearheaded the redesign of the tool to be more user-centered.
Goals
Main objective
Based on user feedback and the ultimate goal of making the tool more self-serviceable, I determined that the main objective was to streamline the user flow by restructuring the navigation and revising the page elements to be more useful.
Design Challenge
To better focus on our users’ goals, I asked myself:
How might we allow users to efficiently input data and check results?
How might we help users feel confident they are on the right part of the tool?
How might we allow users to derive the maximum insight from the tool?
Solution
Restructuring navigation
The main frustration among users was maneuvering between the inputs and outputs section where their primary work processes were located. Users were not guided by the UI in the old design, which led to confusion as to whether they were in the right place and forced them to jump around to find the right section.
To clarify the user flow of the tool, I used a sidebar with tabs with inactive states to guide users along a linear path, while breadcrumbs at the top further orient users within the tool. The home page was revised to make finding the relevant study easier, and the UI was simplified by grouping similar components. The settings were also relocated to their appropriate parent pages — a major pain point in the previous design was that you had to re-search the study in the home page to see the study settings.
Comparing inputs & Outputs
Multiple users suggested a comparison functionality in the inputs section because they would often refer to old scenarios when creating new ones. Previously, there was no way to compare inputs and outputs as the tool did not support viewing multiple studies at once. Users also wanted to be able to compare outputs, as a typical report to a stakeholder presented comparisons and users would have to manually superimpose graphs from different scenarios in an Excel sheet.
To alleviate these issues, I designed a comparison functionality in both the inputs and outputs sections. Users are able to select a reference scenario when entering inputs, which streamlines the data input process. Allowing users to directly compare scenarios outputs inside the tool also allows them to efficiently view and report any differences.
Comparing outputs between two different scenarios
Comparing inputs between two different scenarios
Research
User Interviews
To obtain a preliminary understanding of user issues, I conducted video interviews with a group comprising analysts and stakeholders.
Key Takeaways
Confusing User Flow - Unintuitive placement of buttons and subpages made navigation difficult.
Inconsistencies in the Interface - Users desired an interface that was less ‘buggy.’
Lack of Functionality - Users wanted to be able to compare input and outputs of scenarios.
User Personas
From the interviews, it was evident that skillsets and desires differed between analysts and stakeholders.
User Journey
Since the tool contained many sections, it was important to figure out where the pain points existed. Interviews indicated that most issues were concentrated in sections where users edited inputs and compared outputs of the model.
User Flow
To get a clearer view of the paths that users took to complete a basic task of in the tool, I created a user flow diagram to evaluate the problems in the existing architecture as well as ideate ways to streamline the process.
The specific user task that I decided to hone in on was an action most commonly taken by users: looking up a study, a particular scenario within the study, updating inputs, then finally checking outputs.
Iteration
During the rapid prototyping process, I experimented with multiple ways of clarifying navigation such as quick links, breadcrumbs, and/or a sidebar navigation. I ended up using sidebar navigation combined with breadcrumbs since the user flow was mostly linear and these navigation tools helped orient users within the tool.
I also consulted users regarding which pieces of information they reported the most to stakeholders and included those in the outputs section.
Figuring out the content of each page was a part of determining how the user flow would work
Early feedback
Feedback expressed by users were overwhelmingly positive, with some additional insights:
“I like the breadcrumbs bar because it shows you clearly where you are in the user flow and can click it to navigate”
“I would like to be able to easily create folders for different folders for different study designs and group drafts”
“The current summary graph is hard to comprehend, maybe have it be a simple comparison of metrics between different scenarios?”
Visual style
To consolidate the overwhelming number of options and buttons, I used visual hierarchy to clarify which functions were the most important, and rearranged the rest into drop-down menus and hover pop-ups.
More icons were added to help users better navigate the interface as visual cues can help with making the navigation more intuitive.
Since blue is known to signify reliability and innovation, I used a darker shade of blue as our primary color to showcase this and retain some elements of the previous design.
Validation
I conducted a usability study to determine how the revised design affected the user experience. In the task, the time it took decreased by an average of 18 seconds (-70%, n=5).
Based on a survey, the average subjective satisfaction also increased from 2.6/5 to 4.3/5 stars as users preferred a more straightforward user flow and the aesthetics.
“It was a lot more intuitive to use and I knew where I was supposed to go even without being super familiar with the interface” - Junior Analyst
Reflection
UX Research
First, understand the need expressed by the business.
Before conducting interviews, align on the type of information stakeholders need and then flesh out interview questions.
UX Strategy
It is crucial to have all relevant individuals get involved to foster alignment on design goals/principles to drive successful conversations.
Try to pull people out of subjective feedback as much as possible and return to UX goals.
Official kickoff workshop with everyone! (me, third from left)
