Case Study: 3DPrintOKC.com


3DPrintOKC, Inc. is a company based in Oklahoma that manufactures 3D prints and designs. They hired me to develop a new website for them that would contain all of the content that they needed it to, have a good flow and easy navigation, and of course, look good. They also requested that it be delivered within 30 days, if possible. I delivered the website as requested, increased their search engine ranking significantly, and heavily improved the customer experience.

Services

Web Design, Web Development, Graphic Design

Technologies

Wordpress, HTML/CSS, Adobe Illustrator, Sketch App

Timeframe

October 2017

Introduction


the old 3dprintokc.com
The original version of 3dprintokc.com. It was created with Cubecart.

Context

The original website for 3DPrintOKC was template-based and not professionally developed. Therefore, it had some issues. Firstly, it was not focused correctly - it was centered around the products that the business sells, which is not their main initiative. Second, the design was fairly unremarkable and plain. While 3DPrintOKC would probably not need a flashy, eye-catching design, it is important to be unique and have a website that compliments your brand. Finally, the site was confusing to navigate. It was unorganized and often hard to find what you were looking for.

3DPrintOKC creates custom prints and provides other related services, primarily. While they do sell products such as printers, parts and pre-made prints, this is a secondary endeavor. After learning this and many other things while talking with the owner about the project, I decided that my goals would be to:

  • highlight their main services
  • clean up the navigation
  • provide a separate shopping section
  • develop a streamlined, on-demand custom printing service

Challenge

The goal was the complete the website in about a month. The budget was moderately small, so I had to work both quickly and efficiently. With these constraints, I found that having a solid plan and communicating with the client as often and as clearly as possible was extremely important. I found that it was best to work on the website and list out questions and concerns for the client as they came up, so that I could bring them all up at once and solve multiple problems at a time.

Stage One: Planning


Sitemap

3dprintokc.com sitemap plan

The first stage of the process, after initial client communications, was to begin planning the new website. This includes what technologies I would use, what functions I would need to include, and how it would flow. I already decided what my priorities would be with the new website, so first I began drawing sitemaps and envisioning how the navigation of the website would feel.

Essentially, the site would offer a means of ordering custom 3D prints, a shop for the business's products for sale, an about page for business information, a means of contacting the business, and a page for signing up/logging in (for shopping.) Pages not mentioned but are implied include individual product pages, an account management/settings page, checkout pages, etc.

Knowing what we needed to accomplish, we decided that our best option would be to develop the website in Wordpress with the help of the plugin WooCommerce. This would provide the tools we needed to set up the store on the website, complete with accounts, payments, a shopping cart, and other related features. It would also make it easy for the client to edit products on their online store and to edit pages, if necessary.

Layout & Wireframes

At this stage I also drafted the layout of the website and planned out the landing page. While some might choose to create designs for each individual page, I find that it is a waste of time for me. Once I have the website element styles (such as fonts, colors, buttons, etc.), template for page layouts, and important pages designed (such as the landing page) I am prepared enough to begin development. The design almost always changes a bit through the development phase anyways.

The site would not contain a ton of content and we had a pretty clear idea of what we needed, so coming up with a layout was not complicated. I drafted the following wireframes for the client:

wireframe of 3dprintokc.com
The first wireframe design; a single page layout with a header, about section, shop preview and contact section. I presented this design to include illustrations for images as well.
wireframe of 3dprintokc.com
The second wireframe; also a single page layout, but more compact. Content would be placed inside of 'blocks'. I also presented this to include photographs instead of illustrations.
wireframe of 3dprintokc.com
The third and final draft; the idea of this one was to make the design compact and present all information that we wanted to on the home page with as little scrolling as possible. This eliminates accent images, trading them for either background images in the blocks, or just solid colors.

The client decided that he liked the first layout the best. However, we used the centered-style header with an image background instead of an illustration from the second and third wireframes instead. In the final website, I also replaced the first section underneath the header, which was supposed to represent an 'About' section with a map, with a 'Services' section instead.

Stage Two: Designing


3dprintokc logo

After we decided how the website would be structured, what features we needed, and what technologies we would use, we moved onto the style of the website. As per my usual process, I do some drafts of the site elements and landing page to establish the look and feel of the site. For this project, since there was an existing logo, I already had a base for a style and a color palette.

I researched similar businesses to 3DPrintOKC for ideas, and found many other 3d printing firms with similar goals. Some of these were 3DHubs, ProImage 3D, and Sculpteo. With these, I analyzed their designs, borrowed elements that worked (while of course, not stealing!) and also noted their mistakes so that I could avoid them. This process helps me draft very effective and intuitive designs without wasting time. It's always easier to work from something than to work from nothing!

Feeling inspired, I drafted a few heading designs to go with the wireframes I had created (shown earlier.) These were made before we had fully defined the style of the website, so the colors and fonts are not final.

header draft
The first header concept; this featured an illustration of something being 3d printed, and a very bright and modern palette.
header draft
The second concept is very similar to the first, except that the background is now a dark purple and the illustration is enlarged and off the canvas.
header draft
The last concept is the most different of the three and includes an image as a background instead of an illustration, and centered text.

