Lead UX/UI Designer

TellToo poster.

The Storytelling Social Network

"TellToo focuses on the journey we take as individuals to find meaning, purpose, and fulfillment in life. For many of us, technology has changed the way we socialize. Platforms like Facebook, Twitter, and YouTube have pushed social interactions to shorter, less personal, and more trivial exchanges. This has left certain core elements of socialization in the dust. Our project focuses on modernizing those elements and building a platform that delivers a more human centric method of sharing and connecting. Our mobile application allows users to tell stories through audio recording and visually navigate chains of naturally related stories." - Christopher Li, Project Manager & Concept Originator

TellToo is a mobile-based social media platform focused around community-building via oral storytelling. Our team (self dubbed "Who Said You Can't Bill Gates"—no, not, "Who Said You Can't, Bill Gates?" but, "Who Said You Can't Bill Gates," as if "Bill Gates" was a verb) unanimously recognized a sense of dissatisfaction and alienation inherent in contemporary social media giants such as Facebook, Twitter, YouTube, et al. In particular, these platform's proclivities to commodify their users, overwhelm them with advertisements, make them unwitting participants in psychological experiments such as Facebook's controversial research on emotional contagion,1 and cultivate an atmospjere of superficiality empirically demonstrated to psychologically harm their users2 3 is antithetical to how a "social network" should function. With this in mind, we sought to design a platform that specializes in facillitating genuine, healthful human interaction as our capstone project.

The theory behind TellToo's design and how we've set it to has much finer mechanics beyond this (the volume of documentation we produced is absurd), but I've reduced it to three primary concepts:

We've yet to test these concepts in the wild. In fact, a running in-joke throughout capstone was this collective anxiety that our app would become "FartChainz" rather than "TellToo," because our users would turn out to be much more interested in responding to each other with fart noises made with their hands than actual stories, and we'd end up with literal chains of farts. Hilarious as that is, I think it speaks to the incalculability of users' actions when they're allowed a system as huge as a social network.

The Prototype

One of the major tasks of the UX & UI team was the continual construction of a behemoth, 152-screen clickable Invision prototype. This prototype served as a high-fidelity idyllic mock-up of how the team would like TellToo to function and appear. The development team's task was to conform the actual application to mimic the prototype as closely (or, as feasibly given time constraints and manpower) as possible.

TellToo isn't available on the Google Play Store, and I suppose I could give you the source code and have you run our product with the Android SDK by yourself, but why trouble you with that when I can just embed the prototype right here?

Go ahead. Try it!

NOTE: Because InVision cannot process mobile phone gestures when used in-browser, if you click in certain areas designated as gesture hot-spots the prototype will behave as if you had performed said gestures. For example, clicking in an empty area may cause the prototype to behave as if you had swiped left or right.

Try performing these tasks:

  1. Sign up, sign in, or try signing in having lost your password.
  2. Check your notifications.
  3. Your account is new, so you're not following any tags. Add a tag to follow.
  4. Select a random story to listen to.
  5. Add that story to your collection.
  6. React to that story with an emoticon.
  7. Create a story of your own!
  8. Purchase a collection of stories.
  9. Change your profile picture.
  10. Change the app theme.
  11. Go to the feed and search for a story using the search bar.
  12. Try to find the secret level! Hint: The secret level is a handful of extra material for the pitch videos and in-jokes we hid within the prototype because Invision wanted $15/mo to put it in a separate prototype.

The Design


To expand on my little explanation on the moodboard above: We wanted a color scheme that was content-agnostic: We wanted the images our users chose to look nice no matter their own coloring, and didn't want to project too much of the application's brand on their creations. You can see a similar approach by sites such as YouTube and Instagram; white and black are the predominant colors, as these are user content-centric sites. To offset the sterile drabness of black & white and make our application appear more friendly and approachable, interactive elements have bursts of bright technicolor

One of the features of our application is that users can purchase color themes with story collections from the 'Community' tab, and whenever a user visits the profile or stories of another user, the content will be framed in the theme of that other user. The theory is that, if you like the theme another user has, you'll be more likely to ask them which theme it is, and where they got it, thus encouraging a trivial, but friendly interaction.

You might've noticed that I fashioned my own site off of concepts from TellToo and Airus OS.

And if you didn't, now you have.

Additional Documentation

Pitch Videos

Capstone Night

Every year, graduating students of the University of Washington's iSchool populate the entirety of two ballrooms in the HUB in an public exposition of our most ambitious projects. You can read more about the event here. Our table included Chris' tablet playing a loop of four videos showcasing our application in action, the poster Sanchya and I made, two phones running TellToo for visitors to use, and a stack of molasses cookies to lure those visitors in.

Business cards.

Personalized business cards designed and printed by our lead developer, Eduard Grigoryan.

Team Who Said You Can't Bill Gates.

Our sole group picture from capstone night, courtesy of the grad student from the table across from us. Sanchya tweeted the image to the event's hashtag and it was projected on the large screen behind us.

The Icon?

Here's some trivia: The application icon of TellToo is an arrangement each of our team members' silhouettes that I designed for the sole purpose of garnishing our poster, but while I was working on them I posted this faux-album cover on our Slack as a joke:

Streets of Scoliosis!

Streets of Scoliosis looks like a early 00's English synthwave album, right? Maybe something that The Knife would do, except about informatics—and scoliosis. While we agreed that the application needed something more visually punchy as the icon, it was the most aesthetically brand-consistent and iconifiable image we had on hand, so we ran with it and decided to change it during post-capstone development.

The Future of TellToo

Development has stagnated since our team graduated into the post-grad job hunt, but I see great potential in the careful engineering of an intentionally humanist social network. If you're looking for problems to solve, the domain of social media, though dominated by well-established juggernauts, is a ripe frontier; it's saturated with poor solutions. If you're interested in the TellToo project, I suggest you contact Christopher Li.

1 Kramer, A.D.I., Guillory, J.E., & Hancrock, J.T. (2014). Experimental evidence of massive-scale emotional contagion through social networks. Proceedings of the National Academy of Sciences of the United States of America. Vol. 111, no. 24. 8788-8790.

2 Kross, E., Demiralp, E., Park, J., Lee, D.S., Lin, N., Shablack, H., Jonides, J., & Ybarra, O. (2013). Facebook use predicts declines in subjective well-being in young adults. PLOS ONE.

3 Shakya, H.B. & Christakis, N.A. (2017). Association of Facebook use with compromised well-being: a longitudinal study. American Journal of Epidemiology.

Project Manager & Developer Christopher Li
Lead Developer Eduard Grigoryan
Lead UX/UI Designer Joel Elizaga
UX/UI Designer Sanchya Mahajan