Designer
UI/UX
Software
Web App
FLUX Inc • 2024
Overview
FLUX laser cutter users complained that they have to select their machine every time they send a task from Beam Studo for laser cutting or engraving. To fix this problem, I improved the machine selection function and signficantly boosted the workflow.
To stay competitive among softwares, two new features, cloud storage and box generator were integrated into Beam Studio, allowing seamless file access and greater design freedom.
Beam Studio users appreciated the new features and many updated from previous versions to access the new tools.
Role
UI/UX Design, Visual Design, Competitor Research, User Flow Chart, Design Handoff
Team
Product Managers: Jack, Una, Mandy
Software Engineers: Dean, Raiybow, Esther
Timeline
3 months, Launched in February, 2024
Tasks
•
Review & discuss design specs of cloud storage, box generator, and machine selection function assigned by PM.
•
Research and analyze competitor software for potential insights and problem areas.
•
Pinpoint and resolve user pain points in the existing machine selection process.
•
Collaborate with PM & engineers on usability, user flow, feasibility, and testing.
Existing users eagerly updated Beam Studio to access the new cloud storage and box generator features, which unlocks greater design freedom for them.
The updated machine selection modal significantly improved user workflow, eliminating the extra step of having to select the machine each time to perform camera preview.
Get to know FLUX and its ecosystem first.
What is FLUX Inc?
Established in 2014, FLUX Inc is a pioneer in the field of laser cutting tech. With 190+ partners spread across 70+ countries, users worldwide range from artists, educators, small businesses, and more. Learn more about FLUX here.
What is Beam Studio?
Beam Studio is a free software and web app for FLUX laser cutters. It runs on desktop, tablet, and mobile and it's used to design, import or export artwork, and send files for laser cutting, engraving, or color printing.
Learn more at Beam Studio webpage designed by me.
Open webpage
How does Beam Studio work?
The four steps are: connect the software to your laser cutter, have your design ready, set up the work area, and then send the task for laser cutting/engraving.
xTool Creative Space and Adobe Illustrator have smart features including cloud storage, AI image generation, and more.
Competitor software has smart features that we do not.
• Direct and indirect competitor software have more features that make designing faster and easier.
• A portion of FLUX users use other software for designs due to the lack of features in Beam Studio.
Challenges
• 3D box generator is a feature other software do not have in their toolkit. Design the UI and flow so users can easily generate custom laser-cut boxes.
• Cloud storage is in almost every design software. Define the comprehensive cloud experience for Beam Studio and ensure saving and accessing files is intuitive.
There's repeated friction to perform a primary action that is required in every laser cutting task.
The current machine selection process is repetitive, causing unnecessary hassle.
• The repeated step of having to select the machine to perform camera preview frustrates the user.
• This wastes a lot of time since searching and connecting the machine combined takes 10 to 30 seconds.
• The majority of users own one laser cutter so there is no need to manually select a machine on every startup.
Challenges
• Find a way to simplify the machine selection process by changing it to a permanent, one-time process.
• The user has to know whether or not they have a machine selected and what machine is selected.
For the new cloud storage feature, I had only two weeks time to start from competitor research, user flow, and mockups to handoff, testing, and launch.
Assessing other software's strengths and weaknesses.
I analyzed the flow of cloud storage from saving, managing, to accessing cloud files in competitor software. What they did well included providing file info and easy file management. What could be improved were simplifying the save process, and making it easier to find where to cloud save.
Defining the user flow before initiating design.
By adopting the strengths and avoiding the pain points of other software, I drafted user flows for saving a file to the cloud and opening cloud storage. I then discussed with the PM to ensure all scenarios were included.
Understanding specifications and deliverables.
The cloud storage modal needs to be responsive across desktop, tablet, and mobile devices. With the content confirmed by the PM, the next step is to determine which functions to include in the first release then iterate on the layout. I chose a desktop modal size of 720px by 580px for its versatility and the ability to display six files at once.
Producing high-fi mockups utilizing Ant Design System.
I used the open-source design system to quickly create mockups, speeding up development and keeping the timeline manageable. However, due to time and priority constraints, features like list view and nested folders were not included.
Finalizing on layout, content, and states.
These features and functionalities simplify the process of saving the first file to the cloud and managing cloud files. File management is designed to function similar to other software and cloud drives. I also suggested adding instructions to save a file to cloud as the blank state, rather than the typical "empty files" icon.
Bringing My Cloud to Beam Studio, seamless and frictionless.
• Save to cloud in one click and easily access cloud files from home once logged in.
• Manage and organize your files with filter, rename, duplicate, download, and more.
• Access your cloud from any device, anywhere and save changes to cloud file edits.
Try My Cloud in your browser.
Open Beam Studio
Developed by our engineers, this tool aims to make custom 3D laser-cut box designs as simple as drawing rectangles.
Ideating how Boxgen will be displayed.
Using specs provided by PMs, I quickly generated wireframes to organize the layout and group information. I suggested that users would spend a considerate amount of time tweaking the settings and inspecting the viewport. Therefore, we chose the fullscreen layout for a centralized, non-disruptive experience.
Adding tips and instructions to provide more guidance.
Boxgen is unlike other design tools so users could benefit from hover tooltips and additional viewport manual controls. This prevents them from getting stuck or lost. The layout hierarchy, organized from left to right and top to bottom, encourages users to start with settings then continue to import.
Making 3D laser-cut box design effortless for everyone.
Try Boxgen in your browser.
Open Beam Studio
Users had to select their machine every time to camera preview the work area. Now, it's a smooth one-time process as it should be.
Analyzing the pain point and proposing the solution.
Previously, users had to complete three steps to select a machine for camera preview or to start a task, and they had to repeat this every time. Since 95% of users have only one machine, repeating the process each time is unnecessary. After receiving users' complaints, I proposed adding a fixed button to make machine selection a one-time process.
Future proofing the machine selection modal.
I proposed adding a fixed button displaying the machine name on the top navigation panel. Seeing the name immediately tells the user they're connected. The PM later tasked me with adding a link machine function to help users manage machines, which is still in development.
Select your machine and never think about it again.
Cloud storage and box generator are early beta version releases and the machine selection modal could use more functions.
The majority of users updated their software to access the cloud storage and box generator features, and they appreciated the new tools.
The introduction of cloud storage and box generator makes Beam Studio more competitive with other software. It also lowers the entry barrier to design, inviting more users to switch to our software.
Update to the machine selection process significantly reduced the task time for all FLUX users.
For cloud storage, test the UX of nested folders and breadcrumb navigation, and fine-tune functionality and user flow. Consider edge cases for large or complex files once the 5-free files limit is lifted.
Box generator is in beta and more shapes such as polygons and boxes with dividers will be added in the future. Explore layouts for the other shapes and evaluate scalibility.
The machine selection modal has a planned feature update that supports linking your machine to your account to access a dashboard that displays machine health and usage. Work with software to implement and test the new functions.
Review user feedback on cloud storage, box generator, and machine selection features through surveys, help center ticket submissions, and Facebook group discussions to identify potential pain points and user requests.