I showed these to the client, and he wasn't much of a fan of the idea of illustrations here, so we went with the third design with a photograph instead.

After this, I worked on defining the color scheme and fonts for the site.

Colors & Fonts

color palette of 3dprintokc.com
The colors used in the website. The orange was used as an accent, while the blue was the dominant color.

I pulled a shade of orange for the logo, and used it as an accent for the website. I had tried it as the dominant color but felt that it was too bright and energetic. For the dominant color, I chose a more calm and muted blue color. This helped convey a sense of professionalism and trust, while the orange accent brought some warmth to the design. Orange is also associated with creativity.

fonts of 3dprintokc.com
Sample of 'Titillium Web' (header) and 'Open Sans' (body) from Google Fonts.

For the primary font of the website I wanted to match the font of the logo closely. I found that both "Oswald" and "Titillium Web" (both available through Google fonts) fit very well, but ultimately chose Titillium Web. Titillium felt a bit more "electronic" and matched the logo a little better. For the body font, I used Open Sans. Open Sans is a great font for a wide variety of uses. It's clearly legible on screens, goes great with a lot of other fonts, and in the case of this website, matched the clean and modern look of the rest of the design.

Icons & Graphics

After the styles were decided on, I created illustrations to go with the sections on the website in Adobe Illustrator.

The first illustration I created was originally intended to go with the 'About' section on the home page, but since that was removed, we only used it on the 'About' page instead. The illustration is an isometric rendering of the state of Oklahoma, and depicts a pin over Oklahoma City, which is where 3D Print OKC is based.

location of 3d print okc
Illustration for the 'About' page, showing the location of the business.

The next illustration was for the contact section. It is an envelope, which slides in from the right side of the page.

The last illustrations were created for the 'Services' section, which replaced the 'About' section on the home page. I created cubes to match the logo, depicting some of the main services that the business offers. These services, in order, were large-scale printing, resin printing, bulk discounts, and multi-color printing.

illustration for the contact section
icon for large-scale printing
The large-scale printing icon depicts a large cube next to a much smaller one.
icon for resin printing
The resin printing icon shows a clear cube, since resin is a translucent plasticy material.
icon for bulk printing
The bulk printing icon represents multiple cubes stacked.
icon for multicolor printing
The multicolor printing icon simply shows a cube made up of more than one color.

Stage Three: Developing


In the development stage I began by gathering all of the necessary files. This includes things like the business's logo, the style guide for font and color referencing, the approved mockup of the design, and any CMS or libraries I would need. For this website I installed a copy of Wordpress locally on my machine using XAMPP. By developing the site locally, I could save time and allow the old website to remain up and functioning in the meantime.

After setting up the Wordpress installation, I installed the theme we purchased "Flatsome." We found the theme to be a great fit since it offered the e-commerce plugins and layouts that the client needed as well as an intuitive page builder. It was also very flexible, which was important for implementing the design that we had agreed upon.

With Wordpress set up and the theme installed, I began customizing the theme and adding content. I changed the styles as per the usual method in Wordpress to what we had decided on. With a litle bit of work, I had everything looking nice. Then I began working on the home page. A few changes to the design occured in this stage; I replaced the 'About' section on the home page with a 'Services' section, featuring icons to represent the services, as I mentioned above. I also added an instagram feed, since the business often posts about their projects and services on their. This was a great touch as it exposed users to these posts through the website, and added some extra images to the home page, increasing engagement.

custom 3d printing system for wordpress
Screenshot of the 3D printing system we used, taken from wp3dprinting.com.

Originally, for the custom printing system, we had planned to implement PHP scripts which the client already possessed for calculating the costs of 3d printing into the website and creating a UI for them. However, while developing the website we came across a plugin called 'Wordpress 3D Printing.' It also included WooCommerce integration, so to save time and money, we decided to implement that instead. It worked perfectly, and helped us get the site up and running even quicker.

Once development was completed, I uploaded the site to a subdomain on the client's host to give them a chance to see the website before it was finished. Once we communicated and I revised what needed to be changed, added or removed, the site was ready to go live.

"Everything about the process was great. I had no issues and the whole site looks great. The experience was very pleasant and Brooks did a great job and was very professional throughout. I am very happy with everything and will continue to utilize Brooks in the future."

Stage Four: Launch & Conclusion


the finished website.
A screenshot of the home page of 3dprintokc.com upon completion.

I moved the website from the subdomain to the primary domain, migrating databases and moving files as necessary. After the transition was completed, my job was done.

The final website was successful in being more intuitive and user-friendly than the old one, better emphasizing the goals of the business, and of course, looking great.

On the home page, the header immediately draws in potential customers with the business's main service - "We Make 3D Models into 3D Objeckts." This slogan is followed by a cta, bringing them straight to the upload page for custom prints. In the below sections, some of the business's services, featured products and contact information are shown.

At the bottom is their instagram feed, which updates live, followed by the footer. The footer simply contains a short paragraph about the business, some contact information, a sitemap, and supported methods of payment for reference

Visit the website if you'd like to see it for yourself!