Smart Photo Gathering (ML)
Smart Photo Gathering (ML)
Smart Photo Gathering (ML)
Smart Photo Gathering (ML)
Smart Photo Gathering (ML)
Smart Photo Gathering (ML)
UX Strategy + UX Design + Visual Design + Stakeholder Reviews
Leadership ・ User Experience ・ Product Design
Role:
Sr. UX Design Manager
Contributions:
Roadmap Planning
UX Strategy
UX Direction
Stakeholder Reviews
Duration:
6 Months
Released:
Q4 2018
UNIVERSAL TEXT EDITOR
THE Team
PROCESS OVERVIEW
EXISTING EXPERIENCE AUDIT
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
HYPOTHESIS
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.
GOALS:
-
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
OPPORTUNITIES:
-
Modernize dated interface
-
Create universal component used across all platforms
COMPETITIVE ANALYSIS
WITH USER TESTING
Instruction: 70+ users were asked to test and compare two different sites of their choice for text editing specifically.
KEY TAKEAWAYS:
-
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
IDEATION
Fullscreen Edit Mode
Floating Widget
Side Palette
WINNER:
"Floating Widget"
Contextual, associative, lightweight, translates well to mobile
DESIGN
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
VALIDATION
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.)
IMPLEMENTATION
OLD
NEW
BONUS! DSM COMPONENTS
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!