Hey! I'm Nick, a Digital Designer. I like making it easy for people to do things online, and prototyping and testing design ideas. Follow me on Dribbble or connect with me on LinkedIn, and feel free to contact me there.
Designed account settings and edit workflows for Metadefender User Management.
Designed form-based password entry and recovery workflows.
Long Running Operations
Product Overview: Design System Component
Consumer Base: VMware Design Teams
My Role: Lead Product Design
Designed In: 2018
A UI component used when a long running operation is in progress, allowing the user to continue browsing while providing a view of the operation's current status.
VMware provides tools enabling Systems Administrators to manage IT infrastructure. Often, users will need to initiate extensive system processes that take a long time to complete. For example, after clicking to initiate a data center, it could take 20 minutes to an hour for the operation to complete. The Long Running Operation component provides the user the operation's status and actions, while providing the user the ability to browse the interface and accomplish ancillary tasks.
This project arose from the need to create a consistent, unified notifications system in VMware Cloud Services. As different products onboarded to the new platform, each product was addressing notifications in drastically different ways, creating a disjointed, confusing notifications experience.
Step 1: Problem Definition
After teasing apart the scenarios within which VMware notifies its users, I interfaced cross-functionally to define high-level buckets for the different notifications. One type of notification distinguished itself as high-priority in a large number of instances across the platform: long-running operations. In these cases, the user will have initiated a system process that could last up to an hour. The user may want to continue browsing the platform to accomplish other tasks, further, and may want to be informed of the task's status in those subsequent views. Defining these points cross-functionally in the research phase informed the design solution we ideated around in Step 2.
To support an understanding of the current problems users were encountering, I created a journey map illustrating some of the gaps that existed in current products. This document, along with first hand customer research, helped define requirements to include in the final product.
Step 2: Ideate
I mapped out flow diagrams illustrating how to accommodate—both in-app and offscreen—workflows to enable a good user experience within these scenarios. As the flow diagrams became more refined, I spec'd the specifics of the interaction design in different contexts, which you'll find below.
Step 3: Refine
With the basic interaction in place, I moved into refining the visual and interaction details: tweaking the color palette to meet AAA accessibility standards, for example. The component's interaction at scale was defined, as well, along with the specific details of the interaction: the length of time in which it animates from state A to B, the animation curve, etc.. I worked in Framer to create the specifics of the various states, and the final deliverable was a working prototype and supporting documentation describing the long-running operation component.
Step 4: Edge Cases
After defining the base component and its various states, I began to consider the different cases in which a user will encounter this component. What if a user initiated two long running operations at the same instant, for example? Or, what if the operation times out, or encounters a server error? I moved forward and addressed all edge cases, incorporating engineering feedback to help define implementation gaps.
The interaction diagram below outlines the different cases covered in the Long Running Operations design. The user can hide the widget or the cancel the operation as they browse the interface to accomplish further tasks. Further, if the user wants to leave their computer while the operation runs, the workflow supports that use case. If the operation fails after the user closes their browser, therefore, we send an email to inform the user that the task has failed in order to inform the user should that task prove perilous to their deployment.
Step 5: Next Steps
Currently, as part of the broader notifications design, I'm working to integrate the long-running operation component into the larger notifications design strategy.
The design component is being integrated for release as a component in the Clarity Design System. I look forward to seeing how different products utilize the Long Running Operation Component, and to iterating towards improving it!
Product Overview: WiFi Management Software
Consumer Base: Wireless Network Administrators
My Role: Lead UX Design
Designed In: 2015
Aerohive provides IT administrators a convenient interface to setup and maintain WiFi Networks. Health View gives them a unified interface to diagnose and solve network problems.
WiFi administrators monitor deployments across many different geographical locations. For example, imagine the workday of one of our customers, Brad, Network Administrator at Chic-Fil-A. Brad's job depends on insuring the wireless network at any one of many Chic-Fil-A locations, insuring that all maintain sufficient internet access simultaneously. Brad would love to have a unified, centralized view of his entire network behind a single "pane of glass."
Step 1: Understand Our Users
The first step I took when tasked with the Health View was to gain greater understanding of our end users. I led the team in crafting some traditional ux deliverables: crafting empathy maps, user scenarios, and fleshing out personas. We took it a few steps further, however, traveling on a week-long customer visit to interview customers and determine pain points with our current software. The in-person interviews were valuable, giving us first-hand accounts of user scenarios and pain points in current implementations.
Step 2: Ideate
Our initial research allowed us to align around a key goal: creating a single interface to diagnose and remediate network problems. After gaining alignment on the goals of the project, I developed low-fidelity sketches and wireframes to demonstrate big picture navigational ideas. As you see in the sketches below, different types of views were explored. After interfacing with users and stakeholders, the map-based approach proved to be the most promising in context of our users' deployments.
Step 3: Prototype, Test, and Refine
Often the most enjoyable part of the process, we began prototyping early. I started with creating high-level navigational elements and connecting them to illustrate user flows. We created some simple prototypes and tested them with our users, culling learnings that we baked back into the final solution through contextual inquiry techniques. Here is a clip of one user working through an early version of the interface:
Step 4: Visual and Interaction Details
Throughout the process, we were constantly trying new visual and interaction design paradigms. I worked closely with the visual designers, and my background in Visual Design helped to guide them towards a cohesive design language. I prototyped detailed micro-interactions, as well, testing ways to improve ease of use through advanced user interaction. Prototyping in front-end languages (html, css, and js), eased implementation on the development side, and our developers really appreciated the help ;)
"Please pass along [thanks] to the team developing Healthview. I know I’ve been a little skeptical of it’s value, but yesterday it helped solve a real-world problem for my customer so I’m warming up to it… Health View helped them quickly isolate which switch had the problem, they went in and reconfigured the VLANs and everything came up."
Overall, the project has been well received! Our users have appreciated the attempt to structure the interface towards guided workflows:
Product Overview: Local Marketplaces
Consumer Base: Tech Savvy, Cash-Strapped Youth
My Role: UI / UX Product Design
Designed In: 2015
Symplyst is a startup that I worked with in-between my time at CrossCap and Aerohive Networks. The map-based iOS application allows users to find products within their immediate area, watch them, and set alarms for when similar products appear.
Finding quality, cheap, high-end reused goods nearby provides value to savings-conscious buyers. Symplyst aims to provide a convenient interface within which buyers and sellers can communicate easily and safely.
Step 1: Define the Users
Operating under a startup budget, I was tasked with gaining learnings as quickly as possible. I worked with Product Managers to define our personas: cash-strapped, tech savvy youth who want to find quality goods at a bargain.
Step 2: Test Lo-Fidelity Prototypes
I led guerrilla usability studies to determine whether the high-level information architecture was effective. The navigation of the app is anchored in the top and bottom navigational bars. After testing 20 users representing a cross-section of our persona, we had enough data to validate the navigation architecture. We implemented the navigation, then moved on to refining the visual design language and interaction paradigms.
Step 3: Create Visual Design Language
After defining the structure of the app, I moved on to creating a consistent visual design language. I created a typographic structure reflecting the hierarchy of the app, and a restrained color scheme to draw attention to the action buttons.
Step 4: Hi-Fidelity Prototyping and Micro-Interactions
With the structure of the app in place, I designed transitions and micro-interactions to delight users as they perform complex tasks. Here are some of the final interaction designs:
Unfortunately, the startup was unsuccessful. However, the experience of working in a startup environment was extremely valuable.
Product Overview: Standardized Test Management
Consumer Base: Students
My Role: Lead UI / UX Design
Designed In: 2013–2014
Educational Testing Service creates standardized tests: ACT, GRE, etc. HiSET is the newest test, and the team wanted to create a splash with a fresh web app to allow students to manage test taking and view results.
Students depend on standardized tests to advance their education, and we were tasked with creating the interface to make testing as seamless as possible. Students need to find test centers, schedule appointments, and view prior test results.
Step 1: Define the Users
The first step to take in this project was to engender empathy with our users. Students have a lot to balance between school, after-school work, social lives and extra-curricular activities, among others. I wanted to make sure that our interface made their lives easier and spoke to them in a design language they could relate to. I worked with cross-functional teams to create these personas:
Step 2: Ideate
Great, now we know who our design is speaking to. Let's think about some of the most common use cases for those users: finding a place to take a test, booking a test at that location, and viewing past tests are some of the most important. We developed workflow diagrams and wireframes for all key use cases, and then built around the base. Building around the "finding a place to take a test" scenario, I was able to apply the search interaction / workflow I designed there for adjacent use cases. Here are wireframes I designed to address an adjacent search scenario: as a teacher, I want to find and view my students' test results.
Step 3: Design Language
Cool! Now we have some intuitive workflows. The next step is to craft a design language that speaks to our users. Education connotes many adjectives, yet we settled on a few to use when defining this interface: fun, yet formal. To craft the design language, I start with the building blocks then build out from there. Specifically, I start by applying color, typography, and imagery to previously conceived workflows.
A success! Prior to our project, ETS was a stale brand that didn't connect with the user base. The prevalence of Helvetica and stock photography gave the web experience an institutional feel, a feel that students couldn't connect with. Our project was so successful that the company decided to expand this sub-brand's experience to other sub-brands.