Leveraging AI to build a free SVG generator for a craft laser manufacturer seeking to attract and move new users through their sales funnel.
Client
Glowforge | Industrial manufacturing, e-commerce
Role
UX Design Lead
Project Timeline
June-September 2024
Tools
Figma, Asana, Slack, Chrome DevTools, Glowforge brand guide
Login/Sign up flow
Information Architecture
Wireframes
UI/Visual Design
UX Design
Basic component library creation
Deliverables
Project Overview
Led the UX design of a free AI-powered SVG generator, partnering with engineering, marketing, and product to boost engagement with existing Glowforge owners and fill the marketing funnel with owners of competing products.
I worked directly with the VP of Product and a small team to distill business requirements into a simple and effective feature, that was live within two months of beginning the project.
Challenge
As a UX designer working without a design system, I navigated the challenge of creating consistent components by inspecting the existing website's code using DevTools, reverse-engineering elements to ensure alignment with both functionality and brand guidelines. Referring to the main website and style guides, I established UI patterns and components that adhered to the brand’s visual identity, ensuring cohesion throughout the user experience.
🎨 No Design System
Working under tight deadlines and with limited budget constraints, I prioritized efficient design decisions, streamlined collaboration with developers, and delivered high-quality solutions that met project goals within the set time and resource limitations.
⏱️ Limited time and budget
Most AI editors I researched were only available on desktop versions, or the mobile versions were extremely limited. We had to find a solution that displayed editing tools, menus, and options without overwhelming the user or taking up too much space.
📱 Must be mobile-first
Solution
A responsive SVG generation page that incorporates styles, text, example prompts, and materials preview
Mobile-first design that accommodate touch inputs but does’t take up too much space
A login/account creation flow for existing and new users, and the ability to differentiate between the two
Share functionality to increase engagement
Use of tokenomics that reward certain actions
Results within the first two months…
4,000 unique users generated an image
3,000 images saved
700 people have clicked on share links
Prompt page with inputs and styles following existing Glowforge UI element styles
Card design UI showing example images with prompts and styles
Magic SVG account creation screen flow
Context: What is Glowforge?
Glowforge is a company that designs and manufactures 3D laser printers, primarily used for personal, educational, and small business applications. The Glowforge printers use laser technology to cut, engrave, and etch a variety of materials such as wood, acrylic, leather, fabric, and even certain metals.
Glowforge's products are known for being user-friendly and accessible, with an emphasis on ease of use, making them suitable for beginners and professionals alike. The company provides a cloud-based platform that allows users to design and customize their projects using software that works seamlessly with the Glowforge device.
Motivation: increase existing user engagement, attract users from competing products
By marketing to competing craft laser owners, we believe we can get them excited about Glowforge ownership, and establish Glowforge as the next logical step once they’ve outgrown their blade cutter.
To do this, we will let people create an SVG of anything they can imagine, using AI, and get it sent to them via email. This will expose them to the technological capabilities of Glowforge, and give us a way to stay in touch with them, in order to move them through our sales funnel.
Gather product requirements and prioritize
Since we had a two month deadline from the beginning of the design phase to launch, we needed to focus on what would deliver the most impact to our customers, as well as what we could reasonably accomplish in our first time integrating AI into a product.
Priority - 1
Dedicated pages for SVG creation
Account creation for new users, Sign In flow for existing users
Ability to share tool and designs, and track shares
Ability to save/scrap images/edit prompts
Email SVG to user
Introduce use of tokenomics
Future - 2
Ability to edit images (crop, resize, background/magic erase)
Show examples of design on different materials
Show creation history
Default prompt suggestions based on user history
Market research focusing on direct competitors
We know that our users range from hobbyists and DIY enthusiasts to small business owners, artisans, and makers specializing in custom products, and value intuitive interfaces and software that minimize the learning curve, along with clear setup and operation instructions. It’s important that these values translate to any new features being developed.
Before designing, I will consider any user research that is available, and also conduct secondary research in the form of looking at existing examples of the problem I’m trying to solve and any data surrounding those examples.
These example products gave a good sense of what was available in terms of desktop layouts, but we need a solution that can work seamlessly with mobile as well. There were markedly less examples of mobile image editors, so we needed to keep it simple as we followed business requirements and kept a small screen in mind.
Similar concepts serving different markets: (R to L) Kittl, Canva, Dall-e AI, SVG.io
User flow diagrams were instrumental in mapping the distinct pathways and decision points users encounter, providing clarity on how new and returning users navigate through the product. By visually outlining each step, these diagrams helped identify potential friction points, allowing the team to optimize pathways for efficiency and ensure a seamless experience.
They also facilitated cross-functional alignment, enabling stakeholders to see the intended user journey, anticipate user needs, and understand the impact of each interaction on user engagement and retention.
Establish user flows
Initial workflow showing various entry points and paths that differentiate between new and returning users, with a streamlined path to SVG tool for users with existing accounts.
Reference existing brand guidelines and website
Aligning with the existing brand guidelines was essential to create a cohesive, recognizable user experience that reinforced the brand’s identity at every touchpoint. Consistency in typography, color schemes, and component styles helped ensure that new design elements felt familiar to users, building trust and seamlessness within the interface.
Adhering to the established visual language also streamlined the collaboration process with stakeholders, aligning design decisions with marketing and brand objectives and minimizing revisions. This approach allowed the project to integrate smoothly with existing assets, maintaining brand integrity while meeting design goals within a limited timeline.
I took font, color, style, and spacing direction from Glowforge’s brand book as well as existing website layouts
Concept sketches ➡️ wireframes
Marketing provided some basic layouts for proposed pages outlining must have features. Moving from these to wireframes was a pivotal step in transforming initial ideas into structured, actionable layouts. The basic feature layouts allowed us to explore potential solutions quickly, capturing essential ideas and interactions without getting bogged down in details.
As we transitioned these sketches into wireframes, we focused on refining the structure, organizing content, and defining core functionality for each screen. This process allowed for early feedback on layout and flow, aligning the design vision with user needs and business goals before investing in high-fidelity designs.
From initial sketches of must have features to more detailed wireframes, referencing existing styles and spacing from brand guide + website.
Building components for a unified visual language
Since there was no existing design system, I built selected components from scratch referencing the existing website elements and their code to ensure consistency and alignment with the brand’s visual language. I used the Figma plugin HTML to Design to grab existing layouts, and the Color Palettes plugin to create color scales based on brand colors.
This approach not only saved development time by creating a single source of truth, but also preserved the familiar look and feel for users. Through close collaboration with the developers, I ensured each component was both visually appealing and accessible, resulting in a seamless addition to the website’s interface.
For more in-depth Design System work, please email me at tanyabrno@gmail.com
Color
Creating an expanded color palette based on brand guidelines
Selected Components
Building a basic component set from scratch to ensure consistency
Once the wireframe layouts were approved and some basic components were built, I went to work applying UI. This step involved incorporating existing typography, color schemes, and other styles from the style guide and other website pages to create a cohesive and aesthetically pleasing design that also met accessibility and responsiveness standards.
It was important to keep the UI simple and easy to understand, so I incorporated plenty of whitespace, clear calls to action and prompts where needed. Working alongside marketing was helpful when deciding specific text content for each section.
Applying UI and interaction design
UI for desktop of the SVG generation process
Initial goal was to not only be able to generate images from text, but to then let the user edit the image using AI offering 4 of the most popular features found on other image generation models. These included background removal, aka “Magic Erase”, background infill “Magic Inpaint”, Crop and Resize, and Erase Object.
While these didn’t make the cut for the initial release date, they are in development for future releases.
Proposed Features
Proposed options included Magic Erase, Object Erase, Zoom, and Magic Inpaint. Unfortunately, the budget was not there to make these happen in the final release.
Since Glowforge prints on various types of materials, a material preview showing the generated image was also priortized.
With a tight release date coming up, we had to prioritize essential features. The LLM we used was not producing reliable results, so we decided that while the Magic Edit features were something we’d like to have, the options of either saving the image or scrapping the image for a partial token refund would fulfill essential functions at the moment. As development explored other LLMs for later releases, we could eventually incorporate more robust features.
After the initial launch, organic sharing was not as high as we’d hoped it would be, so we had to add some prompts encouraging users to share with their network for additional tokens
What came up
Proposed Magic Edit features vs. prioritized features to make launch date
Added promotional text and Share CTA as well as direct sharing on recently generated SVGs.
What are the results?
We evaluated the product through custom dashboard metrics......Within the first two months -
While Magic SVG didn't take off the way we had hoped, we learned a bit more about our market and what it would take to successfully scale an AI product. In order to scale it, we needed to find a level of virality that would make the cost of AI image generation worth it, and it didn't get there. Other takeaways included:
- Getting high-quality text output from AI image generation services is still inconsistent.
- Most crafters don't grasp the mechanics around incentivized tokenomics.
- A survey of people that had used the tool revealed that they found the UX really easy to understand.
So while the concept did not land the way we wanted, making the UX simple and easy to grasp was a win, as long time customers can have differing feelings to product changes and updates.