OtoSense - Software

SaaS product Design
Project Overview
Otosense is a AI-driven sensing platform that acquires, learns, and makes sense of sound, vibrations, and pressure. Construction engineers will use the software on manufacturing and production line machinery.

After the beta software was coded, the team needed an intuitive interface for their product that customers could understand by operating their software in various locations. For example, in an on-site office as well as on the ground construction.
My Contribution
Work was done with a small team of software developers over two months before release. My designs helped OtoSense attract industry interest and land their first primary account.
The CHallenge

The development team created the working concept using Google’s Material Design framework. Much of the core concepts were refined by the Customer Experience Analyst but needed a UX / UI touch to make it market-ready.

Even with the Material Design framework, the interface was difficult to use. It did not convey the unique product that the team built. OtoSense needed an interface that they branded.

My goals were to:

  • Improve but not replace the existing Material Design framework
  • Design the application to be usable on a large screens and mobile devices
  • Create a design system usable with the current framework
Project Management

This project was conducted with a distributed team, with members across the United States. To keep the project on track and organized, we communicated via Slack and Googles’ Drive applications. This method allowed all members to access the design research and documentation in one central location.

As their first designer on the team, I wanted to orient myself in the project and understand its scope. To do this, I worked with the Head Developer and User Researcher to create a Sitemap of the project. To that end, I drafted a template for user stories that we used as a guide to learn about each component and its purpose.

Sharing these methods and thinking at the beginning of the project built a connection across the team that helped with communication in a subject matter I was unfamiliar with.

Image of flowchart and table of user stories for Project Management.
User Personas

To appreciate the challenges of the platform and what the UI would be required to face, I worked with the UX Researcher to learn about the users and what issues they face.

Using qualitative analysis from sales teams and stakeholders, we crafted two focused personas.

OtoSense Trained Operator
Image of OtoSense Trained Operator
  • Frustrations:
    Addressing unique machinery with every visit while trying to use the same software.

    On-site in different weather and light conditions and unstable internet connections.
  • Goals:
    Must be able to diagnosis a machine using configurations from the software on different mobile devices. The devices range from laptops tablets and to industry-specific handheld devices.
Construction Site Technician
Image of Construction Site Technician
  • Frustrations:
    Specialized machinery that shows wear and tear. Unable to diagnosis issues quickly without dismantling the entire machine, costing time and money.

    Lightly trained on Condition Monitoring Devices.

    Needs clear guidance on key terms and concepts.
  • Goals:
    Understand how to run the software so they can identify and repair a failing part. Avoid the costly and time-consuming process of shutting down a machine trying to discover the error blindly.

I worked with the time via Slack to develop concepts for interactions that would help keep the user on the screen while allowing them the ability to scrub through data without leaving the screen.

These sketches were photographed, shared on Slack, and discussed there. The process had its bumps but using clear communications and notes on the sketches helped clear up misunderstandings.

Sketch of OtoSense UI
Sketch of OtoSense UI

I created a strategy for the platform redesign that allowed for visual interest and focused on the data. The live content area was set to flex no smaller than the width of a landscaped tablet. This allowed for designs to be effective on a tablet and desktop without losing data in the viewable area.

The platform did not reflect the OtoSense brand. After taking colors from their live website and logo, I adjusted them for accessibility in highlight areas. This gave me a base palette to work with. I selected IBM Plex Sans for the font family because of its contrast in its shapes and legibility in tables.

This allowed the platform to be branded for OtoSense. Also, it gave the startup a basis of a design system for any future applications.

UI example of OtoSense designs

Learn More

A mixture of all the Ninja Turtles 🐢 into one. Suffering from an addiction to coffee, cookies and zombies 🧟. Team player, a negotiator with developers, product owners and stakeholders.

Download Resume
Experimentation,  concept designs, digital art.
Writings on design and case studies. Some fun stuff as well.
Resume, work history and professional correspondence.