Design Matters—WHA App Design Process

While the idea and functionality of an app are critical, we’re at a time where design and form begin to weigh more heavily. The plethora of calculator and weather apps exist not because of their revolutionary idea, but for their beautiful aesthetic and ease of use. The audience and users want more than a functional product; they want something that’s appealing and smooth to navigate.
Cody focuses on making the app works like intended, and my job’s to make sure the app’s not an eyesore or troublesome to use.  For the WHA Pioneers that are now using the beta-app, it’s the fruit of months of nit-picking and pixel to pixel adjustments (while keeping the MVP mindset). Below is the journey of our app, thus far:

 


The Inception


design_matters_blog_post1

 

Yup, that’s where we started. Aside from a few sketches on paper, we mocked it up directly from Illustrator, where images and graphics are scalable without compromising their quality in case we needed modifications. Now looking back, those first day sketches almost made me throw up on myself. I suppose the brown was a reflection of how much coffee I drank that day.

 

But that was ok; font size, color, kerning, spacing didn’t matter at that point. The goal was to convey an idea and lay out the core functionality without wasting too much effort. We knew we want to make it easy for anyone to add a location and equally as easy for anyone to find a spot. The mock up did the job to express exactly that.

 


The Evolution


The idea of the app is straight forward and simple.
But as we get into the details, the list of things to design became overwhelming.
Map, search, filter, result. Sounds good?
Now about icons, settings, navigation, font sizes for different screens and sections, icons for different attributes? Then photos, add-photo, delete-photo, add location, notification when adding duplicate locations, locations with missing info, the different options for adding a locations, attributes and options for each attributes?

 

design_matters_blog_post4
A seemingly simple app didn’t turn out to be as simple to design.


Let’s start with pins.

design_matters_blog_post3

We wanted to keep the aesthetic minimal. So the pins began with the look on far left. Then we faced the issue of clustering when presented with multiple locations in close proximity; a patch of gray doesn’t look good. That led to “windows”, an open space on the pin for attributes and/or types of shop. The translucent shade adds more depth when they overlap. Finally, we refined the thickness and joints to the version on the far right.


This is “level 2”, the most essential info for express browsing. This appears when you click on the pin.

design_matters_blog_post2

Name, shop attributes, whether or not it’s open, and navigation are the key elements. Color coding the attribute icons alone wasn’t exactly intuitive. We reinforced the info by adding scales, then the colors started to make sense, too.


“Level 3” shows the detail info for each location: notes, reviews, free/paid access, etc.

design_matters_blog_post6

We jumped between full screen and cards for this section. Though, full screen allowed more real estate, it lacked originality and was difficult to browse between pages. Cards gave us more room for creativity and leveraged the idea of collecting cards, or swiping through cards when browsing location. The level gauge took multiple iterations; finding ways to convey information in a minimal (but not incomplete), clear, and direct fashion. The layout of level 3 should be scalable, easy, and not feeling constrained.


 

The design process can be painstakingly long, and often time the changes are so minor (yet it took great deal of effort and research) that no one notices. But as Dieter Rams stated, “Good design is unobtrusive.”

 

design_matters_blog_post5

This is where we are, and it’s just the beginning.

 

 


 Become a WHA Pioneer and be the first to try the app


 

Improvement is a continuous process.
The app is no where near done and it’s beyond me to decide the future aesthetic and usability of the app. And I’d like to invite you to be a part of this process by becoming a WHA Pioneer.
As a WHA Pioneer, you’ll be laying groundwork, reporting bugs and crashes, and most importantly, communicating with us and fellow pioneers to shape the future of WHA. If all the above sounds good and if you’re interested in trying what we’ve built, we’d love to have you as one of our pioneers.

Become A Pioneer

Bi-monthly recaps: Stories, Tips, Development updates.


6 Comments
  • facutopa

    2015-01-31 at 1:33 PM Reply

    Great job! Benson can I talk with you in some social network? I want make an app with Foursquare API and I will like ask some question about it.

  • Steve Chou

    2015-04-01 at 7:03 PM Reply

    Hey Benson, huge fan of your work! If you don’t mind me asking, what was the font you used for the homepage? It’s really beautiful.

  • Katie H

    2015-04-20 at 10:15 PM Reply

    Beautiful, love seeing the devleopment

Post a Comment

Cheers! We'll get back to you as soon as we can.
Fill out my online form.

The Good Stuff

New releases, insider news, and
chance to win free gear. No fluff,
we like to keep things simple, too.