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 below.
Aerohive Networks provides scalable, easily configurable wi-fi solutions for large businesses and school districts. The inherent challenge I face in my role as Senior UX Designer is to design complicated systems in a way that makes them seem intuitive, elegant, and implicit.
My job was to lead the design team in creating interactions to optimize User Experience, coordinating with stakeholders to insure synthesis with product goals, and delivering hi-fidelity interactive prototypes to our development team to insure efficient cross-departmental collaboration.
ETS brought me in to create a UI / UX design system for a new product: Hi-SET. While the project was initially targeted for a sub-brand, the success of the project led to its wider adoption within the company.
Opswat brought me in to help apply their branding system to a web based project called Gears. I was tasked with creating wireframes that demonstrated layouts, components (such as buttons and links), and interactive experiences.
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:
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.
from Opswat Security Software
Product Overview: Device Security
Consumer Base: Security Administrators
My Role: UX Design
Designed In: 2013
Corporate-supplied laptops can unknowingly harbor dangerous malware, installed accidentally by employees. Opswat provides tools to prevent and detect malware for corporate security departments.
Security Administrators need tools to make detecting hackers easier. Opswat Gears is a tool that automatically diagnoses and alerts administrators when threats are detected.
Step 1: Define the UsersDuring the process of defining personas, a few types of users emerged. The primary users are Security Administrators, but during the process of user research we discovered other adjacent use cases#&58; office managers of smaller businesses tasked with doing multiple jobs, sleepless CEO's worried about their corporate network, etc. The key finding here is to create an interface to support both very technical users and users with no technical training.
Step 2: Create Some Intuitive, Contextual InteractionsI was tasked with improving the UX of some of our forms. Back in 2013, interaction with forms was often through modal interactions or hub-and-spoke information architecture. I encouraged our team to consider inline actions in our forms, thereby improving UX by allowing the user to maintain context while modifying data. I created some wireframes that demonstrated inline workflow:
Step 3: Apply Branding StyleOpswat had a branding system, but no formal "style guide." I worked on translating their branding style into the interface, helping them work towards re-usable elements. I worked closely with the marketing department to understand brand goals and ultimately helped them on their path towards creating a true style guide.
Based on customer feedback, the form treatments improved User Experience. Inline editing has become much more common these days, but at the time this interaction paradigm was more experimental. It was one of the first projects that allowed me to explore interaction design, an area that I have grown my skills in to the point that I am now an avid, adept prototyper. Find some of the final screens here: