David Klein
Trullo cover image

Trullo

We set out to create the best place to share your opinions on movies, books, and products.

years
2014 — 2015
position
Head of Design
project
iOS App
manage
4 designers

We have been fortunate to work with Dave on numerous occasions and benefited from his energy that pulls teams together to get things done. His enthusiasm, charm and humor inspires others to get in the game and bring out their best. Dave is efficient, timely and continually moving forward and we like that.

—eric spillman, owner sevenfold creative

Background
We’re always so excited to discuss our favorite movies, books, and products with friends. But there’s a problem: Current social networks cater to posting photos, status updates, and links to a broad audience. We built a place for sharing opinions, and chatting about your favorite things.


Prototype
As the sole designer it was my responsibility to work with the founder and engineer to transform the prototype into a product. It began as a partially responsive web application used primilary to test the core concepts with friends and family. A user could rate and review things, gather purchases from email history, and comment on friends’ activity. It’s interesting to note that the newly-launched version of Trullo maintains these core features.

You’ll notice a theme of movies, books, and products throughout the Trullo story, but in the screenshot below there are several additional categories including restaurants and hotels. After taking a close look at the data and discussing what we’re personally most excited to review and chat about, we made a decision to focus on the three cateogries mentioned above. Honestly, when we weren't designing or coding, we’re probably discussing an upcoming movie, a childhood book, or a fun new gadget.

Trullo prototype

The navigation bar was actually blue until you entered debug mode. Only special people saw that.

Building and testing a working prototype is invaluable. It doesn’t have to be beautiful, fast, or pixel-perfect. The goal is to learn.

Rating
We began with three levels for rating a movie, book, or product:

  1. No good
  2. Like
  3. Love

We hypothesized that three levels (rather than four or five) would be much easier to comprehend, and make the review process quicker. As for the wording we wanted users to convey a feeling and build a story over something more generic like three out of five stars. That’s how we chose Love as the highest option. For people who want to express a subtle approval for an item on Trullo, we chose Like as the middle option. Lastly, as an attempt for differentiation, we included Dislike. Broadcasting that you dislike something that a friend loves is a great way to start a conversation.

After talking to early users, we learned that using only three levels was actually constrictive! We failed to notice that this set of words didn’t include a middle “hey it’s just OK” option. The Like middle option still implied that the user actually enjoyed the item. We also considered four levels, but that falls into the same situation: the user is forced to like or dislike every single item. These tests led us back to a five-level rating system with hearts that fill up to indicate how much you love or hate an item.

Trullo hearts drawing

An early drawing of Trullo’s rating hearts by Yuechi Li, a design intern

Trullo hearts

The final version of Trullo’s rating hearts

The corresponding words we settled on were:

  1. Hate
  2. Dislike
  3. OK
  4. Like
  5. Love

The challenge was to find words that work as statements for reviews to be easily browsed. Instead of using “Alison rated Trainwreck with three stars” or “Alison reviewed Trainwreck as loved it,” we chose a more simple structure:

Internally, using "OK’d" was a contentious issue because of its colloquial sound. We were delighted to see test users consistently understand its meaning.

Reviewing
The web prototype allowed us to design and test a review flow that caters to users who are either excited about writing complete reviews, or just want to express a quick Dislike or Like. Originally, after clicking on a button labeled “Me too” to indicate that I also watched this movie, read this book, or purchased this product, a popup would appear with rating buttons and an optional text field.

Trullo rate popup

We quickly discovered that a strong minority of users have no interest in writing reviews; only collecting for their profiles. To address and satisfy this feedback, a “Don’t show again” option was added.

Trullo rate popup

Users who enjoy writing reviews felt this popup was overwhelming. They didn’t want to be blocked from browsing the feed by a complicated, multi-step popup. First the user must select a rating option (No good, Liked it, Loved it), and then click Rate. The feedback was clear: the rating flow had to be smoother. This eventually led to what we refer to as the “Toaster,” and it’s explained in detail below.


Take a step back

While iterating on the web prototype, I spent many hours thinking about what was next. What do we want Trullo to be? Perhaps a way to show off what you’ve watched, read, and purchased. Maybe a way to collect and visualize your purchases similar to Delicious Library. Maybe a chat app? A discovery app? It was crucial to spend ample time crafting moodboards, drawing sketches, filling whiteboards, and, most importantly, having conversations.

Trullo moodboards

Many doors and walls at the Homebrew HQ are painted orange. It happened. Let’s move on.

Talking (and more importantly listening) is by far my favorite part of the design process. It’s an opportunity to dig deep. Have coffee with people. Ask about their behaviors. Take a look at what they post on various social networks, see how their friends respond, and then ask questions. The goal is to pick out adjectives. Something about an app frustrates you? Tell me more! We want to understand how our potential users feel about the world around them.

Wireframes

After experimenting with Cordova as a way to deploy the responsive web app on both iOS and Android phones, it was time to focus our resources on building one great app.

The team discovered that there’s a balance between crude and pretty when making effective wireframes. Keep them crude, but not so crude that you can’t ascertain the purpose of the screen. Keep them pretty, but not so pretty that one pays attention to the aesthetics.

