Effortlessly onboard user with new features
During my internship, I had a wonderful opportunity to collaborate with PMs, Marketing Team, and engineers on the strategic plan of improving new feature adoption within PreForm, the 3D printing preparation software of Formlabs.
Built upon the existing design system, I led the design and had full ownership on 3 brand new and redesigned components—What’s New, Callout, Badge—to introduce new features to users at different touchpoints, granularity, and contextual levels. Features were shipped in Q4 2024.
View another project I worked on during Formlabs, click here.
Internship Project
Sept - Nov 2024
Role
Lead Product Designer
Skills
Tools
Figma, Photoshop
1
What's New
Problem
Limited scalability, visibility, and readability
User can only discover sections by clicking "Next" in a linear way, without knowing what will come next and how many slides are left.
Unscalable slideshow
Product team shoots videos to introduce releases, but with current one-section-as-full-slide, it’s difficult to incorporate a video hyperlink that represents the whole release.
Only see 1st slide
Little to zero visibility for the non-first slides as data shows that most of users just dismissed the modal immediately.
Hard to read content
Lengthy body text contradicts the goal of quick introductions and discourages users from reading.
Solution
A more visible and digestible feature introduction in different media formats
User now can overview all release news on one page, discover details, and redirect to the release notes and video.
Comparing the old and new design.
Behind the scenes
Design goal
Through a quick chat, I aligned with PMs and Marketing Team on 3 goals this new design needs to achieve.
Scalable
It needs to support various touchpoints to media formats in different combinations, including text, webpage hyperlinks, and video hyperlinks.
Effortless
It needs to present new features in a digestible way, with all information easily accessible without extra effort.
Familiar
It needs to match users' mental model for browsing product announcements while staying consistent to the brand's core values of simplicity and fluidity.
Ideation
How to display video
After multiple iterations and discovering that embedded videos couldn't work within the modal, I opted for a persistent CTA button that users can access while browsing all sections.
How to let user glimpse all contents with minimal effort
With the consideration of maximizing reading flows, ease to browse through, and visual cues for interactive area, I decided to go with open-one-at-time accordions that properly set expectation for users.
Execution
Final deliverable
Design specifications
Construct the first UX copy standard
To ensure the I closely communicated and reached agreement with PMs and Marketing Team on the rules for number of sections, content length, and title usage to make sure the message presented in What’s New is concise, informative, and consistent.
A snippet of rules
2
Callout
Problem
Underutilization and confusion on new features
PreForm has launched several major new features for its editing tools, but users struggle to discover and understand them because the only introduction was done through What’s New which is easier to get ignored and out of context.
Solution
Callout for new features
After a delay at launch, a Callout pops up to nudge users where the feature is with a brief introduction. It has directionality that highlights the location of the feature by proximity, color, and solid triangle arrow.
Pulsing indicator was not implemented due to limited tech resource
Behind the scene
Design goals
I went through an extensive exploration on different UIs and push logics. Aligned with the PM, the primary goal for this Callout needs to be unobtrusive, dismissible, and informative.
30+ iterations and several clickable prototypes to get buy-in
Design for scalability - from push to pull revelation
We also imagined the possible scaling of this Callout from “push” to “pull revelation” which not only introduces new features but provides contextual helps. To match this vision, I chose the more scalable design with better visual cues (icon) and flexible sizes.
Icon helps distinguish different contexts of pushed Callouts
Anatomy of Callout
Large Callout caters major features on Toolbar; small Callout for other features in 3D view and print settings tab
3
Badge
Problem
Missing an obvious opportunity
Despite being a simple visual cue for grabbing attention, badges had never been properly designed in PreForm. I took on the responsibility of implementing them.
Solution
Badges
Badge component can be applied throughout the PreForm to highlight new or beta features, with inline or absolute positioned.
Badge specifications
With close collaboration with the desktop software engineer, I ensured the scaled up Badge component set follows the color theme and displays correctly.
Read Next
