Formfactories Web Design

Overview

In a group of 4, I assisted a 3D printing company, Formfactories in San Diego with redesigning the company website to market the new business. We met the owner of the company Michael while he was trying to renew his business. His business was already successful but his business took too much of his time into customer service, explaining how 3D printing works with clients. Michael hoped to start a new partner company that would only serve people who have extensive knowledge of 3D printing. 

Problem

How might we create a website for this new targeted business and automating the entire online ordering process while still could get information about printers and materials if they have any questions? 

Solution

The new web design focus on reducing the cognitive load for users during the ordering process and creating a more clean hierarchy of printer, material and technology's information. 

Team

Alexander Chen

Denise Tang

Wayne Phung

Scope

Client Project

10 Weeks

User Research

UX/UI Design

Tool

Paper and pen

Post-its

Figma

Flinto

Personal Contribution 

UX researcher - conducted online and field studies, interviews to gather user insights

Design Lead- decided the style, created wireframes and prototypes 

Design Research

We interviewed Michael to pinpoint his needs for the new website. We also interviewed 10 people who were familiar with 3D printing and who could be the potential customers of Formfactories.  

Top client objectives: 

  1. Transparency in the services Formfactories offers: the website has an organizational flow that showcases to potential customers and website visitor what Formfactories is and what services it offers 

  2. Minimalist feel, quick snappy, professional and techy: simple appearance and accessible approach of company’s resources and services:  

  3. Tailor the website to customers who are familiar with 3D printing

Top customer concerns:

  1. Customization of the order: Control over setting up 3D printed parts to make changes if needed. Includes different factors to control such as size of the print, how detailed and how complex, supports and brims, etc.

  2. The ability to get an instant quote: Websites allows them to upload CAD file and has a time estimate of completing the order. 

  3. Reliability of the business: business should have extensive knowledge about what they do and how to help the customer with the best services and reasonable price. 

Competitive Analysis

We researched some potential competitors of Formfactories, specifically looking into the websites of other 3D printing companies. We analyzed what notable features they had based on their branding, website functionality, content, site architecture, site navigation, and visual design that could inspire features to incorporate within our redesign of Formfactories’ website.

Takeaways

1.Call-to-Action button to encourage users to submit their files clearly visible on every page.

 

2. Include clear photos/graphics when listing the various 3D printing techniques to help the user decide which is right for them.

 

3. Instant quote and estimated delivery date are important to include upfront to address people's primary concerns about the costs and waiting times for Formfactories's services.

 

4. More novel features, such as recommendations for material usage to a CAD file can differentiate Formfactories's from its competitors.

5. Avoid too much information or unclear terminologies provided to customers on a single page or one tab.  

Personas

We summarized our findings and understandings of Formfactories' typical stakeholders into 2 different personas, each with their set of circumstances and typical tasks that they would need to do on a website.

Ideation

Information Architecture

We created an initial user flow for the website and it was iterated upon later once we fulfilled making the main wireframes of the main sections of the initial site architecture.

Low-fidelity Wireframes 

Based on the created architecture, we sketched out initial wireframes on paper. We had rough ideas on the content of the landing page, the information page of different 3D printers and materials shown, and the walkthrough of the ordering process for 3D-printed parts.

Design System

Moodboard

We created a moodboard to inform the visual design and branding of the website to make it techy, simple, and professional, as the client preferred. So we used blue as the accent color and navy as the secondary color. 

Prototyping

Wireframes

High-fidelity Prototypes

A simple landing page with three components: a hero image, a call to action button and a navigation bar. The rest of the page contains information about printers for customers to learn more which is also prompted at the top navigation bar. A footer is at the bottom of the page with buttons and links to get more information. 

For the landing page of the mobile web, we used a hamburger menu button instead. We shortened this page and put the rest of the information to another page, Why Us page. 

Printers page: this page primarily showcases more information about the technical details of each of the 3D printing services Fromfactories provides.

FAQ Page: All questions that are frequently asked by the company are listed in detail here. Comprehensive responses are laid out as easy to read the body text. 

Get a quote page: we used the wizard method to implement the process of ordering and to simplify the ordering process which requires a lot of settings and steps. We separated the ordering process into steps with a confirmation step at the end. 

For the mobile version, we simplified the process by removing the customization process since from our interview almost everyone used a computer to upload the CAD file. We still kept the get a quote page on mobile since we also found out that there was a need for quick and low-demanded orders which could be satisfied with default settings of material and printer fro the most of the time. 

Iteration

We tested our prototypes on four potential customers of Formfactoris.  We asked them to interact with the prototypes with certain tasks like uploading CAD files and submitting orders so that we could observe and record their interactions. Then we asked them follow-up questions related to how they engaged with these tasks. 

We found out that the user flow we have now was not really complete, so we made some changes to the information architecture, adding few new pages for customers to manage their accounts and orders, separating the information shown for printer types and materials. We also included some pop-up windows for additional information if needed.

Our design of the ordering process pages had three major problems

  1. The inconsistency of the ordering process: the ordering process pages (the step by step pages) were styled very differently from other pages of the website. The lack of navigation bar reduced the accessibility for consumers to navigate away from the ordering process. 

  1. Limited space: the available space on the interface on each section of the ordering process was small and could not really provide all the information needed 

  1. Vague indication of steps: the indication of the steps on the top (four dots) didn’t effectively explain the tasks costumers had to do before finalizing the order. 

We still used the wizard method, and the step by step indication on the top. But we added a description to every step. We listed information on a whole page instead of trapping in a box. We still kept the confirmation page but with a vertical layout. Customers could still make changes on this page.

For the mobile version, we removed the ordering process pages and prompted customers to use a desktop device instead of with an instruction based on the user testing result that all of our interviewees said they would not do anything related to 3D printing on mobile phone. 

Final Solution

We also made some changes in other pages, like we separated the material and printer on the printers page and changed some of elements' styles on the landing page.  Please click here to interact with the desktop prototype and mobile prototype.

Reflection

Always have plan B

We initially planned to interview real customers of the company and we spent a lot of time contacting and scheduling it since we knew it is important to listen to real and different stakeholders. But the reality is not always as you planned. Eventually, we interviewed potential customers. 

Copyright © 2020 by Janice Lixiang Zhou