Introducing the Surterre Properties mobile application

Surterre Properties logo

We are proud to announce the release of the Surterre Properties mobile application. Based in Newport Beach, CA, Surterre Properties is Orange County’s leading luxury real estate brokerage. Surterre strives to provide their clients the best of both worlds. On the one hand, they employ experienced, successful, locally based agents who are dedicated to delivering personalized client service and results. On the other hand, Surterre possesses the strategic vision, marketing acumen and global reach one would expect to find at a much larger company. We were engaged by their in-house marketing and design team to transform their mobile presence into an engaging, interactive and visually attractive experience that would represent their brand’s commitment to the highest levels of quality and service that their clients have come to expect from them.

Goals and Approach

Surterre places a heavy emphasis on branding, particularly the look, feel, and treatment of their brand elements. Their attention to detail is a competitive advantage and one of the things that makes them unique. Our challenge was to bring that same approach to the mobile application while at the same time providing a deeply engaging and interactive experience. It required us to work closely with them to define the user interface and overall user experience while giving them the flexibility to provide significant input into the process, particularly the visual design of the application.

Here were the goals we had for the project development:

  • Represent the Surterre Properties brand effectively
  • Create a deeply engaging experience for the end user
  • Use the mobile web to provide application availability across iOS and Android
  • Improve site usability and lead generation capability over their existing mobile solution
  • Incorporate gestures and other mobile design patterns into the user interface
  • Provide an architecture that allows expansion of site content over time
  • Make use of context as appropriate to improve the user experience

Partnering to represent the Surterre brand

Our first step in the development process was to review Surterre’s online presence to determine how they differentiate their services and what makes them unique. Real estate is still a local business with each region having its own characteristics that need to be represented in their marketing materials. Also, each brokerage further differentiates itself by offering services or features that are not available from other firms in the area. For example, Surterre Properties dedicates a section of their website to Best Buys, which is a carefully compiled collection of exceptionally valued properties in coastal Orange County communities. It was important that in addition to covering basic features such as property search, agent search, and contact points, that we were able to incorporate specialized features such as Best Buys.

After determining the key features of the site, we worked closely with their marketing and art department to let them incorporate their own visual elements, brand and styling. To make a long story short, we provided the expertise for the mobile UI and UX, and Surterre provided the visual identity to make it look and feel like a Surterre product. Our partnership allowed them to have full control over the visual styling to make sure the look was unique to Surterre and presented the brand properly, especially since a mobile device is often the first interaction a client has with the company. A poor experience there could have a significant impact on the user’s overall perception of the brand.

Surterre Mobile Application Home Page

We went through a number of iterations to evolve the site from the first mock-up that we developed, which provided the foundation for the key features and flow of the application. Then we had them apply their brand elements on top of the foundation. Like building a house, we provided the blueprints for the site, framed it and applied the drywall. Surterre provided the interior design and added the soft touches like paint colors, furniture and the odds-and-ends that made the site their own.

The end result is a mobile application that incorporates a significant amount of visual imagery, which is an important part of the Surterre brand and reflects their commitment to taking care of the environment. As a certified Ecobroker®, they operate with sustainability in mind and donate a portion of their profits to local environmental organizations to preserve the beautiful environment along the Orange County coastline.

Key features of the application

After evaluating their existing online presence, there were a couple key features that we wanted to preserve in the mobile application. We also wanted to make sure that we included other features that have become important pieces for all of our projects. Here is a short overview of the key features.

  1. Best Buys (see right)
    Surterre Properties Best Buys

    Best Buys mobile page

    As mentioned above, Best Buys is a unique service that Surterre provides. We made sure that it is included as a dedicated page that is accessible within the property search section as well as from the main application navigation via the slide out menu. Users also have the ability to sign-up for Best Buy notifications through the application without having to go to the desktop site.

  2. Open Houses
    Surterre puts a significant amount of effort into open houses. The application has a dedicated open house page that is accessible from the home page, through the property search navigation, and through the main application navigation. The open houses are presented in a unique format and can be filtered quickly by city and day.
  3. Direct Linking
    We provided deep linking into the application via the desktop URL structure. It permits Surterre agents and marketing staff to share property links or agent profiles via email and social media. When the user accesses the link, they are directed to the proper view whether they are on a mobile device or desktop/laptop computer. Even dedicated pages of the mobile application, like open houses, can be linked to directly. You can try it by clicking on the following link on a mobile device, http://www.surterreproperties.com/best-buys.php, to see a mobile view of the Surterre Properties Best Buys (or you can read the QR code below with your phone).
    Best Buys QR code
  4. Mobile web application with a native user interface
    Users can access the application using the browser on either an iOS or Android device and get a native experience. We don’t compromise the mobile experience that users have come to expect on the phones just because they access the site over the internet. I feel this is one place where responsive design comes up short, especially in real estate, but I digress. This is a much bigger topic for a different time.

