Designing Trullo
We set out to create the best place to share your opinions on movies, books, and products.
Welcome to the Village
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 wanted a place for sharing opinions, and chatting about your favorite things.
After thousands of wireframes, hundreds of mockups, and dozens of user tests, we’re proud to release Trullo to the world.
To read more about the Trullo story check out what our Founder wrote.
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 aren’t designing or coding, we’re probably discussing an upcoming movie, a childhood book, or a fun new gadget.
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:
- No good
- Like
- 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.
The corresponding words we settled on are:
- Hate
- Dislike
- OK
- Like
- 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:
- Alison hated Trainwreck
- Alison disliked Trainwreck
- Alison OK’d Trainwreck
- Alison liked Trainwreck
- Alison loved Trainwreck
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.
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.
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.
Crazy Eights are a great way to quickly explore concepts.
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.
We also consistently use real content. We found that using lorem ipsum (or preferably hipster ipsum) draws attention to the crudeness of the wireframe, and distracts both coworkers and test users.
Mockups
Immediately after a flow is agreed upon we start adding details: icons, colors, copy, layout, and animation. Layout is usually consistent with the discussed wireframes. Again, we print them out and use real content.
Placing mockups on the whiteboard or wall allows us to point at specific parts of screens and discuss details as a team. We began with commenting on early mockups using InVision, but we found it difficult to have meaningful conversations about the product and design in the web browser. By physically placing (and replacing) mockups and standing in front of them, we can discuss and iterate much quicker.
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:
- Use a Macbook to record the user’s facial expressions and words
- Use a Ziggi camera to record the user’s taps on the iPhone
- Lower the chair height to not intimidate the user
- Offer water, coffee, or tea
- Keep tissue paper close by
- Offer a restroom break before and after the test
- Keep it light-hearted and conversational
- Don’t be afraid to chitchat
- 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.
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.
The App
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.
After seeing a friend review a movie that I’ve shared but not reviewed, I can:
- Review the movie myself
- Reveal the entire review
- Comment on the review
- Heart individual comments
- Heart the review
- 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.
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.
- Tap “I watched it” and your followers know that you watched it. At this point you can close the Toaster and keep browsing.
- 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.
- 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 is the best way to represent your taste in movies, books, and products. Often after a friend starts using Trullo, I can browse their profile and learn some exciting new things. Conversations (and occasionally debates) ensue.
The Wishlist tab is demonstrated in the screenshot below. We believe that collecting your friends’ favorite things that are unfamiliar to you becomes a valuable source of entertainment and purchasing inspiration. After posting that I want to watch a certain movie, friends will often chime in with either “What are you waiting for?” or “Skip it!”
Website
We tested two completely different landing pages before releasing the app.
Functional
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. It is now live at trullo.com.
Emotive
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.
Launch
The app went live on Thursday, September 17th, and we’re thrilled with the response. It’s great to see many of you writing reviews and building wishlists. If you have any questions about Trullo, design, San Francisco, coffee, or coffee in San Francisco, feel free to reach out to me on Twitter.
Welcome to the village.
Update: Trullo is no longer available in the App Store.
David Klein @diklein
