Modal to add and edit product models

🤔 The Problem:

Users need a way to easily view, rename, delete, or add product models. Currently, there isn’t a clear interface for managing them.

🤝 The Solution / Ask:

Design a modal interface that enables users to visualize existing models, delete non-default models, rename models, and add new models.

Essentially, each flow can have a set of models, that can represent things like actual product models (e.g., Samsung Frame TV) or anything the editor might want, such as an issue type (e.g., water damage).

💭 DESIGN PROCESS

Research

My goal was to grasp the functionality of this tool before focusing on the modal. This led to an impromptu usability test using the latest build, where I navigated through tasks involving the modal I was designing, noting any bugs or usability issues encountered along the way.

Task Flow

Once I understood how to use the tool, I created a task flow for "adding and editing product models" to help guide the design.

First Iteration

After reviewing the task flow with the lead UX designer, I went straight into fleshing out the design.

Wireframes of two versions of the design.

Testing

This design was built into the existing D-Tree for testing. During the evaluation, one immediate usability issue surfaced:

Requiring users to click the edit button each time to modify text is inconvenient, especially when a new model is added. The user's initial action is often to rename the newly added model, making the current process inefficient.

To resolve this issue, I plan to remove the edit button and allow text editing to be activated by clicking the text. When new models are added, the text should be highlighted by default, allowing the user to immediately rename the model.

🔧 NEXT STEPS

My next task is to iterate on the design with the feedback from testing and handoff to the developers to build into the MVP.

Notification for when the user clicks “Publish” when there is a node with incomplete information.

⚠️ However, there were some obvious issues with this style of notification:

• It overlapped with other alerts that showed up as a toast notification (such as autosave notification, which showed up frequently).

• The user could forget what the issue was as the message would eventually disappear, leaving room for repeated mistakes and frustration from the user.

• There are 4 different types of nodes that can be created. There would have to be more variations of the toast copy to cover all the different scenarios when a Tree can’t be published.

Some examples of scenarios that needed customized copy are:

• A Tree Node allows the node to be connected to another Tree. The user needs to select which Tree the Tree Node is going to and what node it should return to once the necessary steps are taken.

• A Link Node needs a URL for the user to be redirected somewhere.

• A node could be unreachable because it does not have any inbound connections.

From there, a secondary problem was formed:

How might we create a way to communicate error messages that catches all the different scenarios when a user needs to input additional information in order for nodes to function.

Research

I went back to the drawing board and did some research on other similar error feedback systems. I also drew inspiration from user onboarding checklist formats, which allow users to visualize unfinished tasks.

💡 Second Iteration

An error feedback system that utilizes the Zeigarnik Effect, by showing a list displaying outstanding tasks to help users see what still needs attention, rather than requiring them to manually go through a list of tasks. The design will show a number that minimizes with each resolved task may motivate users to address the issues themselves before seeking external help.