Incorporating mobile design patterns and functionality

Our design of the application also incorporate many mobile specific features and design patterns. Here’s a sampling of some of the features that we included in the Surterre mobile application.

  1. Location
    Location is such an important piece of real estate, so it is only natural to include it in the mobile application. We use location to aid in property searches and to help users find open houses.
  2. Native application integration
    Surterre Properties Slide Out Menu

    Slide out menu for app navigation

    The phone, after all, is a contact device. We make use of the native dialer and email applications so the user can contact Surterre or an agent directly from the application. We also include access to native applications such as maps so users can get directions to properties or Surterre offices with the click of a button.

  3. Gestures and animations
    We’ve included the ability for users to activate features with touch events and gestures, such as slide to access the site navigation menu or to advance through property photos and/or details. We also use animations on page transitions to give users more of a native feel when using the application over the mobile web.
  4. Slide out menu navigation (see right)
    Providing a slide out menu has become more or less of a standard for navigating through a mobile app. The Surterre mobile application has one which allows the user to quickly move from one page to another within the application, and it is accessible from any page in the application. Plus, it provides the ability to expand the application’s content over time.
  5. Context
    In addition to location, we are also using other information provided by the device to aid in property and open house searches. Context is a critical piece of mobile design, and one we plan to use more in future revisions.

Early results

We are still in “pre-launch” mode, but the early results have been very positive. We are seeing strong usage numbers, and engagement statistics such as bounce rate, pages/visit, and time on site are well ahead of the numbers from their previous mobile solution. Surterre Properties is also reporting a dramatic increase in the number of leads being generated. The initial numbers indicate an 8-10x improvement.

We’re working with Surterre on an official launch to the public and their agent team. We plan to work closely with them to present the application at office meetings, perform in-person training sessions for agents, provide Surterre-specific support materials, and create a Surterre-specific newsletter to highlight important features of the application and use cases. We have found that the agents are the most effective marketing and promotion vehicle for our client’s applications and that investing the effort pays off in increased usage and lead generation. It’s the most cost-effective way to generate the best return on the investment in the application development, and we expect it to further enhance the initial results we’ve experienced.

Future goals and direction

We plan to continue working closely with Surterre Properties to evolve and add features to the mobile application. Given how mobile usage continues to grow, we want to make sure their mobile presence keeps up with the growing expectations of their clients and provides them with a best-in-class mobile experience. Here are a few of the features that are in the planning stages:

  • Packaging for native distribution
    The native design of the application will allow us to package it for distribution in the application stores for iOS and Android. It will also allow us to incorporate additional features by accessing device properties that are not available through the browser.
  • Improved property searching
    We are working on mapping functionality so users can search for and view properties using a map interface. We’re also looking to add lifestyle search functionality such as commute time searches, which are important for the often congested Southern California freeways!
  • More context awareness
    Doing more context analysis by combining device information with the user’s site interaction to aid in property recommendations, open house searches, site navigation, and more.
  • Incorporation of video
    Video has become an important part of the real estate search experience, whether it is virtual tours, neighborhood overviews, or company information. We want to make sure that the video library that Surterre has developed is available on both desktop and mobile devices.

As we incorporate these and other features, our overall goal for the application will remain the same – to effectively represent Surterre Properties and their commitment to the highest levels of quality and service that their clients have come to expect from them.


Check out the Surterre Properties mobile application by opening the browser on your iPhone or Android device and going to http://www.surterreproperties.com. You will be “auto-magically” directed to the mobile application and can start searching for properties in Orange County, view their agent roster and individual agent profiles, learn more about Surterre Properties, or contact them for more information.

 

Announcing Village Properties’ new mobile property search application

Village Properties RealtorsWe are pleased to announce the release of the new Village Properties mobile property search application, which we launched at the end of this past October. Village Properties is the largest independent brokerage in Santa Barbara, CA, and they were the #1 Real Estate firm by sales volume in the area for 2012.

Goals and Approach

Village Properties mobile website home page comparison

Click image to enlarge

