Here’s the home page of 360modern…

How does a finished home page come to fruition?

Brand, Value Proposition, and User Goals

I don’t want to discuss value proposition & brand (which I touched on here & here) in depth in this article. That said, prior to “getting started” building product, you’d certainly be extremely foolish to not have an extensive discussion among all stake holders — customers, clients, enthusiasts, etc. User goals (which could be a post by itself) need to be outlined so you know exactly WHO you’re building your product for, and what their needs, frustrations, and problems are.

If you want to boil this phase down to one thing — make sure you’re actually solving/addressing a real problem for a significant addressable target market.

Wireframing

From a product perspective, the starting point is a wireframe, in 360modern’s case, the following:

My wireframing software of choice is Balsamiq. It’s not critical to get the exact sizes of modules correct, or finalize exact links. What is important is the rough proportions, primary value propositions, blocks of text (since you need to design around them) and calls to action.

Design

You hand off a wireframe to a designer, whose job it is to turn that ugly wireframe into a beautiful piece of art.

Here’s the final home page design mock up…

If you compare the mockup to the wireframe — you’ll notice a few small differences. We removed the “who is 360modern” section, and separated the “community of modernists” section from the “we currently serve” section.

Development

Once you have a final mock up, you need to implement it. That requires software development — which means engineers.

Development is generally split into “front end” and “back end”. The front end is everything related to the presentation layer. The back end is the data access layer (aka where sh*t gets hairy and can/does go wrong).

There’s a couple options for sourcing engineers for custom development. You can recruit them directly and freelance for you (cheaper, but requires a product manager). That’s what we did in this case. Or, you can hire a development firm (more expensive, but they handle all product coordination and are on the hook to ensure resources are available to execute in a timely fashion).

360modern has been operating in Seattle for more than a decade. Previously, the website was built entirely inside WordPress. The new site is a Ruby on Rails back end, with a React.js front end.

Which framework should you use for your site? That’s honestly a difficult question that I’ll tackle with a post of its own in the future, but there are a few key considerations. Obviously cost is part of the equation. Talent availability is another. Strength of the developer community and ecosystem is yet another, which includes availability of open source and paid modules (in rails they are called “gems”, in the world of wordpress they are referred to as “plugins”) — and ease of finding people to help fix/modify/iterate on what’s available it that specific framework.

MLS Data

If you’re talking about an agent/broker website — likely means you’ll need MLS data. I’m not going to go into that can of worms in this post, but just know it’s a pain in the butt and will likely take some time. The complexity expands considerably if you’re integrating data from multiple MLS’.

Go-Live

Once you’re confident your development environment is ready go — ship it! Shipping it means changing your DNS server settings, worrying about 301 re-directs (if you’re changing platforms and/or URL structures), and ensuring nothing else goes wrong.

Iterate

The main images behind the value proposition and search modal were originally a slideshow displaying our featured listings — but we swapped the slideshow out for static images to give us additional brand quality control (on the home page, our Seattle modern homes page, and Portland modern homes page). Those of you who have dealt with MLS data, know images are not high resolution and sizing varies — both of which make designing around them challenging, particularly when dealing with multiple screen sizes.

We have multiple other changes in the works, which I can touch on after they are implemented. There’s no end to iterating…

Questions? Comments? Leave them in the comments, or shoot me an email.

PS: I wrote about the 10 steps to a custom website all the way back in 2012 when operating as ESM Exec Designs — and most (aka all) of that still applies today.

[Disclosure: I run product for 360modern]