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.

 

Another peek at the future of mobile

One of my favorite writers covering the mobile space, Kevin Tofel at Gigaom, discovered a new Chrome experiment last night that lets you explore J.R.R. Tolkein’s Middle-Earth fantasy kingdom in “A Journey Through Middle Earth“.

What’s so amazing about the app? As pointed out on the Chromium blog, it’s written using only HTML, CSS and JavaScript for viewing in a browser. You can check out the app by going to http://middle-earth.thehobbit.com using any device with the Chrome browser – desktop, laptop, tablet or phone. Below is a sneak peek at what you’ll see when you go there:

What I love about these “experiments” is that it shows the power of the web and what’s possible using web-based standards. The beauty is that the site works across platforms, meaning I can view the site on a desktop, tablet, and a mobile device and get the same experience.

We will undoubtedly continue to see significant advances in web technologies that continue to close the gap between web and native applications. If you check out the app above on your phone, you will notice some of the inherent limitations in web graphics (how they were done is explained here), but if you compare it to the quality of web graphics on a mobile device from a year ago, it’s come a long way.

I’m also convinced that these Google experiments are part of their ultimate goal of combining Android and Chrome under the Chrome OS. I think it’s just a matter of time before we see a phone (and tablet) with Chrome as its primary operating system. Android apps will run in an emulation environment within the OS, similar to what BlackBerry is doing in OS10. I view Google’s recent announcement of ART, a new Android runtime that was released with KitKat, as the underpinnings of this new emulation environment that will come to Chrome.

Google’s latest Chromium “experiment” is just another reason why we focus our efforts on developing for the mobile web. In my view, it creates superior and longer lasting value for our customers than developing for the closed ecosystems of iOS, Android, Windows Phone and others.

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!

 

Introducing Comey & Shepherd’s New and Improved Mobile Property Search Application

Comey & Shepherd Realtors - serving Greater Cincinnati and Northern KentuckyWe’re pleased to announce the release of the new and improved Comey & Shepherd mobile property search application. Comey & Shepherd serves the Greater Cincinnati and Northern Kentucky area and is recognized as a leading real estate firm both locally and nationally. We’ve been working with them since 2010 and were excited about the opportunity to work with them on the upgrade of their mobile property search application.

The Motivation
We built their previous mobile property search application using our first generation technology, which we developed and released into the market over 3 years ago. Needless to say, mobile technology has advanced significantly over that time, and the original application was beginning to show its age, both in looks and performance. Together with Comey & Shepherd, we felt it was time to give the application a facelift by improving the look-and-feel, user interface, branding, and performance of the application. We also wanted to put in place an architecture that would allow us to continually improve the application by incorporating new features and making adjustments to existing ones.

The Approach
As with the first generation application, we chose to stick with a web-based approach. A mobile web solution using HTML5 and CSS3 provides a user interface on par with a native application and allows us to address both iPhone and Android devices with one development. Plus, we can provide updates to the application in real-time, use standard analytics and measurement techniques, and leverage the marketing of the website to promote the mobile application.

Our goals for the upgraded design were to enhance the look of the site to match the current Comey & Shepherd branding, to provide a more engaging user experience by incorporating standard mobile UI elements such as loading indicators, animations, carousels and gesture interfaces, to put in place a modern architecture that would provide the ability to add more features to the application over time, and to incorporate deeper analytics so we could better measure the performance of the application to understand which features are working and, just as important, which ones were not.

For the implementation phase, we chose to use the Sencha Touch framework. It provided both the features and performance improvements we were looking to attain, and it is a solid development platform that lays the foundation for adding features to the application.

