Comey & Shepherd New Release

Comey & Shepherd New Release

comeyshepherd

Introducing Drive Time by Inrix on the latest release of the site.

We’re thrilled to announce the newest release of the Comey & Shepherd mobile site. Based in Cincinnati, Ohio, Comey & Shepherd have a history of topping the market in their region. For a mid-size brokerage, Comey & Shepherd is constantly trying to raise the bar by innovating new ways to create a more user friendly base for their clients. They wanted to add more personable and customized features to the latest release of their mobile presence, so here at Aumnia we helped them to construct that vision into a reality.

Innovation

With Comey & Shepherd, we wanted to focus on a design that really highlighted how innovative of a brokerage that Comey & Shepherd truly is. Over our time working with Comey & Shepherd, we have constantly been evolving their mobile site as they themselves change over time. Therefore, we added two incredible Screenshot_2015-09-15-12-19-08 (1)_framednew features to their latest launch that really help to take their mobile site to the next level.

Map Search

From wherever their clients may be, Aumnia integrated a map search feature into the latest release. Clients are now able to search properties in the immediate area they are in. Maybe they aren’t in the neighborhood they’re considering? Not a problem, they can simply drag and drop their pin to the area they would rather see properties in and the map will adjust and show them nearby properties to their pin in that area. The map is conveniently color coded to make distinguishing different properties easier for clients.

  • Red- The property is under contract
  • Green- This is a new property listing
  • Light Blue- This property currently has an open house
  • Navy- Regular listing, nothing special is happening with the property at this time

When you click on a listing, an info box appears with the price of the property listing and quick specs on how many beds and baths the property has. From there, clicking on the info takes you to the main listing page in which you can then use the next newest feature- DriveTime™.

DriveTime™

We’re most excited to announce a great new featured powered by INRIX, a data company that tracks traffic times- conveniently called DriveTime™. What does this mean for clients? When they go to the mobile site, they can now see what things like commute times would look like from the property listings they’re looking at to their place of employment. This helps clients find the homes in their desired area based on where they spend a lot of their time outside of the home. When in the DriveTime™ feature, clients can simply enter the address of their job, children’s school, their school, and then search for homes 10, 15, 20 minutes away depending on how long they wish their commute to be and when they usually arrive at these locations. Taking data by analyzing traffic times during the time the client wishes to be somewhere at, the system draws them an area in which they can search for properties in the right area for their needs. This not only helps the agents better understand their clients restraints when it comes to finding their dream home, but also helps the client find an agent who specializes in the area they wish to live. This feature also helps Comey & Shepherd reach prospective clients who may be relocating to the area and don’t know much about traffic and commute times in the area they’re moving too. We helped make Comey & Shepherd the first brokerage in Cincinnati to integrate this technology by Inrix into their mobile site.

Navigation & Interface

Screenshot_2015-09-15-12-18-41 (1)_framedThe new mobile site has a cleaner and easier to use navigation that can be accessed from anywhere in the application. Additionally, we’ve included an easier mode of contact for clients looking through the site to get in touch with an agent. As we have maintained a long standing partnership with Comey & Shepherd, we have continually provided updates to their interface, but this release is the largest overhaul we have done in terms of the design. We simplified, modernized, and overall create a much more user friendly experience for their clients. Comey & Shepherd love being innovative for their clients and we wanted to create a mobile site that reflected that.

It Doesn’t End Here

Comey & Shepherd continues to invest in standing out from their competitors and we’re committed to helping them achieve this differentiation. Based on the fact that sometimes their mobile site can garner up to 15,000 visits a month, only means that the site will continue to evolve as the clients and brokerage change.

 

Displaying data lists using Sencha Touch

In one of our more recent projects using Sencha Touch, we ran into some problems using the List element. We were trying to do something that may have been unconventional, but we wanted a specific user interface. We were placing a docked header and footer on the screen, then adding a list component that had a text disclaimer, a page footer, and a copyright notice which were each separate elements appended to the bottom.

The layout we wanted to achieve using a list with additional elements in the viewport

