Design
Using userflows and wireframes to solve problems
The start of my design process begins with userflows and wireframes to figure out how to prioritize information and solve for complex interactions in the product.
While wireframing, I check in with developers to assess feasibility of designs. I also conduct usability testing to get feedback. After I land on a promising direction, I create pixel perfect designs to deliver for production.
This project required a lot of design explorations. Here's 1 page of many!
I've included details on 2 interaction design challenges that I needed to solve for during the redesign of the product. For more information on other problems that I solved, let's chat!
1. Solving problems in navigation
The first challenge I wanted to tackle was to redesign the experience to make it more simple and easy to navigate.To create a working protocol, scientists need to do 3 things:
- Specify robot instruments used
- Set up the robot deck with labware
- Add protocol steps
In the legacy experience, these tasks are spread across different screens
Instruments were not grouped together, users set up their robot on 3 different tabs, and the layout of the screen to add protocol steps conflicted with information that needed to be displayed.
User testing two different navigational models
To solve this problem, I created a number of different explorations for how users navigate through these tasks. 2 of the explorations, a concept using tabs for navigation and a concept using a hub and spoke navigation model, seemed promising enough to take to user testing.
The feedback that we got was interesting. I found that while users could complete tasks to set up their protocol, task completion was slow.
I realized that these explorations optimizes for people creating their protocol from scratch, but not for people editing existing protocols.
Ultimately, I created a new concept with two main parts. An overview page, and an editor page. This was the concept that made it through to production.
2. Designing a form that reveals complexity when needed
The second design challenge to solve for was creating a form that is simple, but can reveal complexity and advanced functionality when scientists need it.
The existing layout overlapped the robot deck, a place that users need to reference to fill out the form. Form labels were not descriptive, and advanced settings were not displayed in an intuitive way.
To solve for these issues, I first explored a new layout to display the form in. This layout helps to keep the robot deck in view while a user is filling out the form.
I explored a concept using tabs to separate out basic inputs with more advanced inputs and also a concept separating out the form into different pages.
Ultimately, due to complexities within the form and dependencies between fields, I decided to move forward with the concept that separated the form into different pages.
