From Clunky to Clever

Transforming Image Uploads with a Dynamic Widget 💎

PROBLEM:

Adding images to a landing page or website in Leadpages was a cumbersome process. Users were presented with a large modal that took over most of the screen, disrupting their workflow and making it difficult to preview images in context. The existing process required users to either search their image library or upload new images, but lacked a streamlined, in-app experience. The challenge was to create a more intuitive and seamless way for users to manage and preview images without interrupting their design flow.

SOLUTION:

The Image Widget was designed to bring image management directly into the Leadpages builder, eliminating the need for a large modal. This widget allows users to edit, change, or upload images directly within the builder. Key features include the ability to search their image library, browse premium images (tagged with a diamond), or upload new images. We explored various ways to render groups of images—such as grids, carousels, and masonry layouts—to provide users with the best preview experience. The widget also includes live preview options for editing image styles, such as max width, alignment, and corner radius, and allows users to add links to images directly in the widget. Additionally, a drag-and-drop upload feature was added, along with various loading, success, and error messages to keep users informed of their upload status.

RESULTS:

The introduction of the Image Widget significantly improved the user experience for adding images within Leadpages. Users can now manage and preview images seamlessly without being disrupted by a full-screen modal. The streamlined process has led to increased efficiency and a more intuitive design flow, allowing users to focus on creating and refining their pages. The added features, such as live previews and drag-and-drop uploads, further enhanced the overall usability and satisfaction of the image management experience.

Previous
Previous

File Organization & Designer Resources