Nomad: Infoboxes to Properties Panel

My Role:

My Role:

Lead Designer, Research

Lead Designer, Research

Platform:

Platform:

Web

Web

Timeline:

Timeline:

2023

2023

My Role:

My Role:

UX/UI Design, Research

UX/UI Design, Research

Platform:

Platform:

Native iOS & Android

Native iOS & Android

Timeline:

Timeline:

2022

2022

Domino Designer used small boxes to manipulate the items within the app. The infoboxes were developer built, with extra controls being tacked on adhoc. This project was done in stages, first aiming to systematically convert the infoboxes into the new properties panel

Starting point

Painpoints

Controls were inconsistent, often following different patterns as other boxes that manipulated the same property.

Infoboxes floated on top of Domino Designer in a separate window, and were easy to loose track of.

Infoboxes were very small and could not be resized, causing issues for the primarily older demographic of users.

Controls were extremely outdated and hard to understand. Many had no apparent effect on the canvas.

Technical Constraints

There were over 200 individual boxes, and over 40 contexts in which they could be shown. It was not feasible to touch each individually.

Moving controls out of their tab was a heavy development lift and often caused bugs elsewhere.

The lack of consistency in controls made forming a systematic translation to modern react components a challenge.

Backwards compatibility with the old client meant I couldn't change the underlying effect a control had.

Basic pattern translation

Layout

Responsive Behavior

What I've learned + next steps

Since I was not able to speak to end users during the initial research phase for this project, I came to the following conclusions through conducting a heuristic analysis of the current app navigation. 


  • Designing for iOS and Android in tangent poses some technical limitations, but now I understand how to work with dp.

  • There have been some changes to app layout during the development process due to constraints from the base code, including what can be included in toolbars and shown in one layer.


2024 S Schaedler Design

2024 S Schaedler Design

2024 S Schaedler Design