Designer
Web Design
Visual Design
FLUX Inc • 2023
Overview
In December 2023, Ador, the world's first color printing laser cutter, will make its global debut. My task was to create an informative landing page tailored for customers, distributors, and KOLs, introducing them to the innovative features of Ador.
Working closely with the marketing team, my task is to showcase Ador's unique value propositions, diverse use-case scenarios, and inform users of its features and benefits through an informative landing page.
After launch, Ador gained widespread attention, and the landing page achieved record page views, contributing to a 12% increase in net revenue.
Role
Responsive Web Design, Visual Design, Branding, Video editing, Rendering, Content Writing
Team
Design: Winni (Video), Chieh (VIS)
Marketing: Angel, Cathrine
Stakeholders: CEO, CGO, EU distributor
Timeline
1 month, Launched in Dec, 2023
Tasks
•
Discuss visuals, content, and layout details with marketing using initial mid-fidelity mockups in Figma.
•
Design using WordPress, Elementor, and custom CSS while considering responsiveness, compatibility and load times.
•
Create on-brand visual materials and renderings based on style guide, ensuring optimal presentation and hierarchy.
•
Refine and polish on content and website based on internal and external stakeholder feedback.
Ador's global reach through our marketing campaigns and KOL affiliates led to its success in EU, US, and international markets. With the landing page being the first stop for users, Ador's sales resulted in a 12% increase in net revenue.
Ador was a hit among existing users as many upgraded to access the new color printing capability and the infrared laser module that supports more materials. Ador's landing page broke two page view records shortly after launch.
See what made Ador successful.
Visit Ador Website
Get to know what Ador is, who it's for, and its origin.
What is Ador as a product?
Ador is the world's first color printing laser cutter powered by three modules: 10W/20W diode laser, 2W infrared laser, and color printing. It's built for small businesses, hobbyists, and educators. See official promo video made by visual designer, Winni.
Brief origin of Ador.
FLUX Inc. introduces new products each year to stay competitive in the laser cutter market. As the latest innovation, Ador has been in development for more than two years with the biggest challenge being integrating inkjet printing into a laser cutter. Ador unlocks a new level of creativity thanks to its modules.
Before Ador, users had to use color or UV printers to achieve colored designs then use a laser cutter for cutting. Now, it's possible to complete a printing and laser cutting/engraving task all in one machine.
Explaining Ador's features to users is challenging because of its complex printing system, technical nature, and the manual tasks needed to operate it effectively.
A complicated product and very limited time to deliver.
I was assigned a monumental task for which I had little experience at the time. With a new, complex product and a tight timeline, I had to quickly become familiar with Ador, learn wordpress, and build the landing page simultaneously.
Challenges
• Show that Ador is user-friendly, easy to operate, and accessible for target users through representative visuals.
• In only one month's time, finalize the landing page, hand off materials to EU distributor, and test for responsiveness and load time before launch.
Working closely with Marketing, we discussed and organized section layout, content writing, and visual style.
Understanding key visuals and assets first.
Ador's key visual is a playful red, yellow, and blue rainbow, emphasizing its new color printing capability. With the product VIS defined by Chieh and Winni, I applied it to the landing page design.
Starting with mid-fidelity mockups.
Marketing presented their initial mockup with the sections, content order, and writing loosely defined for rapid discussion. My task is to tie content and visuals together to form a cohesive visual style for Ador. After four rounds of refinement, we primarily reduced text length, simplified and modernized the layout, and added more negative space for easier scanning.
Refining the the first impression.
Utilizing the bento grid in the first section brings familiarity for viewers. After refinement, it evolved into a more scannable overview of Ador, highlighting the three modules and key features laser cutter users seek.
This was my first time using WordPress, Elementor, and custom CSS and it was a steep learning curve. I had to learn and design simultaneously, ensuring proper responsiveness, layout, and sizing across each device and browser.
Building from blank to solidify the foundation.
Our previous landing pages for other laser cutters lacked a unified style in terms of text, visuals, and layout, so I decided to start from scratch. I immediately turned to YouTube to learn how to use WordPress and Elementor, and I also reached out to our frontend engineer with CSS-related questions. Through extensive trial and error, I encountered issues such as broken responsiveness and long load times, which I was eventually able to resolve.
Triple-checking everything before launch.
The first versions of the page took over a minute to load due to large image files and GIFs, so I optimized all JPEGs and converted the GIFs to MP4. Prior to launch, I checked all the boxes on responsiveness, interactivity, load times, and links.
Ador launched in December 2023 globally and the landing page broke our single-day website visit record.
Presenting Ador, a new spectrum for creativity.
The landing page is the first stop for users who click on an ad or search for "color printing laser cutter." The goal is to inform viewers about Ador's benefits and values, answering all their potential questions.
Starting with a simple bento with some dazzle.
Videos quickly grab attention and provide the most context. Combining them with real product photos adds more credibility and professionalism. I simplified the usual cluttered bento layout by reducing the number of boxes, creating a clearer visual flow.
Bringing each section, each module, to life.
These sections highlight Ador's process and modularity. A description followed by example design work, provides context, and shows viewers what each module can do.
Tuning the details, designing supporting material.
I developed visual materials to showcase Ador's features and values, including renderings, a material list, loop videos, and more. The details and specifications of Ador are placed in the second half of the page for users who wish to explore further. The FAQ section and CTAs at the end conclude the user's journey, encouraging them to make a decision.
6 months after launch, a review of Google Analytics showed that the average session time is too low.
Ador's global release in 2023 was successful, contributing to a 12% increase in annual net revenue.
Ador's landing page reached a record number of page views, breaking 2 website records within one month of launch.
Many existing FLUX users upgraded to Ador due to the new color printing capability and modular system.
Work with engineering to continue optimizing site load times. The average session time is 35 seconds, which needs improvement. Issues could be outdated WordPress and Elementor versions and the heavy use of plugins, custom CSS and JS.
Collaborate with Marketing to assess and test CTA placement and content hiearchy. Directing ad links to the landing page led to more sales. Testing CTA position and wording could drive more sales.
Measure new key metrics including bounce rate, user retention, and conversion rate. Collaborate with marketing and software to implement these metrics using GA4, and Google Search Console.
Consider SEO score, edge cases, and accessibility. Check image alt text, load error states, and ensure common accessibility is met such as keyboard navigation.