We attempted numerous methods of instantiating the list and the additional components, but we were not able to get them to display in the order we wanted. The list would not show up, or when we got the list to display, the disclaimer, copyright notice, and page footer would either show up in the middle of the displayed list, or they would appeared jumbled and in the wrong order.
The code sample for the structure of the page is:

Ext.define("MyApp.view.ListContainer", {
    extend: 'Ext.Container',
    xtype:'listings',
    requires: [
        'MyApp.view.Header',
        'MyApp.view.Footer',
        'MyApp.view.TableView',
        'MyApp.view.Disclaimer'
    ],

    config: {
        // we want layout to be of type vbox
        layout: {type:'vbox', pack:'start'},  
        cls:'page',
        scrollable:true, 
        items:[
            // header logo	
            {xtype: 'header', docked:'top'},
            // titlebar that tells what records are being displayed
            {xtype:'titlebar', docked:'top', 
                title:'Loading Results', 
            }, // end of titlebar

            // Load list as a list
            {xtype: 'listView'},
            // Instantiate disclaimer after list
            {xtype: 'disclaimer', cls: 'myAppDisclaimer'},
            // Instantiate slogan and logo footer
            {xtype: 'footerPage',},
            // Instantiate footer with copyright notices
            {xtype: 'copyright',},
            // Footer with back button, contact us button and home button
            {xtype:'footer', docked: 'bottom'},
        ]} // end config and its items
});

Here is the List extended to use our store and itemTpl:

Ext.define("MyApp.view.MyList", {
    extend: 'Ext.dataview.List',
    xtype:'listView',
    requires: [
	    'MyApp.store.MyStore',
	],

    config: {
	id: 'myList',
	store: 'MyStore',
	cls: 'myList',
	// parent is scrollable
	scrollable:false,

	itemTpl: new Ext.XTemplate(
		'<img src="{thumbnail}" />',
		'<h1>{FullStreetAddress}</h1>' ,
		'<p>{City}, {State}</p>' 
	}) // end XTemplate
},  // end config
});

Finally, we decided to create the list on our own using a container and building a table of items, and then appending the disclaimer, page footer and copyright notice. It was a bit of a hack and not as simple and elegant as using the List element, but it allowed us to achieve the desired effect.  The following code example creates the xtype for the tableView. We replaced {xtype:listView} with {xtype:tableView} in the ListContainer view defined in  the above code example.

Ext.define("MyApp.view.MyTable", {
    // Extend container, not dataview, as we to setup a vbox
    // for the listings, and then put the listings inside the vbox
    // using the xtype dataview
    extend: 'Ext.Container',
    xtype:'tableView',
    requires: [
	       'MyApp.store.MyStore',
	],

    config: {
	layout: 'vbox',
	cls: 'myview',
	scrollable:false,

	// Use items here to instantiate table with divs using xtype dataview
	items: [
		{
		id: 'myTable',
		xtype: 'dataview',
 		scrollable: false,
		store: 'myStore',
            		emptyText: 'Please return to the Home page and start a new search.',
		cls: 'myTable',
            		itemSelector: 'div.tableRow',
		itemTpl: new Ext.XTemplate(
			'<div class="tableRow">' +
			//  thumbnail image
			'<div class="tableThumbnail"><img src="{thumbnail}" /> </div>' +
			//  details
			'<div class="tableSummary">' +
			'<h1>{FullStreetAddress}</h1>' +
			'<p>{City}, {State}</p>' +
			'</div>' +
 			'</div>'  //close outer div

		) // end XTemplate
		} //end xtype dataview
	] //end items
   },  // end config
});

So what did we learn?

  • The List element in Sencha Touch is useful for displaying list of data from a store if you do not have any other elements, or just one, that you want to display in the same container as the list. (One item can be displayed at the bottom of the list using the scrolldock command, but trying to scrolldock multiple elements does not allow for control of the order of display.)
  • Building a list using a generic dataview is better and gives you more layout flexibility if you want to display additional items in the same container as the list.