Resolving an inconsistency

on editing patterns

There’s an inconsistency between the editing patterns of text components and the other components that is creating confusion among the users.

Understand

Problem

An inconsistency between the editing patterns of text components and the other components might be creating confusion among the users when they want to edit different components.

Operating system, Colorfulness, Product, Purple, Rectangle, Azure, Font, Violet
Colorfulness, Product, Purple, Rectangle, Font, Violet

PROBLEM

Text components

Every text component can only be change in the step view where you can also find the editing toolbar.

SOLUTION

Other components

All the other components can be changed in the left-side toolbox

Colorfulness, Product, Purple, Rectangle, Font, Violet, Line

User Journey

I mapped out the current user steps to see which are the pain points and how I could simplify the journey to help the users edit the components in the most intuitive way possible.

Research

Product, Rectangle, Purple, Slope, Font, Line, Violet, Screenshot, Magenta
Colorfulness, Rectangle, Font

Analyse

Posible solutions

With the results of the user testing, I decided to create two different concepts to potentially solve the issue:


Concept 1:

Edit text in the toolbox

I disabled the inline editing option, leaving the left-side toolbox as the only editing area.


Concept 2:

Edit text in step view

I enabled the inline editing for every component, without removing the left-side toolbox option for the other components.

Design

Prototype

The main focus of my involvement with this task was to assess the user experience and provide a real prototype.

Copyright Inefable 2022

Juan Cabrera

Product Designer | UI/UX Designer | Multimedia Designer

Forehead, Nose, Smile, Hairstyle, Eyebrow, Eye, Mouth, Neck, Eyelash, Jaw