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.
from Aerohive Networks
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 UsersThe 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: Create Some StuffOur 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 RefineOften 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 DetailsThroughout 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 UsersOperating 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 PrototypesI 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 LanguageAfter 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-InteractionsWith 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 designs:
from Educational Testing Service
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 UsersThe 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: Create Some StuffGreat, 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 LanguageCool! 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.