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
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.
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.
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.
We began with three levels for rating a movie, book, or product:
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.
An early drawing of Trullo’s rating hearts by Yuechi Li, a design intern
The final version of Trullo’s rating hearts
The corresponding words we settled on were:
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.
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.
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.
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.
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 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.
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:
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.
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.
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.
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.
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:
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.
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.
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.
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!”
I swear I’ll watch Yojimbo soon! I hear it’s the inspiration for all Western movies.
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.
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.
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: