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
Universal Text Editor
UX Strategy + Roadmap Planning + UX Direction + Stakeholder Reviews
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
DISCOVERY
Research
I asked our UX research team to run an audit of all our existing text-editing experiences across desktop and mobile. It was apparent that our text experience could be improved, but we needed to find solid examples of what we personally feel needs improvement. Below were their findings.
Multiple Variants
-
4 different editors used for various platforms and engines
-
Inconsistent design and functionality between all
-
All use modal metaphor
Lacking + Disjointed
Experience
-
Dated interface
-
Interface, in modal form, unnecessarily covers product
-
Lack of live, dynamic text preview on product
-
Both lead to "pogo-sticking" in order to properly preview text.
Unhelpful 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
Cluttered Text Areas
-
"Enter text here" looks cluttered and redundant
-
Overlapping text fields are difficult to differentiate from each other
-
Solid gray areas obscure design
User Testing (Competitive Analysis)
Now that we had a sense of where pain points were located, I wanted to test it against users and see if they experience the same frustrations. We all agreed that it would be good to run it parallel with competitors to see if they suffer from similar issues and how users navigate their experiences.
Instructions: 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
Wireframes
I sat down with my UX designer and helped formulate a plan of action. We decided to wireframe three of the strongest metaphors from testing to see how well it would work with our current interfaces. We also had to keep in mind that this would replace all editors across all products for both desktop and mobile (universal).
Fullscreen Edit Mode
Floating Widget
Side Palette
Stakeholder Review
Once my designer found solutions for each metaphor, we listed pros and cons for each and reviewed them with stakeholders to choose a direction that we all agree upon.
WINNER: Floating Widget
-
Most contextual and associative
-
Lightweight design
-
Translates well to mobile (in form of a tray)
DESIGN
Mockups
With a clear direction agreed upon, I had my UX Designer sit down with one of our Visual Designers to craft mockups of the experience so engineers had something to work off of as soon as possible. Engineers started to build a rough beta based on the wireframes, and they would clean it up as the high fidelity mockups started rolling in so users could start testing as soon as possible.
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
-
Tooltip hint effectively lets users know what type of content they need to input
-
Widget closely associated with selected text area
-
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 for each design)
Text Entry
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 (iOS)
-
Widget translate to bottom tray metaphor
-
Text area automatically zoomed in upon tap
-
Automatically zooms out as user types
-
Extra tab added to accommodate mobile keyboard
-
May have to relocate "Done" CTA due to iOS keyboard having actions baked in
Mobile (Android)
-
Widget translate to bottom tray metaphor
-
Text area automatically zoomed in upon tap
-
Automatically zooms out as user types
-
Extra tab added to accommodate mobile keyboard
VALIDATION
User Testing
Once our engineers had a working prototype in beta, I asked our researchers to set up more user tests to present our new text-editing experience.
Main Takeaways:
-
Overall very positive feedback, exceeding expectiations
-
Hangups on known WIP bugs (fixed for later sessions)
-
Majority of users intuitively discovered the text editor (by tapping on fields)
-
Some asked about ability to switch/navigate between multiple fields (e.g. - Enter first name with a way to switch to "last name" without hitting done and zooming out of the project). Some found this feature when "tabbing" on desktop. Functionality not built into mobile, but will consider for future iterations since it may help decrease creation time and possibly lift conversion.
-
In comparison to our existing control, we found that users were actually spending more time creating (unexpected), but also had a higher conversion rate.***I asked our researchers to dig deeper with monitored user testing sessions, and we found that, with the new editor, people were more inclined to try out different fonts, sizes, and colors, eventually coming to a design they were happy with and adding it to cart.
Iteration
-
Much of the iteration was in fine-tuning how the text editor zoomed in on mobile devices which we found to be a bit buggy across different products and platforms.
IMPLEMENTATION
Design Specs + Prototypes
By this time, many of the designs had already been handed off to the engineering team in piecemeal fashion for the sake of agility. To help clarify visuals and interactions, I ensured our team updated specs (via Zeplin) along with decks containing more notes and links to related prototypes. We held daily stand-ups to review updates with engineering and QA to ensure faithful design representation.
RESULTS
-
Increased conversion across all heavily text-based products
-
We saw no negative impact on products that were less text-heavy (e.g. Mugs, plaques, canvas prints, etc.)
-
Increase AOV (average order value) and RPV (revenue per visit)
-
Dramatically reduced drop-off during creation
-
Number of CS tickets has dropped significantly regarding text editing during product creation
-
Modernized dated interface
-
First step towards creating a library of universal components used across all platforms
EXTRA CREDIT
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, a few of us designers teamed up with engineers to form a UI Guild that created and compiled a library of react components that developers can pull from and implement into future projects (React). This was the beginning of a much needed design system.
