Commvault Design System Tool

Revamping Internal Tools for Seamless Collaboration During a Major Rebrand and Tech Transition

Join me on a journey of revitalizing Commvault's internal design system tool, transforming it from an underutilized resource to an essential asset during a pivotal company rebrand, a transition from Angular to React JS, and the launch of a groundbreaking AI product.

My Role

Lead UX/UI Designer
UX Writer

TOOls

Sketch, Figma
Zeplin, Storybook

Team

Kha Nguyen - Product Manager
Jason Yan - Engineer
Nalin Gupta - Engineer

Stakeholders

Product Manager, UX Engineer, UX Writer,
Visual Designer, UX Researcher

My Role

Product Designer

Tools

Figma
Qualtrics

Team

UX Researcher,
Reporting to
CEO & Head of Product
‍

‍

duRATION

5 months
(January, 2023 - May, 2023)
‍

Timeline

My Role

Lead UX/UI Designer
Graphic Designer

Tools

Figma
Storybook
HTML/CSS
Javascript

Team

1 UX Developer,
Reporting directly to
UX Leadership
‍

‍

duRATION

7 month (June, 2023 - December, 2023)
‍

Download AccessMap Today!

Find your personalized way to explore the city.
Current Region Supported: Seattle, Bellingham, Mt. Vernon (WA)
Both Android & IOS available.

Android IOS

Solution Showcase

A demo product launch poster with detailed picture of revamped functionalities

" How did you solve the Problem? " TL;DR

Process

High fidelity Screens diagonally displayed

Research Section title. A man with graphical elements surrounded him on the right

Pedestrian-centric concept

Pedestrians need information about sidewalks, crossings, and steepness of inclination to fully plan a reliable trip .

Existing Solution

AccessMap Web has been published for 3 years, providing pedestrian-centric data in an informational harbor.
Click to explore AccessMap
‍

Mobility Profile

What makes AccessMap user hold flexibility with their trip planning ?
That is the user mobility profile, maximum uphill/downhill constraints based on the calculation of sidewalk steepness.
(Previous Research Established by Anat Caspi and Nick Bolten)

Research Section Title with a man standing on the right. Graphical elements surrounding him

Who is Admin User?

Admin User, refers to the person who manage users in their organizations using Smartsheet platform.
* They use Bulk Actions to merge users, import users or update user permissions in bulk.
* They also use Reports to keep track user list, published items, log in history, and sheet access.

Existing User Flow

We noticed that, given that Report & Bulk Action looks similar in the menu, these two features are actually differently in terms of available actions and destinations. However, Smartsheet missed opportunity to differentiate features.

User Persona

To better understand pain point from user perspective, we conducted contextual inquiry of 50 + Customer complaints and interviewed 5 enterprise admin users via Smartsheet UX Research outreach. We synthesized findings from user research to reveal frustration from admin users like Ada:

User Journey

Existing user flow & user persona weave in a complete journey map to let us organize the opportunity we can improve Admin center for the user, also let our stakeholders evaluate feasibility of revamping each pain point within product development cycle.

A blue background photo with a line span across the three blocks. Line represent user frustration and block represents the stage of action

Usability issues highlighted in the existing design:
1. Poor Discoverability
Generate reports and Bulk Actions are two sub-features nested in a dropdown menu on User management page.
User have trouble finding the interaction entry point.
2. No regular update on action status, even in low granularity
When action is submitted, only one "sent" banner showed up. User cannot track down action progress.
3. User associates spam email filtering with system unresponsiveness
Action results sleeks into user's gmail inbox, but smart filtering will get confused by the automated emails and labeled them as 'spam' mails. Without direct results sent to the desk, user gets confused & anxious, leading to repeated actions.
4. User feels bad about themselves, with apathetic error message and no follow-up solution
When Bulk Action fails, system will prompt "error occurs, failed attempt" with no further indication.
User do not have enough instructions to correct errors. User feel they take full blame of causing 'human error'.

Refine Design Problem

From calling for information transparency of User Management,
‍
Overarching question is broken down into following parts:
* How might we inform user for action update?
* How can we present reports & bulk actions differently?
* How might we shift away the feeling of guilt from user?
* How can we hand over results directly to user?
‍

Scope & Constraints

Since we only have first 3 month to design, implement, and test MVP solution for the entire design. After carefully negotiating with Smartsheet team, we decided to not to change the user management page. We will work towards adding interaction touch point page to make reports & bulk actions more discoverable on their own.

four lines, colored in green, yellow, red , and red dashed from top to bottom

