The Situation

A few months ago, I moved down to Nashville from St. Louis and started looking for the perfect place to live. I was open to buying a house, but was mostly looking for an apartment to live in temporarily. I moved in with a buddy from college in a pretty central location, so that I could start looking for a place. I hadn't lived in Nashville for over 7 years and a lot of things had changed since I was gone. The neighborhoods and industrial areas that were once ridden with urban blight were now filled with staggeringly tall lofts and exorbitantly priced, but modestly sized, houses. Pockets of hipsterdom had popped up everywhere you turned and what once felt like a small town began to fill like a burgeoning city.

<div=>

The Need

I started off my search using Zillow. Zillow is absolutely amazing. If you haven't used it before, Zillow is a website that allows you to use a map based interface to search for home listings, apartment rentals, commercial real estate, and even upcoming foreclosures. You can set up alerts, draw on their maps with a pencil to save favorite areas for future searches, and you can even drill down through listings using some really helpful data like price, size, and schools districts. I quickly realized Nashville had an amazing problem: it was overflowing with great areas – 12th South, Belmont, East Nashville, Woodbine, The West End, Sylvan Park – not even the tip of the iceberg. Every corner of Nashville is experiencing a profound amount of residential and commercial growth which quickly made my search daunting.

hackpad.com_rrUqxOjEUg9_p.183196_1408639514799_nashville-neighborhoods

The problem I ran into was that I was fundamentally searching based on area and never any specific locations within an area. There was a disconnect between looking at the map of a neighborhood on my computer and the experience of driving around street to street to really feel out which spots I liked. I would get home, pull up Zillow, and have no context for which listing was the one on that beautiful street, or the one that was next to that really cool corner shop, or the house that had a good listing but was actually next to that ugly office park.

mapstreet-post-washave

The Idea

So now we reach the point in the housing search when I said, 'Self, I wish whenever I was at a spot I really loved or at a spot I really hated, I could just rate it right then and there and look at a map of that later. I wanted something that would be simple, easy to use, and give me a "heatmap" of the places I liked. Certainly overlaying this data onto Zillow would be amazing for my current situation, but even beyond that, I could use this data for Craigslist, Truila, Century21, or basically any real estate service that used Google or Bing Maps. Heck, I could use this data on plain vanilla Google Maps to plan out a scenic bike ride. I could use it with Yelp to pick the cafe on that street I apparently rated a 5 in East Nashville. I could even use it to plan out the perfect walk after a date!

The Design Process

After talking through the idea with my bosses, Ian and Dang, we decided that the project I codenamed Mapstreet was worth pursuing further and starting with a proof of concept. At this point there were a few other projects on the horizon that involved writing native iOS apps in Objective-C and possibly using Parse.com as a backend. It seemed like we could double up on the effort and, at the very least, have a nice learning exercise before taking on the client work. Even if the idea itself didn't pan out, going through the full life cycle of design / UX / development in a time-boxed manner is always a benefit. So, my bosses graciously gave me some work hours to learn Objective-C, learn how to use REST APIs, and design a quick and dirty brand package for the product.

I began with a quick mock-up of what I saw as the main functionality and then brainstormed the MVP from there. I began listing out all of the ridiculous features I could imagine on this Frankenstein-idea-having day and then slowly chipped it down to something manageable that I felt confident in developing. I wanted the first version of the app to have:

  • User authentication
  • A real time map of the user's current location
  • The ability to add ratings, edit existing ratings, and delete ratings from an interactive map
  • A fun, playful user interface
  • Decent performance
  • A Parse.com backend

I also realized that if this app was going to interact with the likes of Zillow, Truilla, as well as a number of other sites, my best integration bet would be a Google Chrome extension. Trying to duplicate the functionality of Zillow using their API on an imitation real estate site seemed both unfeasible as well as likely to short change the user out of the full experience of Zillow's amazing features.

mapstreet-post-easty

