I initiated my career as a lead on a startup product—Tran3D. In this article, I would like to share with you some of my design from strategy to interface.
Tran3D is an online 3D printing service platform where distributed 3D printing resources are gathered, shared, and applied.
Tran3D runs a C2C business model. It facilitates transactions between 3D printer owners and people who want to make 3D prints. Service bureaus can join the platform to offer printing services while customers can select one of the best solutions we recommend to get their customized models printed.
I led the product, UI/UX design, and front-end development from the start.
As a designer in particular, I worked on
Working closely with my team, I first made a Q&A sheet that depicted our potential users.
Modern people who enjoy customizing things or transforming ideas into reality using technology.
There are three main types. 1. Common individuals—people who need 3D printed products, but without 3D printers; 2. Designers—people who are capable of producing high-quality 3D models; 3. Manufacturers—people who own 3D printers, can either be individuals or companies.
Most likely, they can be found in universities or manufacturing industry. They might have active accounts in 3D printing forums.
Simple, rapid, technological, playful and high quality.
Based on the user brief, I interviewed 50 early adopters via telephone and finally planned out our design goals.
Next, I will choose three representatives that best accomplished our design goals. And I will talk about their design processes and deliverables.
3D printing features rapid prototyping and product customization. It enables consumer products to be made on-demand, eliminating the restriction to craftsmanship and manufacture, as well as reducing the waste from overproduction and overpricing.
On the consumer side, however their expertise, most people expressed their interests in transforming their ideas into reality and their curiosity about 3D printed objects during interviews.
So here comes the problem—how might we get customers onboard in order to fully deliver the quality of 3D printing to them?
To introduce complex technology home, Tran3D must provide customers with an easy and fast channel to getting their hands on real 3D printed products. The main idea is to build a module that helps users start a 3D print and guides them quickly through a customization flow before they reach the shopping cart. Some core design principles were identified:
Overall, the customization flow should be lucid, efficient and interesting.
I started my exploration by scoping the user flow into three phases: upload my models, select a material category, and choose a 3D printing service. In this way, a complex and tedious process was decomposed into parts whose tasks were easier to understand and goals were clearer to achieve.
I then came up with a few design concepts while creating wireframes. Those concepts were:
Starting a 3D print is a focused job for users. Their primary goal is to find the most suitable printing service for their uploaded models. Due to 3D printing's nature, however, the task requires deep focus, manual input and selection, and back-and-forth decision-making.
My solution was utilizing SPA (Single Page Application), with which users could accomplish the task fluidly all in one page. Comparing to the multi-pages solution, I reduced the cognitive load that users took to make decisions as well as the drop-off rate caused by page-switching. During usability testing, I noticed better results in terms of effectiveness and efficiency.
After unifying back-end data, I finalized the flow as indicated below.
It creates a clear sense of assistance and reduces the unnecessity to a minimum so that all users can understand how things work without further explanation. Useful images and friendly language are added throughout. It also has animations and transitions, which adds a bit of fun. I am optimistic that users will get onboard and progress through all three phases with little friction, leading to successful customizations of their 3D prints.
Tran3D, in essence, is a 3D printing community where users design, prototype, sell and purchase. However, different users have different roles—Designers productively transform their concepts into printable designs; manufacturers register 3D printers and promote their services; and like the rest of individuals, both can collect or purchase what they are interested in. So given a user,
Upon browsing a user profile, one needs to identify that person's role and characteristics. According to this, I listed some keywords for ideation purpose.
After sketching out several candidates, I made the following design decisions.
I separated users into three categories: common individuals, designers and manufacturers. All types shared the same template—Basic information was listed out; designs, collections, orders, followings and followers were organized into tabs. It is worth noting that designers were given an extra section to introduce their backgrounds, concepts and portfolios while manufacturers were given a shop page and a dashboard to manage printers, orders, etc.
I used Reversed-ソ Pattern—Our eye starts scanning from top left, then diagonally down, stopping at the bottom right. Within a short break, information on the top right might draw some attention. The diagonal line guides us to read the main content and the dot serves as a little weight for equilibrium.
I chose the color palettes similar to flat UI. Complementary colors made personality stand out. Analogous colors kept our page clean and calm.
Besides user settings, I highlighted 'Register', 'Create' and 'Follow' buttons and encouraged users to enrich their profiles. Also, behaviors such as creating and collecting would be included in followers' home feed, which kept the character active in his network.
I borrowed concepts from material design and flat design to set overall visual direction. Thinking about material design, it has three-dimensional qualities that are reflected in its use of surfaces, depth, and shadows. This concept is tightly relevant to 3D prints. A match between our visual system and the real world can strengthen the connection between our customers and products. It also aligns with our brand image: simple, rapid and technological.
Following images indicate a common user's profile, a designer's profile, a user's home and settings, respectively.
Tran3D schedules 3D printing services based on data and facts. It is important for manufacturers to provide authentic and detailed data. This is non-trivial work:
Therefore how might we help them upload data in an intuitive or instructive way and how might we organize their data for clarity purpose?
To get better insights, I interviewed 8 people who owned 3D printers. Based on their backgrounds and behaviors, I made three personas.
Frank, aged 32, is an assistant professor of material science at university. His lab owns 5 industrial 3D printers which could support more than 40 printable materials. Frank has rich knowledge about 3D printing and especially, he knows materials inside out. He is an expert in building mathematical models and experimenting new things.
Sarah is an AM at Tiertime, a 3D print company in Beijing. She works for a team that is responsible for promoting their 3D printing services to all partners. Since she is not an expert, her job is to maintain or update data provided by her technical colleagues. In order to deal with different platforms from different partners, Sarah needs to quickly understand interfaces and exchanging information with the team.
David is a technology enthusiast and he is only 20. His father bought him a desktop-level 3D printer on his last birthday. He wants to make the full use of it. David knows how to use the printer but he has no idea about how to provide 3D print service—He can only create simple pricing strategies but he is not sure if they would work.
Their needs can be described as:
During the ideation and prototyping phase, I mapped out solutions one by one:
Manufacturers may lack the motivation to publish all service data in one single use. So I divided the process and organized them into levels. From the shop to specific objects like printer and material, a hierarchical design would very much facilitate user tasks.
I chose a component that had consistently shown up in Tran3D—the modal. This was because I did not want to overwhelm users with an unfamiliar UI. A modal also made them concentrate on what they were doing while kept the background as context. Within a modal, data uploading was split into steps and there was top navigation indicating the progress.
Titles, descriptions, tags, photos and categories are attributes for manufacturers to better describe their services. These can be descriptive and educational to someone outside of their niches. Completeness of data speaks aloud for services.
Making a pricing strategy is one of the most challenging tasks when manufacturers manage their services—Strategies in 3D print industry involve a variety of factors, not only the physical attributes but also laboring influences.
A common practice is using linear polynomial as the mathematical model which sums up a number of terms. The quantity of terms depends and each term is flexible due to possibly different interpolations.
During research, I realized that there was a huge gap between the system and its users, more specifically, the complexity that a pricing strategy could go and the capability for people to understand, digest and make adjustments for that.
Luckily, I found that building a one-to-one correspondence between a term and a colored shape was the most intuitive and efficient solution. It turned a complex math formula into objects that can be easily cognized and understood by human beings. Therefore, I illustrated this polynomial using simple shapes and colors:
The module must be adaptive to users with different backgrounds. Consider a user with non-expert background, he might need notes for terminologies, tips for interactions and default values for complicated terms. On the contrary, an expert might need more specifications and details. And he wants to enable more terms in the polynomial to better control his pricing strategy.
Manufacturers will get a live preview of what the price is after proposing a pricing strategy. The result is calculated by applying the pricing strategy to a test case we provide. It even gives instant feedback whenever the user makes any adjustment to the linear polynomial. This feature helps manufacturers find their suitable pricing strategies. It also makes them feel empowered so that they can trust our system.
Service data like printers, materials, even pricing strategies are revisable if one makes any mistake.
I want to highlight how I understood problems and developed insights from research using JTBD plus VPD framework. First, I identified three user types:
Through interviews, jobs and related outcomes (a.k.a. pains and gains) were extracted:
Given the knowledge, a mapping from pains to their relievers and gains to their creators was created. Below is an example for user type: proxies.
Some outcomes were common while some were specific. There were also conflicting needs of different types. For this reason, the solutions were flexible and compatible, treating all user types equally.
From the shop's main page to a modal that creates material and pricing strategies, I am satisfied that my design goals are accomplished across the site. The design is simple yet powerful, not only providing intuitive interfaces but also tailoring to different user needs. Meanwhile, a lot of UI elements are reused, contributing to the system consistency.
At the early stage of a startup company, I wanted to deliver a minimum viable product and provide a flexible structure that could scale naturally as the platform grows. Looking back, the project has included all the necessary functionalities and built upon a scalable framework. It has successfully leveraged the design language to promote a high-end technology, decoding the secret of 3D printing into a context that people can comprehend and make use of.
As a lead, the project also made me appreciate the importance of coordinating different perspectives and collaborating with different roles. It became one of the most precious experiences in my career.