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:
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 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?
A seemingly simple app didn’t turn out to be as simple to design.
Let’s start with pins.
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.
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.
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.”
This is where we are, and it’s just the beginning.
Become a WHA Pioneer and be the first to try the app