Atomic

Green = Mild or No incline
Yellow = Moderate incline
Red = Significant incline
Dash = Inaccessible
(over maximum of mobility profile)

A colored scale transitioning from green to yellow and to red. Numbers are labeled underneath, from 0 to 14

Molecular

1. Incline are measured in percentage(%), scale 0-14
2. color measures how difficult for user to walk with respect to
incline of X% based on current mobility profile setting
(X is the number on scale).
For example:
Green = mild or no incline, user can walk with high speed

Organizational

Mobility Profile documents user’s maximum uphill/downhill steepness
and recommend feasible routes based on profile configuration

Presents available for wheelchair, powered, and caned users (Fixed values).

Web Functionalities

Current web app has several key stage highlights:
a) Mobility Profile Customization
b) Sidewalk/Crossing exploration with respect to adjustments of mobility profile custom mode
c) Location lookup
d) Route planning
e) Get direction & Trip information
‍

Section Title for Ideation stage. An illustration of a girl doing meditation on the right. She is wearing blue-black strip t-shirt.

Design Principles

Consistent

The experience we create should integrate seamlessly into
Admin Center UX/UI experience.

Visible

Our designs should provide useful tools and knowledge with ultimate clarity

Natural

The interaction we create should feel as part of the Smartsheet product ecosystem. No extra onboarding needed.

Brainstorming

We quickly brainstorm over possible solutions, and we come up with the most feasible Top 3 candidates:
a) Email Tracker Optimization : Design and develop a progress bar for action tracking.
b) Dashboard: Design a dashboard to tracking Action status, store history, and retrieve past request
c) Voice Mail: Design and develop a voice call API to call the Admin once request is finished.

Our team choose Dashboard Design.
Both voice mail and tracker optimization provides support for single task flow,
but only Dashboard meets the feasible implementation capacity with supporting back-end infrastructure, with coverage for action history, all-in-one solution.

Use Case

Based on user pain points we learned from user journey, I summarized following use cases:

Two columns of text. First column consists of user pain point. Second column consists of user cases

Feature Narrative

To create an administrative experience that allows Smartsheet Admin users to track down reports and bulk actions in a consistent, visible, and natural way. The key components are:

Two columns representing convergent analysis from user case to features, with another column of specification for certain features.

Use flow

Based on feature narrative, we constructed the User flow, considering the following:
a) First-time user experience vs. returning user experience;
b) Differentiation of viewports for Reports and Bulk Action
c) Technical logic & infrastructure capability

User Journey & Painpoints

I took observation data from past AccessMap Web interviewees and summarized the following user journey:

A user journey map showing user frustration at each stage of map routing.

Here is the summary of user pain points at each stage:

A list of columns showing user pain point at each stage of map navigation

Based on our primary research, it is worth noticing that current AccessMap fails to meet expectation of establishing effective mental modal for pedestrian navigation, also creating frustrations and barriers across trip planning and direction orienting.

Section header for Analysis section. An illustration of a girl is on the right.

Low-fid Wireframe:
What is the defining experience?

Solution 1: List View

List view gives a linear view of action history.
Pro: Minimal, simple design / Easy to follow
Con: Can be information overload to lookup a long list of records.

Digital sketch for list view low fidelity wireframe

Solution 2: Card View

Card View helps create scene for each individual action, providing support in context-based environment.
Pro: User have better "Recognition than Recall" for past actions.
Con: Might be too busy for overall visual, considering each action takes separate space.

Digital sketch for card view low fidelity wireframe

After negotiating with product manager, engineer, UX designers from Smartsheet,
I choose to proceed with List View, as List view outperforms for management efficiency
with less interaction cost jumping between actions.

Mid-fid Wireframe:
What to come up first?

I further enhanced two versions of design based on user needs of archiving and retrieving information.
Both versions are brought to concept validation with actual users and Smartsheet stakeholders.

Simple List

This solution provides a basic list view of the submitted requests. User can keep track of the submitted requests based on reverse time order.

Accordion List

This solution makes history tracking more easier. User is one click away from previous versions for a certain requests.

User Interview

We conducted 5 user interviews with enterprise Admin users to
a) dive deeper into user pain points into working scenarios,
b) validate our design concept and choose from two solutions.
‍

Key Direction message helps us to:
a) Revise user flow with a more detailed focus on retrieving information;
b) Proceed with Simple List Design Solution;
c) Add edge case into design scope;
d) Be aware to reduce unnecessary information overload and unsupported data at back-end.

Mid-fid Wireframe

