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

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 usertesting.com 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 beginning of us moving back to a singular creation path using the same back end and the same components. This means teams will not need to build a feature several times and should increase efficiency and productivity.

To push this effort my team and I, together with a small team of engineers, formed a UI Guild that (in our own spare time) started a library of react components that developers can pull from and implement into future projects. It was an added plus to this project.