Improving Nanotechnology Education through Design

Project Context

During this industry-sponsored school project, I served as the team's designated UI + visual designer. Our team worked for one semester to deliver a redesigned nanotechnology education tool suite.

nanoHUB.org is a science and engineering gateway comprised of community-contributed resources and is geared toward education, professional networking, and interactive simulation tools for nanotechnology

The Task

The primary goal behind this collaborative design project is to make nanoHUB a more intuitive, fun tool within a web environment. Throughout this process, our team made strides toward creating a solution that provides more engagement and intuitiveness for nanoHUB users.

My team was instructed to redesign the three most popular tools in order to focus in on what impacts users the most and to keep our work with within scope during this short timeline. These tools include Crystal Viewer Lab, PN Junction Lab, and Periodic Potential Lab which are all nanotech simulation tools.

User Group

My team was told to design for all nanoHUB users, which amounts to roughly 227,000 registered people using the tool suite. People who use the site typically have to run nanotech experiments for one or more of their classes.

‍

To get familiar with nanoHUB, my team conducted content audits to better understand the functionality and visual aesthetic.

User & Platform Research

Content Audits

Our purpose for engaging in content audits was to:

• Begin exploring what makes the tools functionally and technically complicated
• Observe buttons, links, hover labels

My personal content audit for one of the tools, PN Junction Lab is shown below:

Key Insights + Action Items

• These tools have extremely outdated and confusing user interfaces, especially for novice users
• The spreadsheet that my team created helped to organize tool content structure
• After understanding the tools a little bit more, my team chose to conduct a heuristic analysis to understand tool issues on a more structured level

Heuristic Evaluation and Analysis

Heuristic analyses is a widely known, systemic way to dissect user experience and interface issues. Instead of using Nielsen's 10 heuristics to pull apart the nuances of these interfaces, my team chose to use Weinschenk and Barker's 20 usability heuristics.

We chose to use Weinschenk and Barker's 20 heuristics to gather more robust information about the tools.

Key Insights + Action Items

After conducting a team-wide heuristic analysis, we found that the areas for improvement included the following:

• Sequence of Events
• Lack of Communication
• Aesthetics
• Onboarding/Help Throughout
• Icon/Word Accuracy

Initial Sketching

To get immediate ideation flowing, my team conducted some initial sketching to explore possible design changes and set the tone for continual sketching throughout our design process.

Scope Reduction

It should be noted that at this point in our process, our team chose to solely focus on Crystal Viewer Lab from this point on due to its popularity and necessity over the other two tools. However, we still plan on creating a pattern library "template" interface that can be used by nanoHUB as a general structure for the addition of future tools.

User Interviews

After conducting our baseline interface research, my team chose to talk to nanoHUB tool users to gather their insights about what problems they face. The goals going into this method were to:

• Gather personal experiences regarding the quality and efficiency of the different tools
• Identify any visual confusion that interviewees may have

Key Insights + Action Items

• Issues with the hierarchy within the newest version of the tool were identified
• The Display angle for the graph within the tool is confusing
• The icons within the tool are inaccurate for their actual function

Usability Testing

After engaging with professionals who were able to describe their experience, my team chose to conduct usability testing of the most popular tool, Crystal Viewer Lab, to dig into our newly downsized scope and further our understanding of the current issues.

Key Insights + Action Items

• The interface is usable, but some menu elements are extremely unclear
• Progression of events is unclear prior to running a simulation
• There is no help button or assistance if the user gets lost
• Now that my team had an informed understanding of the current issues, we chose to dive into paper prototyping

My Initiative

At this point in the process, my team turned to me to craft the UI for the experience. I began this process by:

• Listing out the core, key features that are required for this experience to fluidly take place
• Thinking about extra functionality that would help the user complete their task
• Drafting possible navigational patterns

Paper Prototyping

After considering all of the tool's functionality, I created a paper prototype that housed all of the existing capability in a more efficient manner. My team's research, testing, and other research insights informed the interface design shown below.

My thought process behind this interface was to consolidate functionality into a more linear, efficient manner. This would lead the user's eyes downward as they select their desired settings, then they would be able to run their simulation.

I concluded that the current user mental model entails a linear style of data input with the "simulate" button at the bottom of the screen.

By optimizing the efficiency of drop down menus and similar positioning of the "simulate" button, I condensed the current menu UI as shown below:

Digital Prototyping

In order to better test this concept with remote users, I created an interactive digital version of the paper prototype. This would allow users to click through the interface and provide more accurate feedback.

Key Items to Note

• The graph display area could not be altered due to development constraints. The tools used to adjust the orientation and size of the simulation are a part of a library that the tool developer could not alter.
• I chose to add a help button to the interface in the top right corner as a place to go in case they need assistance throughout the setup process

Testing

My team conducted 3 rounds of usability testing to gather feedback on the new UI that I had created. Our team created a medium fidelity mockup based on multiple rounds of testing results. The changes we implemented on the UI are provided below :

1. "Terminate Session" button removed
2. Altered verbiage of start button from "Go" to "Simulate"
3. Incorporated a more blatant tab system instead of "collapse" arrows
4. Addition of a more efficient toggle switch for desired viewer type

After these rounds of testing, my team incorporated these changes and creating the final, high fidelity interactive mockups of our experience.

High Fidelity Prototypes

Below are a few examples of the high fidelity screens that my team created. Using my UI design, we built out the concepts further and delivered them to the nanoHUB founder and development team.

nanoHUB was extremely pleased with our work and our ability to focus on not only the most popular tool but on the design "template" interface as well.

‍

Success Metrics + What I Learned

Since this was an industry-sponsored project, we were not able to gather raw data as to how our design work performed with customers. However, our presentation to nanoHUB was extremely well received and our team got verbal confirmation that this work would be implemented.

• Leading a team's UI efforts is challenging but rewarding
• Designers must immerse themselves in the field they are designing within in order to fully understand and connect with users, no matter how dense the content may be
• How to conduct a content audit by analyzing each piece of an interface
• UI and UX designers must carefully tailor usability testing for novice users in very dense arenas such as nanotechnology

‍

‍

‍