Based on feedback from concept validation, I pivoted the design in Sketch using Smartsheet Design System.
(Click to enlarge)

Technical barrier: Missing tracking data, not as expected

Originally we plan to allow for a loading bar to visually signify the progress.
Development team informed me that percentage progression of request is not available at the back end.
Instead, I designed four action-based status: Submitted/In Progress/Completed/Failed,
corresponding 4 query states read from the back end.

Dashboard Design (Sample Screen)

Report Dashboard

error message after second iteration, with Smartsheet UI Design System

Error - Bulk Action

High-fid Mockup:
Convene what we can do for users

To address usability issues we've discovered along the way, we customize the following features:

Screens

A summary table of usability testing. Key insights attached

We conducted usability testing with another 5 Admin users to test if our design address the user pain points.
We refer to (a)Task Engagement, (b)Clarity, (c)Efficiency, and (d)User Satisfaction as metrics of success.
‍
a) every task can be completed under 30s.
b) All of information are presented logically, even for the first time user who've never used admin center before.
c) User reach 100% agreement that this tool achieved what they expect from reporting download & bulk action upload. All User finds this dashboard fit in the Smartsheet product suite perfectly, without extra onboarding.
d) Users do not feel frustrated when error page jumps in. They can separate errors from guilt feelings. All users can follow the prompt easily to correct system errors.

🥳 Now it is safe to say this design helps user to stay intuitive, consistent, and natural in the loop!

A stack of paper represent bulk action. A report board represent report

Visual Design

I collaborated with Graphic Design design on the illustrations for empty screens. Designer conversation was wild and visual-oriented. Every pixel change matters!

My contribution included:
Provide key concepts, Sketches, Wireframes, and iterations on color scheme and iconography.

UX Writing

Word choices, sentence structure, and even punctuation can send off
emotional message to user! For example, B2B product should encourage user action with neutral tone...

We renamed the dashboard name from "Bulk Operations & Reports" into "View Reports & Bulk Actions" to lighten the technical asset of this dashboard.

My contribution included:
Revised UX message

Front End Dev

Our feature was developed by capstone team members, advised by Smartsheet developers. I kept negotiating with what features
we can do with current infrastructure.It is all about know your business goal and constraints!
We implemented all UI elements in Storybook.js.

My contribution included:
Coordinate feature spec over Zeplin,
Negotiation for feature feasibility,
Advise design implementation in Storybook.js

❤️ Learning Opportunities

I learned a lot as a UX Designer in the actual B2B product scenario.
A lot of UX iterations happen before we fully dive into UI. What you see here is just the best part of my work.
No one really knows the best possible design, but it is the user testing and cross-functional team collaboration assured me that I am really making an impact for the project.
‍

❤️ Collaboration

Cross-functional team collaboration is something I have NEVER EVER seen in my academic life.
Different perspectives from different stakeholders at a fast pace.... Engineers, PM, UX Designer, UX writers... They are have something to say on the table.
Sometimes I need time to process and synthesis ideas coming from all the angles, but having these conversations really optimize the experience design, UI design, and even writing in subtle details.

❤️ Design is Life

Working with Smartsheet allows me to appreciate every UX/UI work I see in my daily life.
You never know how much time or how many teams it takes to deliver the experience you see on the page.
We might be fighting for whether to add a button or an icon behind the scene across the team,
but user may just flash out and take that click like in a second!
It might takes rounds of iteration to get that sense of second-nature, but it's totally worth it when it helps engage user better with our product!

❤️ Special Thanks to...

Capstone Team Members: Jason Yan, Nalin Gupta, and Kha Nguyen.
Smartsheet Mentors: Kate Hsu, Willow, Matthew, Daniel, and every other members who support us at the back!

Illustration by Open Doodle.

Research Ideation Concept Validation Design 2.0 Design 20.0 Usability Testing Handoff Takeaway

Refine Design Problem

Based on research and analysis, I refine the design question as:

How might we create barrier-free pedestrian navigation experience so that users with limited mobility can take reliable, risk-free trips in the urban environment?

User Persona

Primary user mobility-constrained users in map navigation and route planning scenarios

Wheelchair users is the representative user who have explicit, non-negotiable mobility needs. Other cases include powered wheelchair, cane users, and strollers. In our current development cycle, we choose the wheelchair, powered wheelchair, cane users to be our flagged persona variants. Based on the primary needs, we brainstorm over the accessibility concerns might associate with our target users.

Possible accessibility enhancements we can build on top the primary UX/UI design

Scope & Constraints

