You are here: GeekEstate Blog » Design, Development » Behind the Scenes of Designing and Developing a Home Page

Behind the Scenes of Designing and Developing a Home Page

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]

About Drew Meyers

Founder of Geek Estate Blog / Geek Estate Labs. Zillow Alum. Travel addict & co-founder of Horizon. Social entrepreneurship & microfinance advocate. Fan of Red Hot Chili Peppers and Kiva.

This entry was posted in Design, Development and tagged , , , . Bookmark the permalink.
  • Nice “modern” website design, which is appropriate.

    I did not know what ModMail was until I clicked on it. Some might not know and not be as curious.

    Not sure if I like the photos here they are then they disappear, but once I click on photos I like the size and being able to use my keyboard to browse them. I still prefer the scroll to a click to view all photos, but that is just my preference, not sure what others want.

  • OK Cash Home Buyers

    Nice advice, very helpful

  • Jim Morrison

    Awesome post! It’s surely helpful. Thanks for all of the useful details.

  • Theresa Nicoletto

    Great Ideas!!! This has so much to learn. Modern Homes now adays are in demand in the market. I think so, Modern homes Is’nt just a modern marketing strategy it’s a lifestyle. Thanks for sharing

  • James River Realtor

    I totally agree that it’s really important to identify first who you’re building your product for. This is such a great read post, this will be very significant in my marketing strategy. Thanks a lot for posting! We just launched our website http://www.jamesriverrealtyva.com/ and would love to hear your feedback

    • It’s okay… what do you view as your core differentiator? What can a buyer or seller find out at your website, that they can’t get elsewhere?

2008 - 2017 GEEK ESTATE · ALL RIGHTS RESERVED - THEME BY Virtual Results
Hosted by Caffeine Interactive