When we began the project with Village Properties earlier this year, they already had a dedicated mobile site that had a responsive website design feel to it. A navigation menu was presented across the top of the page, and the user navigated the site as they would a standard desktop site. The design was functional, but it did not take full advantage of many of the features and capabilities of today’s mobile devices such as location and touch events.

Our goal with the upgrade was to improve the user interface, create a more engaging design, and incorporate more mobile device functionality into the app. To achieve these goals, we migrated the interface toward a more “native” look-and-feel while maintaining a web-based approach, which we were able to do through our use of the Sencha Touch framework. We also preserved the Village Properties branding by using the same color schemes from their website in the mobile app and provided a consistent user experience for their clients by providing similar options for things like property searches.

Providing a “native” mobile web experience

We were able to achieve a more “native” look-and-feel by doing the following:

Village Properties Mobile Web Application Navigation

  • Flattening navigation of the app
    Keeping the page hierarchy and navigation of the application as flat as possible allowed us to utilize a tabbed structure for navigating the app, similar to a native design. Once the app is loaded, the user is presented with direct access to the four key sections of the app – Search Nearby Properties, Search All Properties, Agents, and Contact Village. Once in the app, these four areas are always accessible via a tab bar at the bottom of the screen, while tabs across the top allow for navigation within each section (see right). Deep navigation occurs only when the user is viewing property search results or individual property details.
  • Limiting server side interaction
    Due to the variability in the speed and quality of mobile connections, communication between a mobile device and the server can significantly impact and limit the performance of a web-based app. Therefore, we made it a point to limit the amount of interaction required between the mobile device and the server. After the initial load, the app only communicates with the server to request data, such as property listings and details. By limiting the interaction, the web-based app performs similar to a native app, particularly when switching back and forth between tabs, or sections.
  • Using touch events and gestures
    The app was designed from the ground app with touch in mind. Buttons are used throughout to make it visually clear where actions can be taken, gestures are implemented where appropriate (such as swiping through photos), and typing is kept to a minimum through the use of selection boxes and dropdowns.

Incorporating mobile functionality

We also took advantage of mobile-specific areas of functionality by including the following in the app:

Mapping integration in the Village Properties mobile app

Click image to enlarge

  • Location
    By utilizing the location capabilities of the mobile device, we included the option to search for properties by location. This feature allows the user to simply press a button from anywhere within the app to receive a list of properties that are located around them.
  • Text messaging capability
    In addition to standard contact functionality such as phone and email, we provide a method for people to connect with agents via text message through the app. Clients have the ability to use the method of communication they prefer and can communicate with agents or submit property inquiries via phone, email or text with the press of a button.
  • Access to phone applications
    Besides including access to obvious device applications such as the phone dialer and email application, we also provided access to other apps such as maps and driving directions. For example, when searching for a Village Properties office, we provide direct access to the mapping application which provides directions to the office from the user’s current location.

Results thus far

In the three weeks since we’ve launched the app, usage and engagement has improved over the previous design. Visits to the site over mobile devices have nearly doubled, bounce rates are much lower at ~35%, and time on the site is averaging about 5 minutes per visit. More importantly, large numbers of searches are being performed, property details pages are being viewed, and contact buttons are being used on both the agent directory and property details pages. One of the most surprising results is that property searches are being dominated by location, which is in contrast to the other real estate apps we’ve deployed where advanced searches dominate the search type.

Going forward

Mobile is moving fast, and so are the requirements for apps. We’re planning to work with Village Properties over the next 12-18 months on a number of feature enhancements and upgrades. We will also be keeping a close eye on the analytics and measuring the performance in support of their mission, which is “to continually ‘raise-the-bar’ of excellence in the Santa Barbara Real Estate industry.”

View our latest mobile web-based app on any iPhone and Android device by opening your web’s browser and going to http://villagesite.com. You will be automagically redirected to the mobile app. Once loaded, you can start searching properties in the Santa Barbara area, contact Village Properties or get in touch with one of their agents for assistance!

 

Reviewing the Sencha “HTML5 Is Ready” App Contest Winners

Sencha, the company behind the Sencha Touch framework for mobile development, just concluded their contest for the best HTML5 app using HTML5 and Sencha Touch. We’ve used Sencha Touch for a number of our projects, and as a proponent of the mobile web and fellow developer, I was interested in the results.

The winners were JDI by Simon BrunelWeathy by Boris Orduñez & Ariamnet López, and SnapsMate by Brett Hannah. You can read the full results over at the Sencha Blog by clicking here.

