Unlocking Personalization

With no way to be authenticated in the Design Lab, users were blocked from access to the design assets in their account. By surfacing account access in-session, we eliminated a major point of friction, kept users in the flow, and created a more personalized experience.

Problem

Custom Ink's Design Lab had no way to recognize who a user was. This prevented the Design Lab from providing a personalized experience and remembering a user's history. Users were forced to leave the Design Lab to manage their projects, creating unnecessary friction and abandonment.

Solution

If we integrate authentication directly into the Design Lab and provide a seamless way for users to sign in and access their account, then we can give them a personalized experience that recognizes their history and gives them easy access to their saved assets. This will allow users to quickly pick up where they left off, reduce friction, encourage deeper engagement with the design process, and ultimately increased continuation rates.

Outcome

The impact has been significant:

Account logins increased +15.1%, with desktop driving a +19.3% lift. This confirms our hypothesis that in-lab access drives more sign-ins.
Account sign-ups increased +36% lift overall, confirming that in-lab access drives more sign-ups.
Saved design retrievals rose +14.7% on desktop—supporting our broader goal of reducing friction for returning users and making account assets more accessible.

This test not only proved our hypothesis on embedded authentication—it lays critical groundwork for future personalization and saved asset workflows inside the lab.

Project Info

Team: Custom Ink Design Experience
1 UX Designer, 1 Product Manager, 1 Engineering Manager, 2 Developers

Role: Lead UX Design, Research, and Strategy

Timeline: 8 weeks

Research and Discovery

Using past research: The process started with analyzing past research and existing data to understand user needs and pain points.
Competitive research: A competitive analysis was conducted to see how other platforms handled in-app authentication and asset management.

Early Alignment with Product and Engineering

To kick off the project, the lead trio of UX, Product, and Engineering met to align on the path forward. We understood the missing authentication was a huge problem for users and discussed the requirements to solve this problem and create a great experience. We determined a goal end state and sequenced the work to get there, adding value one step at a time.

Requirement Gathering: Initial requirements were discussed with the Product Manager to define the project scope and key goals.
Feasibility Discussions: I collaborated with developers to discuss the technical feasibility of different ideas and solutions.

The project was executed in three distinct phases, each building on the last to create a comprehensive and cohesive experience. Each phase was designed to add value to the user while also helping us learn more and achieve key metrics along the way.

Keeping Security Top of Mind

I met with engineering to discuss the best implementation of a login flow. It was important to keep the user in the Design Lab during the flow since there is not an auto-saving feature available and we didn't want any users to lose their in-progress designs. We discussed security concerns and agreed on a creating a login flow in a window that pops up over the Design Lab.

Getting Into the Details

Ideation: I worked toward an end state that clearly showed login options and provided easy access to saved designs and uploaded files. I thought through all the various states needed for each flow.
Wireframes and Mockups: Wireframes were created to define the user flow, followed by high-fidelity mockups for a polished, visual design.

Design exploration

Phase 1: Adding Authentication

The first phase was a major architectural milestone. We implemented a new, global Custom Ink header within the Design Lab, using a "simple" variant to maintain focus on the creative process. Key features introduced in this phase included:

New Login Component: Users could now sign in, create an account, or access their account directly from within the Design Lab, eliminating the need to navigate away.
Improved Help UI: The chat and call functionality was made more accessible, ensuring users could get support precisely when they needed it.
Pre-entered email addresses: With authentication, it enabled us to pre-enter user email addresses, marking the first step in a streamlined experience when saving designs.
Persistent Cart Icon: A new, always-visible cart icon with a redesigned dropdown was added to improve usability and make the checkout process more accessible.

Tradeoffs

To get early learnings, we showed our current "retrieve a saved design" experience to validate that users would be more likely to open a saved design and proceed to the cart if their designs were easily accessible. This experience had previously only been shown when a user already had a design added to their cart and wasn't in a highly visible spot. While this wasn't the ideal experience we had in mind, it added value for the user while we worked on an improved iteration, which would give the user's saved designs a permanent home within the Lab and an updated UI to view additional information.

