Summary

Make-a-Part is a startup that prints small rubber and plastic parts using 3D technology, serving both regular customers and manufacturing shops in need of unique, minimal quantity parts. The user interface allows file uploading; however, mailing a physical part is also an option, even if the part is broken or worn out.

Problem

What do you do when your almost new dishwasher starts leaking? The manufacturer’s year-long warranty had, of course, lapsed six months earlier. You have fixed appliances in the past, so you carefully start disassembling the appliance and, when you find out that a small o-ring is broken, it is a relief. Going to Home Depot is a no brainer, but it turns out that this is not a standard o-ring and the only place you found online that sells it requires a minimum purchase of 100.

Many times finding a particular machine part proves to be challenging, either because it comes with 5 other expensive, unnecessary parts, or the manufacturer no longer provides support for this old piece of equipment. The available manufacturing shops do not usually deal with small quantities and a company’s salesperson needs to call back the customer for pricing. Make-a-Part is a fully responsive desktop app that has a modern interface and provides instant pricing for all orders.

Solution

The main goal of this project was to build a responsive one page product showcase to promote a new product. However, I felt the urge to add a few more pages to better accomodate the user's needs. To stand out from the competition, I created a modern, playful, illustrative look that communicates all things machinery and 3D printing. My priority was to design and code a visually appealing interface that is easy to navigate, with simple order submission. It was important to design an order process that builds trust and confidence in the brand.

View Website

Process

Planning

I met with the customer who had the startup idea and, after a long conversation and a short brainstorming session, we discussed their capabilities, trends in this field, and some of the lesser known behaviors and common practices, fears, and expectations. As a next step, I did some research and typed up a competitive analysis in order to identify the competitors and evaluate their strategies. I was interested in their strengths and weaknesses and how they approach similar problems, so I could craft a better design for Make-a-Part.

Survey results
Layout

Prior to jumping on the computer and opening Balsamiq to start wireframing, I did some sketching to see what the hierarchy of the elements would be and how they would be positioned on the page. I knew the more thought-work I do on the paper, the better. I made a few iterations before moving on to the mockup stage. At this point I was not too concerned about the copy and fine tuning as I left the high level of detail for the mockup.

Personas
Execution

Since this is a brand promoting all things engineering, it was essential to have a technological, yet simple look and feel. I also designed the style guide featuring clean color palette of various shades of grey, with a main color of light blue and yellow action color. For typography choice, I paired the two san-serif typefaces Raleway and Open Sans.

Styleguide

The following high fidelity wireframes demonstrate the transition from the initial wireframes to the finished product. You can see on the actual website that during coding, I continued beyond this iteration and made the checkout to be a multi-step process. My action was in attempt to fix some of the usability issues I could see, without encountering new ones.

The website uses responsive design ensuring an optimal experience on any screen. I coded it using today’s best practices for HTML5 and CSS3, including code validation through W3C.

Wireframes

Conclusion

For the sake of brevity and to meet the deadline for the project, I skipped the Structure phase of the design process and had only collected unofficial user feedback. Had I had more time, I would have focused on the user’s needs, conducted tests and interviews, defined the goals and frustrations of the consumer, and do a lot of A/B testing to make this project complete.

View Website