At Trullo, when designing a new flow, we’re constantly printing out wireframes, and posting them using colorful magnetic push pins. This allows us to agree on and build new features with minimal miscommunication. We know where each button on each screen leads before any code is written.

Trullo wireframes

We love discussing flows by posting mockups on the whiteboard. For a while these included photos of Michael Keaton’s Birdman until I realiezd the movie isn’t that great.

Testing

A significant part of the culture at Trullo is usability testing. We often bring in users to test flows using InVision or native prototypes on the iPhone. Fortunately, Google Ventures has written extensively about user testing. Our process has some overlap:

  1. Use a MacBook to record the user’s facial expressions. A MacBook's tiny iSight camera is less intimidating than a real video camera.
  2. Set up a Ziggi camera above the phone to record the user’s taps.
  3. Lower your chair height to avoid physically intimidating the user.
  4. Offer water, coffee, or tea.
  5. Keep tissue paper close by.
  6. Offer a restroom break before and after the test.
  7. Maintain a light-hearted and upbeat conversation. This takes practice.
  8. Maintain a light-hearted and upbeat conversation. This takes practice.
  9. Most importantly, have a clear test and goals.

Occasionally we became overzelaous with testing, and learned that bringing in someone to test a new flow or prototype is not particularly valuable if you aren’t testing something specific. General feedback is great, but it does not require a formal process. Also, don’t test too much! We found that you can learn a significant amount after talking to only a few people. It’s important to ascertain actionable changes from those experiments, apply them to your flow, and test again.

Brand

Stuph was originally both the name of the company and app. Some people liked it; some didn’t. Many didn’t know how to properly prounounce it. One test user said her “stuff was overwhelming.” She continued, “I want to get rid of stuff! Not talk about it.” We turned to an experienced branding agency named Sevenfold for help.

Trullo mark

The Trullo mark is influenced by real trulli in Alberobello, Italy.

We spent weeks iterating on colors, names, logotypes, and marks. The result was Trullo. Fortunately, we had already settled on what we now refer to as “Trullo Salmon” for the primary color because of its playfulness, and it tested very well within our target audience.

Trullo mark

Let's get native
The Feed

The web prototype had only one column of content, similar to Facebook and Tumblr. Combining long reviews with lots of buttons made the feed feel overwhelming.

Trullo feed early

An early prototype after transitioning from the web application to an iOS app.

After seeing a friend review a movie that I’ve shared but not reviewed, I can:

  1. Review the movie myself
  2. Reveal the entire review
  3. Comment on the review
  4. Heart individual comments
  5. Heart the review
  6. View the full conversation

There are so many possibilities! We instead tested a simplified approach similar to Pinterest, and our test users loved it. It felt “familiar” and “fun.” The only thing the user can do is tap on the card.

Trullo feed

Browsing the feed allows you to focus on the images, avatars, ratings, and, if available, snippets of reviews.

Review flow

As we learned while testing the web prototype, the review flow must be quick, simple, and avoid leaving the user feeling blocked or forced into completing a task.

Many review apps use a full-screen interface with numerous options or controls. The Trullo review flow is just a few taps that take place in what we refer to as the “Toaster” since it springs into place from the bottom of the screen. Watch the video below.

Honestly I haven’t seen Inside Out yet.

  1. Tap “I watched it” and your followers know that you watched it. At this point you can close the Toaster and keep browsing.
  2. Tap a heart and your followers know that you liked or disliked it. Again, at this point you can close the Toaster and keep browsing.
  3. Tap the comment field to write some text. Even if you close the Toaster on this step, your friends will still know that you liked or disliked it. However, if you want to add some text and share to Facebook or Twitter, you can do so after tapping “POST.”

This flow allows a user to rapidly post that you simply watched movies, read books, or purchased products. If a user wants to add a rating it’s just a single tap on a heart. Users are only blocked by a full-screen interface after choosing to enter text.

Profile

A Trullo profile was the best way to represent your taste in movies, books, and products. Often after a friend starts using Trullo, I could browse their profile and learn some exciting new things. Conversations (and occasionally debates) ensued.

The Wishlist tab is demonstrated in the screenshot below. We believed that collecting your friends’ favorite things that are unfamiliar to you became a valuable source of entertainment and purchasing inspiration. After posting that I wanted to watch a certain movie, friends would often chime in with either “What are you waiting for?” or “Skip it!”

Trullo profile

I swear I’ll watch Yojimbo soon! I hear it’s the inspiration for all Western movies.


Website

We tested two completely different landing pages before releasing the app. The functional website was designed to educate potential users about what the app looks like and its features. Test users could ultimately explain the purpose of Trullo after viewing.

Trullo functional website

The emotive version of the website was designed to excite and inspire potential users. After showing it to several test users we learned that the photos distracted people from comprehending the screenshots and text. They felt confused, and could not confidently articulate Trullo’s purpose.

Trullo emotive website

Launch

The app went live on Thursday, September 17th, 2015, and we were thrilled with the response. Designing a product from the beginning and finally releasing it was quite the experience. We learned a tremendous amount about how to prototype, design, test, build, and release a product. Even though Trullo was ultimately removed from the App Store, I am tremendously proud of the team.

We learned some crucial things along the way: