Creative web design case study-Chizel Prints

Brucira
Brucira
Feb 18, 2019 · 7 min read

“3-D is not just another dimension added but it enhances the user experience. You can touch it..you can feel it..

Chizel prints is a digital factory for on-demand manufacturing using 3D printing & CNC. Brucira collaborated with product lead of Coco-the product. Together we designed a One-of-its-kind on-boarding experience for users. Shredding the clutter, user can now post his requirement, share design file in specific format and receive batch of 3-D print at his doorstep without any logistics cost.

The solution is transforming the 3-D printing space & Brucira takes pride in being part of this unique user experience. Stay tuned for the entire UI product development journey.”

Brucira collaborated with Chizel prints to do their in-product screens. The task was to flash out the ease of casting your product/design idea to a 3-Dimension, delivered at your convenience.

Old Process

We follow the design process of Chizel Prints across all web browsers. We partner with Project Lead (Yash Rane) to gather competitive analysis, user information, translate business goals and user need into user flows, wireframes, detailed designs and prototypes. Worked closely with developers to deliver solutions and resources for final production.

The Pain Point

  1. Lack of trust in price

The Solution

by creating a online platform……

The Approach

  1. Partner with Project Lead to plan and define the Web App experience.

Competetive Analysis

After we gather all the information we needed in order to move into the next phase of the process, we start doing competitor analysis. We looked at some other market places where people upload files to get their 3d printing done. The names were Shapeways, 3d hubs, Sculpteo and few more.

Image for post
Image for post
Image for post
Image for post

Problems with these apps

Although the apps mentioned above are the market leaders in this domain but still their were few things that were missing in these apps.

-High cognitive load- Due to high amount of information available on the same page the main functionality of the app that was to order 3d in different material or colors was not coming out properly. Confusing interface.

-Users couldn’t upload multiple files in a single go

Problems for Users

  1. Finding 3d printers offline was a pain, Even if they search online getting to them and coordinating was difficult

The Task/Challenge

The task was to make the user flow very interesting and engaging throughout the entire purchasing flow, with the following points in mind.

-User should be able to upload multiple files and process every file separately

-User should get proper education about the materials and the features of the app.

- He should get proper recommendation for the material he/she need to use

-Get information from Users in order to make the system smart enough for later

Pain Points

So we have two key pain points to solve during this challenge:

  1. How to indicate all the information in a way that the user can access it whereever required

Information Architecture

In an industry where content often suffers because of lengthiness and legalese, we knew we needed to find opportunities to add visual interest. Ultimately we created a variety of page templates but made sure to create repeatable content modules, not only to create ease in design and development, but also to create consistency across pages.

Image for post
Image for post

Solution to pain points

  1. For solving the first problem. We incorporated multiple file upload on the very first step and gave user options to select the file he/she want ot process first, After completing all the steps when users lands on the cart page, they will see a section of pending files which are not processed yet. User can now process those files from that step.( For users those who want all the parts to be printed with same material and other attributes, we gave options like repeated property blocks in cart option)

Visual Design

After preparing the information architect, we started working on the visual part of this app. we put in mind all our findings and testing results to create a light and clean UI that will not distract users from their goals.

Image for post
Image for post

Upload File Page

You can upload multiple files on this page. Once uploaded you can select which file you want to process first and can proceed by clicking on next button.

Users will get notified in case of any error and they can remove those files easily from here.

Image for post
Image for post

Select Material Page

Users can decide which material they want to use for the 3d print. Shipping time and base price are shown in front of the material.For new users, We gave an option for recommendations. When the user asks to recommend then we ask him a couple of questions like industry, type of finishing, fidelity etc and based on the answers, The AI of chizel recommend the user the most suitable material.

User can view the material details in case he wants to understand its use case also user can sort these material on the basis of price, shipping time.

In 3d printings, All the materials could not be used for every type of shape thus the selection of materials is highly dependent on the dimensions and precision of a file. we created an error handling system in which the user will get the error along with the suggested material in case of any mis match.

Image for post
Image for post

Hybrid Page

After selecting the material required, users will land on hybrid page which has options to select finishing, color, dye and many other options. We divided the entire page in 3 sections. Section 1 for doing operations on prototype. Section 2 is the preview section which changes real time when user selects color or finishing. User can also download the repaired version of their uploaded file.

Section 3 is the deliverables section from which user can select the type of process they want for their 3d print and also special instructions just in case. From here they can now add the file into cart.

Image for post
Image for post

Cart Page

Once added to cart , user can see pending files and he can directly process those from here . The detailed costing is shown on the right just like normal Ecommerce flow. Here user can also download quotations files.

User can change the quantity of shapes and can also modify those files.

Image for post
Image for post

Delivery Page

Image for post
Image for post

Payment Page

Image for post
Image for post

All Done!

We hope it gave you a little insight into the decisions We made. We are proud doing this project. This is no where perfect but We feel with its unique approach of managing Purchase, this idea can help the company to be productive.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store