Good Design (at HappyFeed)

An quick glance at our design philosophy and how it’s helped to shape and improve the user experience over the past years.

Matt Kandler
Building Happiness
6 min readApr 9, 2017

--

Recently redesigned “end of day” screen

Design has become a huge focus of the startup world particularly in the last 5 years. Many companies have had success raising money because of their “superior design” or “design thinking approach” to their product. Some of this might be overhyped, but design has become something that every company needs to seriously consider.

With all the noise and hype, what is the best way to define the design philosophy of your product?

For HappyFeed, we define the best UI as one that…

  1. Works the way you expect it to,
  2. Avoids distraction,
  3. Focuses on accomplishing a need for the user, and
  4. Make users happier.

1) Works the way you expect it to

If you just downloaded a gratitude journal from the App Store, it’s likely that you want to record some things that you are grateful for and maybe have a way to look over past entries.

How do we accomplish this?

The main view on HappyFeed is a page with a simple text form and 3 smiley faces (see image below). The placeholder text gives the user a short prompt, “What’s something that made today great?” You type out your first entry, hit submit, and the first smiley turns yellow. The user automatically understands the process and it was incredibly easy to build.

70% of users who create an account on HappyFeed complete their first day.

How do we test this?

Give your app to a friend (or ideally a member of your target audience) to try out, ideally on his or her phone. For example, I did this with the notifications page on HappyFeed. Originally there was a big button that toggled between green for ON and red for OFF. One day when testing with a friend, I noticed he thought the red button indicated that it was already ON and that tapping it would turn OFF notifications (which is not the case). I switched this button to a normal iOS UI switch and saw a very significant boost in engagement.

Old version (left) and improved version (right)

Other examples:

Snapchat (especially in the early days) did a fantastic job of doing exactly as you’d expect. When you opened the app, it opened to a camera view. Then you could take a photo and it would let you decide who to send it to. Simple and straightforward. Another great example is Medium. Whatever you type in a draft is displayed exactly the way it will be displayed when you publish.

Perfect.

2) Avoids distraction

Conversion rates are everything in apps and websites. If someone joins HappyFeed but never creates an account or uploads any moments, I’ve probably lost them forever.

How do we accomplish this?

It’s become popular to try and “wow” users with your signup flow. You’ll often see intricate animations and several steps designed to show you how the app works. Well, HappyFeed prides itself on simplicity so this would be a huge waste of time for us. Every second you spend signing up is an opportunity to drop out. Our signup process is just a single page with the 4 fields we need — name, email, password, and repeat password. Press enter and go straight to the homepage.

Approximately 77% of people who download HappyFeed for the first time successfully sign up for an account.

How do we test this?

Ask yourself if something is truly necessary. How does this fit into the flow? What would it be like without it? If it’s not adding much value, cut it. We originally asked users for a username on signup. We don’t ever expose this field, so we decided to eliminate the input and automatically generate it. In contrast, we’ve considered making users repeat their email to reduce the chance of typos. Since we only receive about one incorrect email message per month it’s not worth the tradeoff right now.

Other examples:

It’s a common problem that product owners want to build an X and Y application. Half of their users are looking for X and the other half of them are looking for Y. Especially when X and Y have little overlap, this is one of the worst forms of distraction. If possible, always try to set different entry points based on the user. Foursquare had this problem with users who wanted to “check in” and others who just wanted to search for venues. When they removed check-ins from their main app and moved it to a new app, Swarm, they were able to clarify and strengthen their core messaging.

3) Focuses on a user need

Google famously had the motto “don’t be evil” during the early days of their company. They wanted to make products that always kept the users’ best interest in mind. These ideals can help create a loyal user base, build trust, and maintain a strong company focus.

How do we accomplish this?

I’m a strong proponent of the “less is more” philosophy of design. When users bugged me for an “edit” button, I’d tell them that they could just delete and re-add an entry if they made a mistake. Three years later, I was convinced by a long-time HappyFeed user that this was indeed very important. After adding an option to edit moments and even swap out or add an image, I get a lot fewer complaints and most of those four-star reviews in the App Store are now fives.

22% of users who upload a moment eventually use the editing functionality

Edit moment user flow

How do we test this?

A phrase I generally like to apply to design decisions is, “don’t be Candy Crush.” By this I mean to ask: is this action providing value for the users, or is it simply a gimmick to bring them back tomorrow? I know that random pop ups can trigger dopamine but I don’t have smileys bursting on the screen every time you add a moment. Why? Because the value you get from HappyFeed should be from the act of gratitude, not bursts of color.

Don’t be Candy Crush

Other examples:

I have a lot of respect for the Foursquare product because it feels like it was made with the user in mind, more so than competitors (like Yelp). If I want to find a place to work for the day I can search for “coffeeshops with wifi” or if I want to find a good spot for a first date I can use the “good for dates” search. When I go somewhere, the app will notify me with a suggestion like, “try the 5-cheese mac n cheese.” This is based on reviews, not what Foursquare wants to sell me. All of these features marry simplicity and need in a way I really love.

4) Makes users happier

This guideline is much more specific to HappyFeed but illustrates an important point. Every company or team should have a specific goal about what they want to accomplish with product and that goal should absolutely be infused into every step of their design process.

For us, it’s simple. We just ask:

Will this make our users happier?

Design Overall

Someone once said that good design is invisible. This means that it isn’t just the splashes of color on the surface, but the little things that keep your product working efficiently, simply, and in a way that your customers understand and enjoy. It’s not ‘likes’ on Dribbble or long blog posts explaining your logo redesign. Good design makes an experience with a product blend in with the rest of your day.

“Good design is invisible”

Each week in Building Happiness I’ll be covering a new topic about what it’s like bootstrapping a consumer internet company, HappyFeed.

If you enjoyed this post, please click the 💚 button below. It’ll help others find it here on Medium and give me all the 😊 feelings.

--

--

Matt Kandler
Building Happiness

Builder of many internet things & founder of @happyfeed — an app to help you appreciate the little things. http://happyfeed.co