The first step in giving logged in users access to saved designs was through an existing UI that we surfaced earlier in the flow.

Phase 2: Accessing Uploaded Files

With the authentication framework in place, Phase 2 focused on giving users access to their personal content. This included:

Uploaded File Access: The team implemented the ability for users to access uploaded files that were previously saved in their account, which was particularly useful for business logos and other frequently used design assets.
Automatic File Saving: A key improvement was the automatic saving of newly uploaded files directly to the user's account from within the Design Lab.
File Management on Mobile: New functionality was added on mobile, giving users a way to delete unwanted files through an easy, intuitive flow.

Personalizing the Upload Experience

File Management Flow

Mobile flow for deleting unwanted files.

Insight from Usability Testing

Copy enhancements: Making a small tweak to the title of the upload section from "Upload" to "Uploads" to better capture what to find within the panel made an immediate impact in testing. Users went from not being totally sure what to find to having a far more concrete understanding of what to expect within the panel. Users mentioned that "Uploads" implied there would be uploaded files and an option to upload.

Pivot

Space in the mobile Lab toolbar was tight and we had initially planned to replace the "Sign In" icon with the new "Design" icon, with the theory that a user is generally signing in to retrieve their design assets. Due to the success we saw with increased sign-ins and sign-ups, there was hesitation to run a test replacing the "Sign In" icon. I had been considering other possibilities already and had a plan.

Relocating the Help icon

To make space in the mobile toolbar, "Help" was moved to an optimized location.

Findability: The help icon was relocated from the toolbar to the bottom right corner providing users with a more prominent, expected location to find support.
Accessibility: I used this opportunity to darken the grey button colors for improved accessibility.
Successful A/B Test: The click through rate increased and Lab abandonment decreased.
More Space in the Toolbar: The added benefit was there was now a spot in the toolbar for the addition of the "Design" icon for accessing saved designs.

Phase 3: Enhancing the Saved Design Experience

The final phase refined the user experience and extended key functionality to mobile devices. This involved:

Permanent Access to Saved Designs: An improved UI gave saved designs a permanent home in the header, making file management more intuitive.
Design System Integration: The UI was enhanced utilizing components I had previously worked on that had been added to the design system, ensuring a polished and consistent look and feel, while also making the dev work more efficient.
Mobile Functionality: The ability to access saved designs was added to the mobile experience, with an updated toolbar.

Bringing the Designs to Life

Iteration and Critiques: The designs were refined through multiple rounds of iteration and critique sessions with the broader team.
Handoff and Collaboration: The final designs were handed off to developers with a clear breakdown of the requirements, followed by continuous collaboration throughout the development process and design QA.

Key Outcomes and Results

The results of this project confirmed our initial hypotheses and demonstrated a significant positive impact on key business metrics.

Account Logins: A +15.1% increase in logins overall, with desktop driving a +19.3% lift, proving that in-lab access is a powerful driver for user sign-ins.
Account Sign-ups: A +36% lift in account sign-ups, which strongly supported the hypothesis that embedded authentication encourages new account creation.
Cart Interactions: A dramatic +106% surge in cart interactions, with mobile seeing an incredible +218% increase. The visual redesign and minimized UI elements likely contributed to a more usable cart, especially on small screens.
Saved Design Retrievals: A +14.7% rise in saved design retrievals on desktop, reinforcing the goal of reducing friction for returning users and making account assets more accessible.
Reduced External Exits: Clicks to the external account portal declined 2.3% overall and -6.9% on mobile. This suggests users are staying in flow thanks to embedded access with a reduction in undesired exits.
Decreased Lab Abandonment: Click through rate of Help icon has greatly improved by +427% and Lab Abandonment without Save decreased by -11%.

This project successfully proved the value of embedded authentication within the Design Lab. It not only delivered meaningful results in key areas but also established a critical foundation for future personalization and saved asset workflows. We are now one step closer to providing a more seamless, flexible, and truly customer-centric design experience.

Next Steps

Continue to personalize the experience for each user. This could include showing recently used design elements, favorited items, tailored recommendations, brand kits, and more.

See All Projects

Visualization >

Google Sites

Report abuse