a) Due to time constraints for IRB user research approval, our team decided to focus on translating key functionalities for general users of pedestrian-centric information. But we kept in mind that mobility constraints are non-negotiable, which means we will prioritize reliability rather than flexibility to prevent usability risks.
b) Due to technical infrastructure limitation, real-time direction is not supported at this moment.
Therefore, we will include the experience in our design but not going further into this topic.

Use Case

Based off on User Pain points at each stage, I come up with the following use cases:

Executive Statement

We want to create the experience that
a) give pedestrian-centric information for mobility-constrained users
b) enhance accessible design to accommodate people with visual and fine motor control disabilities
c) accommodate those with situational and temporary accessibility needs mentioned aboce

Section title for Ideation stage. An illustration of a girl meditating on the right

Design Principles

Our solution should allow user to explore their interests freely yet reliable result supported,

The experience we design should be neutral and restrained, avoiding exclusions and biases.

The experience we design should like second-nature for our users and use with ease

Design Concept: Modular System

A digital sketch of app sections on the app screen estate.

Just like LEGO bricks, it should be easy to assemble a page or switch a gadget when needed. Therefore, I decided to follow the concept of modular system to keep all information blocks light-weighted. This concept also helps the grouping labels , which is the vital step to create accessibility hierarchy for screen reader experience.

Design Language: Material Design

AccessMap Web applies Material Design as design language,
because AccessMap is primarily designed for Android user.
With Material Design, it brings a sense of familiarity for Android users to use our product.
I believe this design language will strengthen user's trust in our mobile experience as well.
Therefore, I proceed with Material Design as the our design language in this project.

Interaction Stratergy

Based on design research, I limited gestures to single pointer gestures, including tap, double tap, and long press to maintain the accessibility enhancement target to fine motor control disabilities, as well as a common practice for Accessibility Guidelines.

A comparison photo showing single pointer gesture is more accessibility friendly than double pointer gesture

Use Flow (Features included)

A visual diagram of use flow for AccessMap experience

Feature Narrative

Based on user pain points, user scenario, and existing app analysis, I design the full feature roadmap:

A summary table of user pain point, use case, feature, and accessibility enhancement roadmap at each stage

Section header for first design iteration

Low-fid Wireframes

Three low fidelity wireframes demonstrating screen space usage

For low-fid wireframes, I designed three demo screens.
My goal is to highlight the mobility profile as a primary function in the screen.
Action modals will pop up from the bottom, where it will cover setting menu for immersive experience.

Section header for concept validation. A dancing man illustration on the right

Concept Validation, what went wrong?

A User Interface Architecture graph showing the usage of app sections on the screen

However, our internal evaluation concluded that same usability issue showed up in these wireframes,
that is the limited screen space. Limited screen space could cause escalation of accessibility issues, such as small touch areas and information overload on single page, which will negatively impact the audial, visual, and haptic experience with our app.
‍
Persistent mobility profile section and pop-up modals both contributed this problem. Therefore, it brought up my attention to revise the layout with more space-efficient modals, as well as minimizing mobility profile when setting is collapsed.

However, developer Jay, who has worked with VoiceOver as an Android Developer, agreed on my modularization concept. She confirmed that modularization would help to differentiate layers of information and make it more friendly to layout the labeling hierarchy that works best for screen reader experience.
‍

Section header for second design iteration

Mid-fid Wireframe

Based on concept validation feedback, I quickly prototyped the wireframe with before/after comparison.

Before After comparison for mobility planning wireframes

Before After comparison for location lookup wireframes

Before After comparison for route planning wireframes

Highlights:
a) Replace fixed mobility profile as hovering buttons (Mobility profile and Downhill/Uphill switch)
b) Add persistent page controller to maintain the consistency at navigation level
c) Consider edge case in route planning with unobtrusive UX message.
d) Justify zoom in/out, route from here, and route to here icons as alternatives for screen-reader experience.

Questions Remain unsolved:
* How to properly reduce the screen space of mobility profile modal without compromising its functionality?

Section header for usability testing. An illustration of a girl reading a book on the right

By the time we completed mid-fid wireframes, our developer quickly grasps the changes and implemented in the AccessMap Beta version. We then conducted user interviews to validate to what extent have we address user painpoint

A summary table of usability testing, including insights

See full usability testing script here.

I synthesized insights with interesting discoveries:
a) User needs immediate feedback from anxiety of out-of-scope/loading/action submitted.
b) User needs more space to explore the map, which aligns with our earlier validation.
c) Our color scheme creates unintentional exclusions for color blindness. To further prevent, I will try to avoid use of red-green in the system color and look for alternative color scheme for scale.
d) People like our ideas and think it is not just for mobility concerns. Everyone can find its use in their life!