The contest was a great idea as it encouraged developers to push the envelop and demonstrate the capabilities of the mobile web. All three winners did a tremendous job developing a functional app in the two months they were allotted to complete their work. I also felt it was a great opportunity to review their work and discuss the pluses and minuses of each app. Following is my thoughts on each app, which is not a review of the app idea itself, but a review of the techniques, features and functionality of each.


JDI – a to-do list/task management app

JDILikes: The app is very responsive, scrolling is smooth, and animations are clean and well done. The registration process is simple, and the instructions are easy to read and understand. The overall look-and-feel of the app is very well done. I liked the color schemes, fonts, placement of elements and use of icons. I also felt animations were used in a way that enhanced the user experience without overdoing it.

Dislikes: The app does not work on the stock Android browser of my Galaxy Nexus, which is a big minus (I had to use the Chrome browser or an iPhone5). In addition, the app is not intuitive. You need to do a bit of reading to understand how it works as well as how to operate it. I would have also suggested they used the fullscreen mode available on iOS and pushed the browser URL bar off the screen. Finally, there was an issue on the iPhone where it was constantly loading even while in operation.


Weathy – an interactive weather app

WeathyLikes: The design does a good job tapping into location for the weather, and I really liked how they incorporated the auto complete for cities when using the search box.  The placement of edge menus is really cool (once you figure it out and get the hang of it), and the touching of the icons to switch between the day and night forecast makes for a great user experience. I also liked how they made use of cards in their design for each major piece of functionality and thought the color schemes made for a great look.

Dislikes: Unfortunately, the app is not very intuitive. It took me a quite a while to figure out how to add cities to the side menu, as well as delete them once added – some hints or instructions would be very useful. The mapping was also very laggy, and it was virtually impossible to zoom in and out on the iPhone. As with JDI, for some reason the browser URL bar was still visible on the iPhone, and the stock Android browser was a no-op, which is a huge negative in my opinion.


Snapsmate – a photo sharing wallSnapsmate

Likes: I really liked the idea and implementation behind Snapsmate. It has a very simple and clean interface that makes it easy and intuitive to use. I was impressed how the app was able to access the native Camera and file system as well as how you were able to manipulate photos after capture, particularly the rotation effects. Pushing photos backward or forward works great, and the app is very responsive given the graphics manipulation. I felt it was a good vehicle to demonstrate the capabilities of HTML5, and with a little work, I could easily see the use cases for such an app.

Dislikes: The app isn’t as polished as the others. For example, saving to the home screen did not make use of Apple touch icons. I also couldn’t figure out to navigate between walls if you created more than one.


Overall, there wasn’t one app that stood out above the others for me, but I would rank them as follows across these 3 key dimensions:

Form – best looking
1. JDI
2. Weathy
3. Snapsmate

Function – best use of HTML5 features
1. Snapsmate
2. Weathy
3. JDI

Idea – best app concept
1. Snapsmate
2. Weathy
3. JDI

If you’ve had a chance to look at the apps, what were you most favorite and least favorite aspects of each?

HTML5 is ready

fastbookThere was a link in my Google Reader this past Monday to an article by the folks at Sencha (via Chris Coyier at CSS-tricks) revealing a Facebook application they developed in HTML5 using their Sencha Touch toolkit. The article is a must read for anyone interested in mobile application development, whether native or web-based. Read it here.

Besides pointing out the mistakes in Facebook’s HTML5 app development, the article illustrates how a web-based app can achieve the same performance as a native app. We’ve confirmed their findings through our own testing on their fastbook app (fb.html5isready.com). The News Feed loads fast with no noticeable lag when scrolling. Touch events are smooth, and the UI feels just like a native application. In fact, you’d be hard pressed to tell you’re not in a native application.

As a strong proponent of mobile web applications, it confirms something I’ve known for quite some time – HTML5 is ready for primetime.

In a day and age where nearly all of the work on our computers is done through the browser, why do we insist on doing things differently on mobile devices?

Sure there are some apps that benefit from being native, just as with the desktop, but these should be the exception and not the rule. Look at it this way, I don’t download or purchase a Facebook app to access the service on my desktop, so why do I have to do that on mobile?

The conspiracy theorist in me would contend that the constant refrain of native apps being better than web apps is propaganda pushed by the platform owners (Apple, Google and Microsoft) in order to lock users into their mobile operating system. In other words, it’s not in the customers’ best interest for native apps to win out over the web. It’s in the best interest of the companies building the mobile platforms.

