The Roll’em Out Shelves WordPress website was one of my earlier projects for Get Found Fast. The client had an old Concrete5 website that badly needed to be replaced, so we convinced her to update the look and platform to WordPress.

WordPress Mockup Process

When I first started working for Get Found Fast, we hadn’t quite developed a method of approaching new website designs for clients. Typically a single mockup was made for the client and then tweaks were made and the mock-up was translated into a WordPress website. As was the case with the CLC website build, I tried to do something a bit different with this one by offering multiple mock-ups. This only served to confuse the client in the long-run, though we were still able to provide a finalized design.

The design process started with the client explaining that she wanted the look of the site to match something more modern. We were thinking sites that catered to a female demographic with floral colors so we ended up referencing some newer sites that embodied that look and the result was something vastly different than the original design.

The first mock-ups we did were changed pretty extensively during the process:

WordPress Website Design Process

rollemout full home pageAfter we settled on the final design, we started building the website using the Understrap WordPress theme. The earlyd esign process for this was initially tricky because they wanted to showcase their product and since showing a rolling shelf was a lot easier than describing it, we tried to find a way to display a video of the shelves in action.

This proved to be much more difficult than originally thought because the client did not have any high-resolution videos of their product in action. We ended up scrapping the video idea in favor of an image gallery depicting the different types of shelves.

The rest of the design involved building out a section with both text and video testimonials as well as finding a decent image gallery plugin. The reason we ended up using an image gallery plugin was because of the function the client needed. They wanted a gallery that had multiple galleries contained within. Clicking on a category within the top gallery would lead you through to an inner gallery with images representative of that type of shelving.

One design aspect which proved to be troubling early on was the circular cutoff design of the first fold. Fortunately, through a lot of tweaking in the design and CSS, we managed to make it work on both the desktop and mobile versions of the website.

Conclusion & Optimization Report

After finishing this WordPress project, I started to realize that I had to re-define how I was approaching the website design process with the client. As was the case with the CLC Commercial website, providing too many options confused the client. In both cases, providing three different mockups made the process less efficient.

The design of the site was a learning experience as well since the circular design doesn’t always work well in the realm of HTML and CSS.

As for the optimization, at the time we had managed to get the pagespeed to a fairly decent score (I believe it was around a B), but at the moment the site’s performance has suffered due to the addition of plugins and third party scripts.

« | »