Mobile Makes You Focus

Back in September, we unveiled our desktop site.  It allows homeowners to learn more about home pros and their projects.  We had been working on the desktop for quite a bit of time.  There was a variety of homeowner (our consumer segment) needs that we were looking to fulfill.  We had months of sprints.  Over that time, we created multiple ways for the homeowner to engage the content.  For example:

Simple search for finding relevant home pros.

In October, we then released our mobile browser app (available through a browser at http://m.porch.com rather than an app you download onto your phone).  We had less than a month between shipping the desktop app and releasing our new mobile app.  When designing our mobile app, we couldn't just make our desktop site responsive.  Our desktop experience utilizes the landscape and high pixel nature of a desktop monitor to expose the multiple pathways in the experience.  Our desktop offers these options to the homeowner without being too crowded.  The situation on the phone is very different.  The screen is portrait.  And even if that screen is pixel dense, it is still very small.  So we had to prioritize the homeowner's use cases and focus on the top one.  That is home pro search.  Then the touch nature of the device has to be considered when during design, touch vs. keyboard/mouse.  And we had to make full use of the screen real estate without being crowded.  For us this meant being less photo-centric.  

Here's the search results page of our mobile app:

In the end, we created a completely new experience that is useful and clean.  Here are some of the best practices to think about when designing for mobile:

• Focus on your most important use case.
• When in doubt, remove it.
• Don't just refactor your desktop site.
• Keep it simple and clean.
• Don't have hyperlinks to near each other.
• Don't use 6 pt font just because devices have retina displays.  A clean 6pt display is still too small for most people to read.