After a few hours of sketching out ideas and wireframes in my artisanal Moleskine, I moved on to nailing down the branding for the app. I wanted the overall brand to invoke a sense of travel - exploring a place street by street - simplicity, and fun. Images of Vespas, vintage European travel posters, walking the streets of New York, riding my bike through the neighborhood as a kid, and super minimal iOS apps were all bouncing around my Pinterest board.

mapstreet-post-logo

mapstreet-post-main

After a couple iterations, I was pleased with how the logo turned out. Once the majority of the development work was done, I circled back and put together a simple marketing website as well as an icon for the iOS app / Chrome Extension.

mapstreet-post-website

The Technologies

hackpad.com_rrUqxOjEUg9_p

I had never worked in Objective-C before starting this project and was somewhat intimidated by the prospect of learning it. I'm familiar enough with programming concepts at this point to not be completely in the woods during conversations with developers. Needless to say, the first time I opened X-Code I felt like I landed on another planet. There. were. so. many. square. brackets. Fortunately, the folks over at Treehouse do an absolutely amazing job at teaching complicated ideas to overwhelmed people like me. If you haven't used Treehouse before, do yourself a favor and take a few of their courses, they really are super well done. I spent two days learning about Objective-C in general and then followed along the building of a Snapchat clone using Parse.com's cloud data hosting, iOS dev kit, and user authentication provider. The tutorials were amazing and it ends up Parse.com is particularly awesome too.

hackpad.com_rrUq

Parse.com enabled someone only a few days into learning iOS development to build a native app with user authentication, data management, and session information. They have an insanely generous free tier within their pricing structure, which I most appreciatively signed up for. Similar to Treehouse, Parse has a really nice collection of tutorials for integrating their APIs with various platforms. Their services work well, their forums are really active, but most importantly, it is very well documented.

hackpad.com_rrUqxOjE

Another library that was incredibly helpful during the development process was Canvas. It comes as a CocoaPod (An Objective-C Package Manager) and enables the animation of ViewControllers with a pretty minimal amount of code and in some cases no code at all.

The Takeaways

• Timeboxing is something that needs to be practices. Learning how to finish projects can result as its own reward. Often ideas get lost somewhere between conception and execution and personally for me it is always closer to the former. The process felt similar to a hackathon – a finite amount of time, a fairly clear end goal, and my own determination – which certainly kept the interest level high. It is really motivating to ship something.

Treehouse, Parse.com, iOS, & Canvas are an amazing combination. If these technologies can take someone with my previous level of understanding and within a week, combined with a lot of late nights of Treehouse courses, enable me to create a fully functioning native iOS application with an accompanying Google Chrome extension, you can do it too. The barrier of entry to create amazing products is being lowered everyday. With some hard work, well documented APIs, and teachers like the great folks at Treehouse, our imaginations are truly becoming our limits.

Details are hard. The last 10% really does take 90% of the effort. We are currently rounding out the edges on the iOS app to get it to a beta testing stage and you don't realize how many different details go into making a flawless user experience.

mapstreet-post-kaleb

Mapstreet is currently under development but be sure to check out mapstreet.co for product launch information.

Resources

https://cocoapods.org/

https://parse.com/

https://teamtreehouse.com/

https://canvaspod.io/

Christopher Hilton is an INTJ currently living in Nashville, TN. He enjoys understanding the big picture, thinking outside of the box, and solving problems with lots of creativity. He is ardently committed to minimalism, using technology to serve real human beings, and refusing to accept the status quo. As Enliven's Web Designer / Developer, Christopher is focused on using design, photography, video, and an ever expanding arsenal of web technologies to make simple and beautiful products. He holds a degree in Audio Engineering from Belmont University in Nashville and a Masters of Divinity from Covenant Theological Seminary in St. Louis. Sir Christopher of Hiltonshire is passionate about Harry Potter, the Lord of the Rings, living in his 1973 Airstream, Texas, Canada, Taylor Swift, playing the bagpipes, Lórien, Macs, bourbon, Gryffindor House, the rain, camping, building fires, the Oxford Comma, and making things pretty.

Leave a Reply

Your email address will not be published. Required fields are marked *

clear formPost comment