Website Design & Development

Soiland Company (Series)

A website redesign project including Grab N’ Grow (grabngrowsoil.com), Stony Point Rock Quarry (stonypointrockquarry.com), Soils Plus (soils-plus.com),
North County Bounty (northcountybounty.com), and Soiland Company (soilandrocks.com) websites.

Soiland website design and development project

Project Brief

Design Challenge
How could all of Soiland’s sister company websites be redesigned in a unifying way?

Project Description
Soiland Company is an incorporated entity comprised of Grab N’ Grow Soil Products, Stony Point Rock Quarry, and Soils Plus Soils and Amendments. The websites were clunky, had poor content architecture, and strayed from the corporation’s branding guidelines. In addition to a poor design, the WordPress platform was outdated and had a lot of vestigial software running to achieve functionality through insufficient means.

I suggested we create a parent theme which would be symbolically linked to all website installations on the server. Then, we would create child themes to overrides styles, post types, and other details for each individual site. This allowed us to create multiple WordPress themes justly slightly over the budget of one.

Software & Resources Used

Adobe XdAdobe Xd
Adobe PhotoshopAdobe Photoshop
HTMLHTML
CSSCSS
JavaScriptJavaScript
jQueryjQuery
PHPPHP
WordPressWordPress
MaterializeCSSMaterializeCSS
MastersliderMasterslider
Advanced Custom FieldsAdvanced Custom Fields
Font AwesomeFont Awesome

The Final Design

The final design uses a particular color scheme for each website, based on the logo design for each business. Photography was selected to reflect the area of industry products for each business such as gardening, mining tools, or the rock quarry.

Grab N Grow website redesign mockup

Final design of grabngrowsoil.com

Stony Point Rock Quarry website redesign mockup

Final design of stonypointrockquarry.com

Soils Plus website redesign mockup

Final design of soils-plus.com

Page mockup for soils-plus.com

Every home page followed a consistent layout, but had different photography, content, and colors.

Page mockup for grabngrowsoil.com blog post

Some sites had a blog which used a parallax banner, variety of typographic layouts, and “about the author” section at the end.

Page mockup for grabngrowsoil.com product post

Every site featured a series of products with a parallax banner image, description, pricing sheet, and bulk material calculator.

Page mockup for stonypointrockquarry.com

A unique post type was made for documented projects. Each one featured as its own post.

Interactive Features

The websites serve up a consistent parallax effect across web pages. Various hover effects over images and buttons enhance user interaction. On mobile the user can bring up a modal and select various social links, where they wouldn’t have fit in the top bar design like they do on desktop.

mobile navigation

mobile modal social links feature

Design Process

I first designed Grab N’ Grow’s website for mobile and desktop. Once the design was approved I was able to duplicate and re-use the design working flies to change out the way colors were applied to each site design.

Soiland styleguides

Each site had its own branding guidelines so application of color was logical.

Soiland website design and development project

Conclusion

The project was a great success! We were able to re-approach the color scheme for Soils Plus in our development phase to correct some of the issues we were having in the mockup/design phase.

Project Team
Jacob McAdam, Graphic Designer & Web Developer
Sara Ysunza, Project Manager & Content Developer

These websites were made for Soiland Company, Inc. (2018).