The New and Improved Look (and performance)

  1. The Home Page
    Below are images of the previous generation application (on the left) and the latest generation (on the right). You can see that more emphasis has been placed on the branding, with the Comey & Shepherd logo prominent across the top of the application and colors updated to better match their website. There is also a footer in the new version that is locked to the bottom of the screen to provide navigation through the application as well as a contact button that makes it easy for clients to reach Comey & Shepherd. We also moved the location search to the top of the page to make it easier to find (and use), as the old version had the location search below the fold.
    Comey & Shepherd home page comparison
  2. Larger Thumbnails and property identification
    The thumbnails for property search results have been enlarged so users can get a better view of the properties, and we’ve made it easier, for compliance purposes, to tell which properties are listed through Comey & Shepherd and which are provided through Broker Reciprocity. We also included the icon indicators from the Comey & Shepherd website that shows properties that are under contract (red ball), have an open house scheduled (blue ball), or have just come on the market (green ball).
    Comey & Shepherd listings page
  3. Navigation Improvements
    The pagination of the listings pages have been improved to allow for back and forth movement through listings results, and navigation between details pages has been added. Previously, users were not able to move back and forth between details pages without going back to the listings pages. There’s dedicated home and back buttons in the footer that keep track of the user’s navigation through the application, providing a native app-like experience (see screenshot above and below).
  4. The Details
    A photo carousel has been added to the details page so users can swipe through photos without leaving the page (as before), and the property details has been moved to a panel to keep the main details interface cleaner and easier to read. A second contact button was also added to the details inset so users can quickly get additional information on a property. If the property is listed by a Comey & Shepherd agent, they are connected directly to the agent, otherwise they are connected to  a Comey & Shepherd office for more information.
    Comey & Shepherd Details page
  5. Under the Hood
    Significant performance improvements have been made in the application by utilizing many of the local storage options available through HTML5. For example, property search results are stored locally to limit interactions with the server and to speed up moving from page to page. Likewise, once loaded, details pages are also stored locally for quicker movement between properties. Overall, the application is using the HTML5 Application Cache so the application files and static images are stored on the client’s phone, which makes for a much faster and more consistent loading time when users return to the site.

Analyzing the Results
The application has been live for just over two weeks, and we’ve already gathered quite a bit of data. In a short amount of time, some interesting trends are already developing:

  • Street searches trump Location searches
    Believe it or not, but only 25% of the searches performed are by location. In fact, the leading search is for properties by street name, which comprises almost 40% of the searches performed. We’ll be keeping a close eye on this statistic going forward, as I was completely caught off guard by this and figured the location/advanced search distribution would be flipped.
  • Navigating details pages is more important than navigating listings pages
    Another curious finding is that users tend to primarily navigate forward on listings pages and rarely move backward. The forward button to back button ratio on listings results pages is ~50-to-1. Details pages, on the other hand, have a much more even distribution of browsing back and forth.
  • Most Contact events happen from the Home Page
    Most users are utilizing the Contact Us button from the home page. My guess is that people are looking for quick information after loading the app (like an office or agent phone number) and go straight to the contact button to connect to Comey & Shepherd.
  • The Details Contact button gets good usage
    Adding a Contact button to the Details inset area was a late addition to the app, but it has turned out to be a good one. It doesn’t get as much usage as the Contact Us on the home page, but it isn’t far behind either.
  • People are interested in More Details
    Here’s another statistic that surprised me. I thought most people were not that interested in the detailed description of a property, since it’s mostly marketing speak. However, over 10% of the details pages viewed are checking out the property description, which is 4-5 times higher that I would have expected.
  • Details pages are important
    On average, users are viewing 4-5 property details pages per search completed. What does this mean? It means that the property details pages are important and that people are looking at them.

What’s Next
There is a lengthy list of features that we are planning to add to the application that includes mapping, property sharing, additional contact options (such as email and text), and more office and agent information. Before we start implementing however,  we’re going to let the site age a bit so we can gather more analytics. We will be looking for usage trends to identify any areas of improvement and to see what can be done to increase conversions through the application. The bottom line, mobile is still evolving and moving fast, so the application will be a work in progress.

The application is best viewed using an iPhone and Android powered mobile phone. Simply open your phone’s browser and go to http://www.comey.com to start your property search!

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?