Along discoveries, I also find new directions to proceed with the design:

A summary table of Insights derived from usability testing and corresponding design directions

Section header for second design iteration. An illustration of girl dancing on the right

High-fid Mockups

Highlights:

* Separate modal for uphill & downhill modes in Mobility Profile
* Single Tap interaction across all screens

Interactive Prototype

Click to view Interactive Prototype Demo

(Note: We use Android Small [360* 640 px] as our primary canvas,
we reserve fixed space for Action Bar.)

Design System

Section header for handoff. An illustration of man standing on the right

Development

I freeze my mockup and sent it over to Jay, our Android developer who works closely with accessibility studies and engineering.
‍
We co-design on the subtle interactions and touch areas to make sure they are large enough for a thumb tap.
‍
Since Jay programmed AccessMap with Javascript, we have the flexibility to upload it not only as an Android App, but also an IOS app as well!

On October 15th, we launched AccessMap Android.
‍
On December 3rd, International Day acknowledging Persons with Disabilities, we re-published our AccessMap on both platforms!

Header section for topics of next design iterations. An illustration of dancing girl on the right

We are continue to work on revamping the mobile experience for AccessMap:
* We can further support multi-modal transportation with live bus data in King County, WA;
* I am conducting research to work on context-aware, personalized quiz tool for mobility profile;
* We are working on defining and standardizing labeling and focus order to enhance screen reader experience.

Header section for takeaway. A girl playing on swing on the right

❤️ Design for accessibility is design for everyone

Accessible design can be used by anyone, but having it being accessible needs careful study on exclusions and strategies to overcome such barriers.

❤️ Publish An REAL App!

As a designer, it is really exciting to see my work thrives as a real app! Behind the scene, a lot of things are happening:
crashing, bugs, blurred icons or images. Everyone on my team worked the best we can to guarantee user see a fully-functional app. That was a fascinating experience and I really enjoy it!

❤️ Focus on User, the core of UX Design

Working with AccessMap allows me to see the other side of the UX Design.
Instead of being visual-oriented, we need more supplementary solutions to make an accessible UX journey for all.
Audio, Visual, and Haptic feedbacks make a wholistic experience for users.
Following fancy design trend can be cool, but we should always stage our design with cool design when user really needs them.

❤️ Special Thanks to...

Jay Lin, Eric Ye, Nick Bolten, Anat Caspi and every other members who support us at the back!

Illustration by Undraw and Open Doodle.

Other projects:

Admin Center: Void of Tracking

Stealth Health Startup

Commvault Design System Tool

AccessMap

Commvault Design System Tool

My Role

TOOls

Team

Stakeholders

My Role

Tools

Team

duRATION

Timeline

My Role

Tools

Team

duRATION

Download AccessMap Today!

Solution Showcase

" How did you solve the Problem? " TL;DR

Process

Pedestrian-centric concept

Existing Solution

Mobility Profile

Who is Admin User?

Existing User Flow

User Persona

User Journey

Refine Design Problem

Scope & Constraints

Atomic

Molecular

Organizational

Web Functionalities

Design Principles

Consistent

Visible

Natural

Brainstorming

Use Case

Feature Narrative

Use flow

User Journey & Painpoints

Low-fid Wireframe: What is the defining experience?

Solution 1: List View

Solution 2: Card View

Mid-fid Wireframe: What to come up first?

Simple List

Accordion List

User Interview

Mid-fid Wireframe

Technical barrier: Missing tracking data, not as expected

Dashboard Design (Sample Screen)

Report Dashboard

Error - Bulk Action

High-fid Mockup:Convene what we can do for users

Screens

Visual Design

UX Writing

Front End Dev

❤️ Learning Opportunities

❤️ Collaboration

❤️ Design is Life

❤️ Special Thanks to...

Refine Design Problem

User Persona

Scope & Constraints

Use Case

Executive Statement

Design Principles

Flexible

Unobstrusive

Natural

Design Concept: Modular System

Design Language: Material Design

Interaction Stratergy

Use Flow (Features included)

Feature Narrative

Low-fid Wireframes

Concept Validation, what went wrong?

Mid-fid Wireframe

High-fid Mockups

Highlights:

Low-fid Wireframe:
What is the defining experience?

Mid-fid Wireframe:
What to come up first?

High-fid Mockup:
Convene what we can do for users