I applaud the folks at Sencha for investing in the effort to prove Facebook wrong. It shows that mobile web applications are not second class products when done right. Simply put, consumers should not have to settle for poor performance and a poor user experience when using the internet on their phone.

Fastbook is not an anomaly. Be prepared for the rise of the web-based mobile app in 2013.

Mobile Site Review: Real Estate Sites

One of the more mobile activities a person will undertake is to look at real estate. No matter how much research you do at a computer behind a desk, eventually, you always go to physically inspect the property and area you are interested in. I am sure that all of us can recollect those times when we have driven by a property wondering what the price is, or wondered what properties are for sale in the area you love. These days, the chances of getting information from a flyer box, if there even is one, is very slim, and without a computer how do I search the area? Here is where our mobile phone can come to the rescue to provide on the go search.

For this mobile site review, I took a look at six sites that a person might pull-up to get real estate information: Realtor.com, Zillow, Trulia, Yahoo! Real Estate, Coldwell Banker and Century 21. I wanted to see how easy the sites were to use, how quickly they loaded, how fast I could get information on properties and areas, and how the site looked in the mobile environment. I put the sites through a tough test using the BlackBerry Pearl, one of the more popular handsets on the market. The Pearl is very demanding given its small screen and rudimentary user interface.

Here is how the sites stacked up. I have rated them top to bottom in terms of overall performance.

1. Coldwell Banker (www.coldwellbanker.com)

Coldwell Banker does an excellent job with the interface on their mobilesite. It has autodetection for the mobile environment, and the user interface is very intuitive. The pages load very fast and makes performing searches a breeze. It was disappointed that the listings were limited primarily to Coldwell Banker (somewhat expected) and that the pictures for the listings do not display well. Given the performance of the other sites, these were minor issues.

2. Century 21 (www.century21.com)

Clearly, Century 21 and Coldwell Banker have decided to invest in making their websites mobile. Century 21 also employs auto detection for mobile and provides a streamlined interface for property searches. It is not as clean as Coldwell Banker, but still usable. They employ some color schemes that make the site hard to use, and like the Coldwell Banker site, it’s listings are pretty limited, displaying mostly Century 21 properties.

3. Zillow (www.zillow.com)

If you are looking to get property price estimates, then Zillow is the site to use. They feature their Zestimate tool on their mobile site, at the expense of property search. The Zestimate is very easy to use, just type in the address and the details come right up. I also like the fact you can toggle between their mobile site and actual website, a nice feature. In general, the site is hard to use and does not do search well. I wouldn’t recommend it for search, but at least they are making an attempt to give mobile users a way to access their site.

4. Yahoo! Real Estate (realestate.yahoo.com)

Well, the site works, but the first thing I noticed is that it is not optimized for mobile. Inherently, this makes the user interface very difficult to navigate and the page load speeds very slow. If you can get by that part, it offers a lot of the same search capabilities as the website, because it IS the website, just rendered on the phone. For my taste it’s too slow, but it gives reasonable results. If the site was optimized for the mobile environment, it would be a definite contender for the top spot.

5. Trulia (www.trulia.com)

Well, the search on Trulia works, so I can’t knock that part. On the other hand, the site is not optimized for mobile, so it is very difficult to navigate and do basic searches. Also, it is way too slow to be useful since it is loading way too much overhead from the website. It also needs to have javascript running, which is not enabled by default on the Pearl. Once you are able to navigate to the search, you get reasonable results and can access more details. Overall, not a great site for doing mobile real estate searches.

6. Realtor.com (www.realtor.com)

Well, I don’t even know where to begin. Even after enabling the javascript on the Pearl, the site still would not run saying javascript was not enabled. Therefore, I couldn’t get by that error message do try any searches. Clearly, the site is not optimized for mobile, and quite honestly, it is unusable.

Overall, I was less than impressed with mobile websites for real estate. I recognize that many of these same companies have also launched smartphone applications that are targeted for searching. However, not all people have a phone that supports applications, and not all people want to download applications to their mobile device. Given that searching for real estate always turns into a mobile experience at some point, I would have expected that these sites would have performed much beter in the mobile environment. The good news is that there is a lot of room for improvement, and I am sure that more sites will be become mobile friendly throughout the remainder of the year.

What has your mobile experience been searching real estate in the mobile environment? What features do you think would be most useful for search, and are there any sites (or apps) that you would recommend?