CoreHome Builders – JC Jackson

CoreHome

An MVP For The New Home Builder Market

CreativeMMS wanted to bring to a WordPress-powered web platform for new home builders to market. 

Leading the design team at Creative, I took the finalized architecture and brought the product’s minimum viable product to fruition. 

User Experience Lead, responsible for: 

Project Overview

CreativeMMS wanted to entice new home builders as a client base. To do this, we knew we needed an intuitive way for builders to create and maintain customer-oriented websites.

Enter CoreHome, Creative’s first product. CoreHome is a pre-made, site management solution specifically for builders, outfitted with special catalog management tools and a basic front-end design optimized for conversion.

CoreHome can be purchased on its own, or builders can have Creative tailor a CoreHome build their specific needs. In fact, CoreHome’s first release was one simultaneously  customized for a client: J.C. Jackson Homes.

I was brought on to this project following the project director’s exit from Creative. Taking over as the new lead, I carried the project through wireframe editing, interface design, back-end development, and pre-launch—combining the launch of a product and a client’s new website in one project.

Special Contributions:

Community interior wireframe - hover/touch to see final design
Re-Working Wireframes in Design

Bridging An Information Gap

Taking over someone else’s project is a challenge at the best of times—doubly so when the original project lead is your mentor. 

I was excited to take over the project from someone whose work I respected. Unfortunately, the wireframes I received needed work. 

Interactive elements seemed to be in unintuitive places, important labels were missing, and other strange oversights were scattered throughout the documents. I didn’t have the former lead’s notes to get insight into his decisions. So, while I typically would not deviate so far from approved wireframes, I decided it would be best for the client and the future of CoreHome to addresses these badly-needed changes.

I consulted with Creative’s development team to ensure they could plan appropriately and designed an interface substantively different from the plan. Though the improvements took time, the final product was better for it.

Building out a Comprehensive UI

A Design Document with an Eye Toward the Future

A main feature of CoreHome is its ease of deployment. It is a tool that allows Creative to deploy custom sites efficiently, with as little work for our team as possible. 

Since it was unlikely I would be executing those builds, I ensured that CoreHome’s main design document was built with nested style dependencies. This would allow future designers to make a handful of changes in the style guide which would cascade through the document, saving the entire project time. 

For both future designers and the development team, I implemented a colored spacing guide system, so grid spacing could be ascertained at a glance rather than painstakingly measured.

Leading & Coordinating with Junior Designer

Working Together Without Overrunning Each Other

In addition to creating the product’s first implementation, my team was also responsible for the client’s marketing site. I placed Creative’s junior designer, Blake Pertl, in charge of that responsibility—but he needed a place to start from.

I designed JC Jackson’s home page and an interior page in Elementor to give Blake styles to iterate upon. I also created a spreadsheet of basic styles for us both to work from so we could minimize inconsistencies between our two works.

This stylesheet approach, which I developed for the Deployed Resources build, evolved into a design system, made for Creative to use for future CoreHome builds.

Creative's First Official Design System

A System for Others to Build On

In my two and a half years at Creative, it was typically the case that one designer worked on an entire project and “owned” its future iterations. If I came onto a project that someone else had made, I had to guess at their styles and do my best to copy what I saw on the end product.

I knew that system wasn’t going to work if CoreHome was going to be a product we could roll out to a variety of clients quickly and easily. We needed a single, official source of “design truth” for future CoreHome projects.

With that in mind, I assembled a design system in Adobe XD to ensure the next builds would be easily put together going forward.

The ultimate goal was for the XD document—which housed both the final front-end interface and the design system—to serve an interactive demo for prospective CoreHome clients and also be a quick style and process reference for our team. However, my time at Creative ended before I could realize that ambition. The rules and system in place, though, will still help Creative’s current and future designers.

CoreHome's Design Principles

 Covers the guidelines of Creative’s design style for all CoreHome projects

  Provides details on our grid system, with examples of its usage

  Document styles used

Basic Styles

  Provided basic style elements: Color, patterns, borders and shadows

  Included CSS specifications for how elements should appear 

 Provided notes for implementation, such as instances a style gets used or particular Elementor quirks that impact execution of styles

Site Components: Basic

Provided interactive states in design system only to reduce clutter interface designs

 Created site elements that could be edited in one place and would cascade through the entire document

 Components increase in complexity through document

Site Components: Complex & Nested

  Included details on how the nested or complex component functions and how it is implemented.

 Styles and elements stack together to make more complex site components

  Colored guides help maintain consistent spacing through site iterations

Measuring Spacing and Layout Rules

In Elementor, spacing was a particular challenge because of the defaults the builder adds. There had also been consistent miscommunication about measuring spacing between design and development team. This section was particularly robust to attempt to fix those problems. 

 Provided comprehensive guide for how to measure spacing in Elementor, and common ways designers measure space

 Defined critical terms used to describe spacing areas throughout document.

  Noted common column widths, particularly those not placed in site builder

  Integrated responsive style spacing spreadsheet with spacing values

FINAL UX STEPS TO LAUNCH:

Launching CreativeMMS's First Product