Some lessons from building consumer apps.4
Atlas Statue at The Rockefeller Centre. The orbits are the principles under which the product can roam. Image: Google
I’ve been building internet products for close to 5 years now. The last 4 were spent building consumer apps. I’ve usually worked in small, nimble teams that have move fast. A beautiful article by Steve Sinofsky — here’s a link https://medium.learningbyshipping.com/frictionless-design-choices-fea3b40f8588 got me thinking about my approach to problem solving.
My general approach to problem solving consists of 3 steps(figuring out if it’s an actual problem worth solving is step 0 :))
1. Define the problem
2. Look at possible approaches to solving the problem
3. Iterate on approaches till one emerges, sketch it out quickly & fill the pieces of the puzzle that are missing.
A common set of principles helps get all stakeholders/team members on the same page and act as a guiding light when making tricky design/product decisions.
What are the principles that are most important?
1. It had to be simple
2. It had to be a universal pattern
3. It had to fit well within the existing design
One of my great design inspirations is the Instagram product. I’m just awed by how well new features merge with the existing product to make the overall product better. They’ve launched stories, live stories, creator formats for live, stories, boomerang and now have added a way to showcase your top stories on your profile. They just seem to find the perfect place for each of these features. And all of these features have made Instagram better as a whole.
IT HAS TO BE SIMPLE
In our daily lives, we make a whole bunch of decisions. No one wants to add to that cognitive load. The first part of simplicity is minimalism. Keeping only the essential data, no. of layers in design or number of options. The 2nd part of simplicity is a context. What’s the optimal choice in the current context? Let me explain with an example.
Example of decisions -> While we were designing the #ATMwithCash feature, we faced a question — how do we show the different atms on a map?
1. Show the color coded ATMS on the map2. Show a list of all ATMs near you
Option B was what Google maps did. When you search on Google Maps ‘restaurants near me’ it gives you a list of places ordered typically by the distance with a bunch of other attributes.
Option A just showed the different atms near you with a different color coding. When you selected a particular place the bottom bar would display the details.
Option A. Since the name wasn’t available only the address is shown.
Option B: Google Maps
Each ATM has 3 different attributes — the name & address, the status(denoted by the color(green, yellow or grey)), the last active and the queue length. We later added the availability of 500, 1k, 2k notes also. Out of these attributes the most important was the name and the status. The last active and queue length were properties of the status.
The typical thought process for a user went like — is there something near me->ah no green one-> is there a yellow one-> yeah seems like it was active about an hr ago-> let’s go visit.
When stuck with a decision, we went with option B following the dictum — keep it simple silly & keep it contextual. Google maps had different place types — atms, restaurants, hospitals. We had only one. Each place has a whole range of attributes — the name & address, images of places, ….<add-different-attributes->, we didn’t have so many attributes. Also the distance and location of the atm was a crucial factor in determining if it was worth a visit — that workflow was just simpler on a map. So we went ahead with the map. In Google’s case it isn’t as simple — since distance isn’t the only factor in choosing a restaurant, you might be interested in the rating, the cuisine etc. And it was the right decision in hindsight.
The other best example for simplicity is Medium. Before Medium came along anyone creating a new blogging platform would have thought that the ability to customize the theme, the font, media views were essential features. And yet Medium has none of them.
A couple of days ago i wrote about why WhatsApp has been so successful — https://growthbug.com/why-whatsapp-is-right-64ad28c9d0b7 — Simplicity.
2. IT HAS TO BE A UNIVERSAL/NATIVE PATTERN
Some designers will revolt at this saying it restricts creativity. I believe it gives a structure to the design. It makes it more ‘usable’ on the platform.
Think about what would happen when someone who’s only ever used Windows is given a Linux system. That person is confused. Right now a person using Facebook, Whatsapp and UC Browser is similar to a person using Windows — their navigation, UI elements are all based on these apps. A system similar is the best — you let the user focus on the value prop instead of navigation. This rule can be broken sometimes when the only value add can be a change in navigation/design or for smaller interaction/UI elements.
3. IT HAS TO FIT IN WITH THE EXISTING PRODUCT
This rings true for feature prioritization and design. How does the new piece fit within the existing design? Designing to accommodate the future version of the product is a very hard thing to do.
Consider Snapchat. It started out as a way to share images with one another that would disappear. Cool — one only had chat so that took much of the space. Then came stories and they found a cosy corner space in the right interaction. And suddenly there were stories from publications and they got some space down below. But we need a way to add friends too! Oh and show you stories from around you — we put that in search — well, because we didn’t know where to send it. And now we have a mess.
Thus a new design had to merge with the existing one — that’s one of the preconditions for designing well. One of the hacks is to have a place to add the odd actions — maybe the profile page or a low priority nav menu.
Some of my other favorites:
- Focus on the copy! — the right words are critical to good design.
- The magic is in the motion — I can write an entire post on this. But motion is essential. It conveys change, helps grab attention, convey hierarchy among other things.
- Accepting failure — we get it wrong once in a while. It’s important to let a bad decision die.
- Take a stand — too often there’s a tempting to go with the middle route — it’s easy to get people to agree to, it feels like the right fit of good & bad. But it’s important to take a bet.
- Closing the loop — The best features work in loops — as a feedback system. You rate a restaurant, we give you more restaurants you’ll like. More incentive to rate restaurants!
- Notifications are your friend — We love that red notification dot.
These are just the top ones. I’ll try to follow up with more specific examples of product and design choices.
If you liked my article, please hit the clap button multiple times.
At Comic Con, 2 years ago! Hello 👋