Craftcloud is a marketplace for 3D printing. It's a subsidiary of ALL3DP, a magazine with 1.2M MAU. Core product is an web application where customers can upload 3D model, compare prices for printing around the world and choose a factory to print.
My role
I joined the team as a Lead Product designer. Since then, I have been responsible for the user experience, creating the design system, producing new features, and hiring designers on staff.
Problem statement
The company kept its design legacy made in Photoshop, which made it difficult to produce new features. The app was made on components that were stored in Storybook, which meant that a complete redesign from the scratch wasn't possible. We had to iteratively improve the design through the entire atomic design chain, from atoms — to sections of the site.
Legacy Component Analysis
First, I analyzed the frequency of use of all the components on the site and asked the engineer to save this data for me. Based on this data, I found out which elements are worth paying special attention to.
Design Tokens
Initially, the product had a UI library of disparate elements that hindered rather than helped the designer's work. In parallel with the production of the new features, I started working on the atomic parts of the new system design.
Molecules
In the next step, using the design tokens I created molecules - building blocks from which later new components will be assembled.
Components
Using molecules I assembled ready-made templates that automatically applied to all the forms on the site.
Sections
And the last step was to create sections based on everything done before.
Accessibility
And of course when working on the design system I kept accessibility in mind. The colors we used are at least AA level on WCAG 2.0 and have enough contrast. Active UI elements have focus indicators, a blue outline - which gives an indication of where the user is. The placeholders are captioned and the user will never forget which form they are filling out.
Knowledge base
Prepared a design for the knowledge base, which includes all possible materials and 3D printing technology, it should be another source of organic traffic from Google
Landing page builder
There was a request from the marketing department to create a tool where they could easily assemble landing pages for marketing activities. They already used an online website builder, but there were two problems. Landing pages did not look the same as the main application because the styles were different. The CMS for storing content was uncomfortable to use. So we decided to make our own builder on Hygraph using components made in Figma. As a result marketing specialists could build landing pages filled with content in 3-4 hours.
Journey Map and OKRs
At one of the brainstorms, we developed a user path, and such key OKRs, then based on this data we compiled a list of features for implementation and asked all team members to vote for which features require the highest priority
Results
For me, it's a product that requires a deep understanding of the whole company's processes. I learned how to work with statistics, better understood the needs of users, created a complex design system and immediately put it into practice. Together with stakeholders, we held a workshop where we determined the OKR and product development direction.