It's all in the name: the REALTORS® Association of Edmonton oversees all agents in the city. They also educate people about buying homes, manage the MLS® real estate listing database, and advertise property listings in their print and online newspaper Real Estate Weekly.
Create an easy-to-use online hub where people can find homes and discover community in Edmonton.
In November 2011, we sat down with Jon Hall from the Edmonton Real Estate Board. Jon told us that when people start looking for homes, they do one of two things. Either they figure out which features they want and find a house with those features, or they find the community they want and start looking at listings in that area. The only problem was, all that information was scattered across the Internet in a lot of different formats.
Jon's idea was simple: he wanted to build a single source of community information and display all of that data in a consistent, easily comparable format. It would include each of the 155 communities in Edmonton that had a community league, and it would have enough room to expand outside the city limits into other communities.
Working with the REALTORS® Association, we came up with a 69-week schedule that took into account how long this website would take to build and how much it was going to cost. We gave them the plan and waited for a few months while they had top-secret meetings with their board of directors. Finally we got the go-ahead on January 1, 2013, and we got to work.
For reference, 69 weeks is how long it’d take you to:
The site needed a name that was relevant to and meant for Edmontonians. It also had to tell people that the product was a website, since people might not know what it was if they read about it in print. We finally settled on YEGisHome.ca.
It was important to us not to look like a faceless corporate identity. That’s why we chose a bright green and cool blue colour palette to keep the brand fun and colourful. Web design is always changing, so the clean, flat look may not be as trendy in a few years (we all saw how quickly drop shadows crashed and burned). But a simple user experience never goes out of style, and that’s what we focused on.
We used modular tiles to strike the right balance between usability and information density. We also built a reusable template system that made it easy to add new sections without having to rewrite any UI code or worry about breaking other areas of the site.
Our biggest focus was giving people the tools to get what they need out of the site. The filters and icons are already a pretty intuitive guide, but we also refined the content to direct people where they want to go instead of just bombarding them with information.
We also included related items on each place, listing, or event page. That way people can keep seeing relevant information that's useful to them in the right context.
We finessed this section to make sure it had all the tools and information people need to make informed decisions when they're looking for a home. One of the most important things people look for in a community is how it ranks compared with the rest of the city. Visitors can see that information at a glance in icon format, making it easy for them to compare neighbourhoods and decide which one is right for them.
For example, someone who's looking for a gym membership, an action-packed nightlife, and lots of apartments to choose from might like the Downtown area. But a family looking for a safe, quiet neighbourhood with nearby schools and parks would probably want somewhere like Gold Bar or Belle Rive.
Each community page has information that matters to the people who live there. Maybe they want to know if they need a car or if they can just walk or bus everywhere. Maybe they’re looking for a home or something to do in the area. Or maybe they just want to ask residents what it’s like to live there. Whatever information visitors are looking for, they can find it in a single area instead of having to visit a bunch of different sites.
Visitors can visually explore the neighbourhood without ever having to leave the comfort of their own home. And if they're just not feeling the community they're looking at, they can check out one of the related communities to see if that's more their speed.
On the main Homes page, we used icons to represent bedrooms, bathrooms, and square footage. The tile design includes a large photo of the home and just enough information to grab visitors' attention. If they're looking for a specific type of home, they can use the Homes filter and the Search Tool to look for the features they want.
Each listing has lots of features so visitors can find the information they care about.
- Listing REALTOR® and brokerage
- Photo gallery
- Map directions
- Community link and scores
- Walkability and transit scores
- Listing description
- Square footage
- Building type, style, and year built
- Landscaping and nearby amenities
- REALTOR® contact information
- Related homes
All these features make it easy for visitors to browse for hours. But just in case they don’t remember the homes they liked, we added a Favourites feature so visitors can easily come back later and pick up where they left off.
The REALTORS® Association wanted to help local businesses reach people who live in the same communities. Widespread online advertising can be expensive, not to mention hard to manage if you don't know how. But at the same time, REALTORS® didn't want to blanket the entire site with ads. If someone is looking at the Mayfield community page, that person should only see an ad for a local theatre or coffee shop—something that matters to them personally.
We came up with an advertising system that offers a certain number of slots per week for each community. Advertisers can buy one of the 10 available slots, giving their ad a 10 percent chance of showing up every time the page loads. The low number of ad slots means advertisers can get in front of a lot of site visitors for a comparatively low cost.
When someone sees an ad, we record that as an impression and give those metrics to advertisers so they can see how their campaign is doing. The ad network is a win-win-win situation: advertisers get lots of exposure, REALTORS® earns a little extra cash, and site visitors only see one targeted ad at a time.
Everything up to this point was just Phase 1 of the project. We launched REWedmonton.ca (which included the Communities section, the Homes section, and the ad network) on October 30, 2013. Jon dropped by to celebrate with a bottle of champagne and a box of Bliss donuts (there’s a reason he’s one of our favourite people ever).
But the job was only half-done. There were three new modules to add, as well as neat new features for the existing Communities and Homes modules. So as soon as we were finished stuffing our faces, we got to work on Phase 2: YEGisHome.ca.
With the Places module, visitors can explore Edmonton from the comfort of their own home. They can compare different businesses by location or services, and they can use that information to decide where to spend their money or their time. For example, if a visitor wants to find a school for their kids, the map will show them which schools are in the area and closest to home.
Once they've decided where to go, the visitor can get directions to the location. They can document their trip and add photos to the gallery for other visitors to see, especially if it's a tourist destination or a show at a theatre. If they really liked the location, they can recommend the place to friends and followers on social media. And if they really, really liked it, they can find a home in a nearby community.
There are lots of other sites out there, like Yelp and Urbanspoon, that give you information about a business or location. But YEGisHome.ca displays that information in context with the rest of the city, giving visitors relevant related content like nearby homes at the same time. So if you want to live within walking distance of West Edmonton Mall or just around the corner from your favourite indie coffee shop, this is the way to do it.
The Events module helps visitors search for events that interest them. All the information comes from various venue and event calendars throughout the city, and we set up an Events area in the back end of the site where people can create their own community events.
The individual event pages are simple and to the point. If a visitor is looking for somewhere to spend their evening, they can find out what an event is, when it's happening, and where it's being held without having to sort through large amounts of text. They can even get directions to the venue from anywhere in Edmonton, or tell their friends about the event on social media.
We built the news system as a way to aggregate content from around the city, but it has the potential to become something even bigger. We can hook it up to blogs and other local, national, and global news sources to give people the news they want as it's happening.
Visitors can use the filter categories to find news that interests them. A click on the news item reveals a quick summary of that story, and a link takes them over to the news source, where they'll find the rest of the story. If they want to talk about a current event or issue, they can log into the comments section with their Facebook account and share their opinions.
We changed up the branding on the site and made it so all links (including the current rewedmonton.com) redirected to the new URL, YEGisHome.ca. For a couple of weeks we ran the two systems in parallel. REALTORS® hadn't started promoting the site yet, so it was a good opportunity to go through the site, test and optimize everything, and make sure we had all the wrinkles ironed out.
We also spent a decent amount of time adding caching, speeding up processes and page load times, and getting the details just right with the responsive layout.
Responsive web design is a way of building sites so they resize to fit different devices. A responsive site automatically adjusts to fit whatever screen size it's being viewed on and still looks as it's supposed to, which is great news for mobile and tablet users.
We switched over to YEGisHome.ca on March 19, 2014 (which was the exact date we'd planned more than a year in advance; we're punctual like that). That was also the day we moved from our west end office to our new location in King Edward Park, so our web team was holed up in the boardroom while boxes were going out the door.
The next day, REALTORS® started running their media tour on city news channels. Their interview on the six o'clock news created a massive spike in traffic (which is always a nice problem to have). We fired up a few more servers to handle the increased load, and it's been more than enough to handle all the traffic.
We'll be keeping an eye out for more data sources we can add and more features we think visitors would love. YEGisHome.ca will be a tool that Edmontonians can use for a long time, and our job is making sure they can do exactly that.
In the first six weeks since launch, YEGisHome had:
- You can’t throw the kitchen sink at a project. For every feature you develop, you’ll leave a dozen on the cutting room floor.
- Think hard about the things people will actually use. Back in the design phase we had a section called Snapshots, which would show photos and videos from around the site. Then we realized nobody was ever going to click on that module, so we ended up integrating photo galleries into each page instead.
- Keeping everyone on the same page is by far the largest challenge in a project of this size. So little things like having your engineers and designers in the same room during the design phase results in huge wins later on in the project.
- It’s always a good idea to have a soft launch before you start promoting a high-traffic site. That way you can deal with any problems that pop up before traffic really starts flowing in.
But most importantly, when you have the right team, you can build some pretty great things.