Sr. UX Design Manager


Roadmap Planning

UX Strategy

UX Direction

Stakeholder Reviews


6 Months


Q4 2018


THE Team



1. Multiple Text Editor Variants

  • 4 separate editors used for various platforms and engines

  • Inconsistent design and functionality between all of them

  • All use modal metaphor

2. Disjointed Experience w/

    No Dynamic Text Rendering

  • Dated interface

  • Interface in modal form unnecessarily covers product design

  • Lack of live text preview on product

  • Both lead to lots of pogo-sticking in order to properly preview text.

3. Unhelpful Text Guidance

  • All fields contain "Enter text here" instruction, but no hint as to what type of text should be entered (e.g. First Name, Family Name, Address, etc.)

  • Error states offer no insight as to what needs to be fixed and how to go about fixing it

  • Users don't realize their text does not fit until they dismiss the text editor

4. Cluttered and Unclear Text Areas

  • "Enter text here" looks cluttered and redundant

  • Overlapping text fields are difficult to differentiate from each other

  • Solid gray areas obscure design


Our existing text editor experience is loaded with friction. By providing a more modern, seamless, and intuitive text editor, we can increase speed of text editing, reduce errors, and improve design confidence for our creators.


  • Increase conversion across all heavily text-based products (e.g. Wedding Invites and Birth Announcements)

  • Increase AOV and RPV

  • Reduce time spent during creation

  • Reduce drop-off during creation


  • Modernize dated interface

  • Create universal component used across all platforms



Instruction: 70+ users were asked to test and compare two different sites of their choice for text editing specifically.


  • All sites are generally usable after some exploration

  • Majority of users want or expect inline editing

  • Users appreciate flexibility in editing options, including the ability to move text around or remove altogether

  • Users assume all text editable, even with the editable text being styled differently than baked-in design text

  • Most frustration was observed with Shutterfly (pogo-sticking)

  • Users expect recently used fonts/colors

  • Overlapping text boxes were frustrating across brands

  • Majority of users want text to auto-fit

  • Mixed preference for contextual vs docked editor


Fullscreen Edit Mode

Floating Widget

Side Palette


"Floating Widget"

Contextual, associative, lightweight, translates well to mobile


Default View

  • New translucent area styling allows visibility of product design

  • Dashed line better indicator of an area that can be edited

  • No more redundant "Enter text here" default text


Text Area Active

  • Widget closely associated with selected text area

  • Tooltip hint effectively lets users know what type of content they need to input

Text Entry

  • Showing live preview of text with style applied

  • Text will now resize down automatically to fit the active area (limited to the smallest font size recommended by the content team)

Text Styling Options

  • All previous text style options available in more focused sections

  • Palette can be moved manually by user

  • Widget can be dismissed by clicking anywhere outside of the area or palette, but DONE added as a more apparent backup action

Mobile Translation - Android

Mobile Translation - iOS


Using a working prototype, we interviewed another set of users, this time presenting our new text-editing experience, and feedback was extremely positive. Minus a few WIP bugs (eventually fixed), they found editing text was intuitive and met or exceeded their expectations.

A/B Testing:

  • In comparison to our existing control, we found that users were actually spending more time creating (unexpected)

  • Ran more sessions, and we found that, with the new editor, people were more inclined to try out different fonts, sizes, and colors, but they eventually ended with a result that they added to cart

  • After letting the test run longer, we found we were successful in decreasing drop-off and lifted conversion (Add to Cart) as well as average order value

  • Number of CS tickets has dropped significantly regarding text editing during product creation

  • We saw no negative impact on products that were less text-heavy (e.g. Mugs, plaques, canvas prints, etc.)





Over the years, different teams in charge of different products and categories branched off into silos which resulted in different technology to benefit special needs as well as a break in design standards.


This project was the start of us consolidating down to a singular creation path using shared back end and the components. This means that teams will not need to build a feature several times and will increase efficiency and productivity.

To push this effort, my team and I, together with a small team of engineers, formed a UI Guild that created and compiled a library of react components that developers can pull from and implement into future projects (React).

Thank you!


© 2020 ROMEO GOTERA. All rights reserved. Please do not repost, reproduce, or reprint without permission