Nanotech Desktop Software – Responsive & Material 2018-09-06T15:33:30+00:00

Project Description

Nanotech Desktop Software – Responsive & Material

SOFTWARE FOR CHARACTERIZING NANOPARTICLES

Situation

Client is a leader in their scientific niche. However, they found that users had major issues with their software. It was outdated and incredibly difficult to use. Novice users were having a hard time with the intense learning curve and the client knew it was time for a change.

  • (1) Project Manager (PT)

  • (1) Senior UX Designer

  • (1) UX/UI Designer (Me)

  • (2) Product Managers (FT)

  • (8) Engineers – Front End & Back End (FT)

How does it work?

Scientists can use the data from the instrument to identify particles that are optimal for specific applications. A few use cases would be the perfect formula for making paint dry more quickly, or identify a preservative that would make food have a longer shelf life.

(Above) Current State

High Level Explanation “The Cool Stuff”

  • It involves lasers.

  • Scientists use the system to analyze materials.

  • System requires software & hardware to work together to run the device.

Tasks

Our team was tasked with doing a complete overhaul of their product ecosystem. We were to help set the precedent for the next generation of products. Starting with their flagship hardware and software. I was on the software team.

  • UX Research

  • User Experience

  • User Interface Design

Action

We started the project with an internal kickoff and then had a client kickoff with a product overview. As part of the onboarding, our Senior UX Designer sent to an on-site training program to get certified in the software. The biggest challenge of this project was understanding the ideal workflow for scientific uses. We spent a lot of time on user research and coordinating with a key industry expert to ensure success. This involved live sessions and Q&A alongside our research. We also interviewed students and industry scientists to help us identify the key issues and use cases.

(Above) Map of Existing Menu Architecture
(Above) Interface Analysis
(Above) Competitor Analysis
(Above) What a site visit typically looks like. Photo by Roy Kaltschmidt, LBNL.
(Above) Survey Monkey Example. We sent out a survey to customers to help us better identify our users as well as identify common use cases.
(Above) Old Scientific Software.

Most scientific software is not designed using modern technologies. I was surprised to know that scientists use such outdated software every day in the workplace.

(Above) Journey Maps

After, enough upfront research we created journey maps to capture the overall areas of improvement and user story.

(Above) User Persona

We divided user personas into three main user categories based off of our interviews. Our archetypes were the novice student, the lab manager, and the working scientist, who were our power users.

(Above) Onboarding workflow

We used these workflows to discuss user paths with expert users to help define our course of action before creating wireframes.

(Above) Main Workflow for Novice Users
(Above) Example Wireframe for Collecting Data

We then created an interactive prototype to hand over to their product manager to perform testing with their clients. They also used our prototype to review with senior leadership and to show developers the expected interactions.

(Above) V1 Analysis Wireframe

In this concept, I had thought of color coding the sample files to more easily differentiate them, however, power users would more often than not import 20+ files, which made coming up with color patterns of little use. Also, there was a major toggle between overlaying multiple experiments and deep diving into single experiments which ended up becoming more of the primary navigation. We wanted to add more functionality for the power user use case and created a right-hand menu panel that would allow users to go multiple levels to turn on features and settings for more advanced functionality.

Software Prototype
(Above) Material Design Example.

I presented visual design languages to the client and explained the benefits of leveraging an existing system to streamline development & design efforts to meet our aggressive timeline. We went with a material inspired look and built off of that. I lived in this documentation for a while, I was the main knowledge holder and would commonly leverage and check standards to streamline the design & development.

(Below) Style Guide Snap Shot.

I designed the visuals for multiple screen sizes to ensure proper responsive definition and created an in-depth style guide for the software team hand off.

Hardware Prototype

High-Level Deliverables & Activities

  • Attended Site Visits

  • Conducted User Interviews

  • Created Journey Maps

  • Created User Personas

  • Created an Extensive Style Guide

  • Leveraged Material Design Guidelines to Expedite Development

  • Endless Wireframes

  • Iterated on Workflows & Micro Interactions

  • Designed Majority of Assets for User Interface

  • User Tested

  • Visual Design

Results

The new software UX and UI was well received by the CEO and the rest of the company. The software went off to be developed by their team and is estimating release in 2018. The positive reaction spurred more projects and the client was excited to keep the ball rolling.

Click to view live