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.)
     

OLD

NEW

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).

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