Tons of people use their phones to follow discussions of sporting events while they're happening. But they have to constantly scroll to see the latest comments, jump from place to place to find highlights, and sift through hundreds of low-effort comments to find the few insightful ones.
The goal of Root is to easily keep track of what people all over the internet are saying, as they say it. Have better discussions with more insightful comments. Add your own thoughts and feelings. Easily find video highlights as soon as they’re added. If you missed a game, come back anytime to follow the conversation as it happened and watch all of the important pieces of action.
I was responsible for everything product-related outside of development: logo design, initial feature scoping, interaction & visual design, prototyping and front-end design.
iOS & Android
Root needed a logo to go with its app. Because of the different ways in which it would be represented, I wanted to create a simple mark to go along with a logotype, so that the two could be used together or separately at multiple sizes. I experimented with a number of different concepts - abstractions of antennas to represent reducing noise to signal, root symbols, motion, and more - before landing on a simpler, abstract R monogram.
During this part of the project I also sketched low-fidelity versions of a lot of the app's features. Much of this was simply jotting down notes about why things should work the way they did - considerations, the problems being solved, what users would expect, and ideas. Being able to get all of these thoughts down in one place helped me see the bigger problem that Root was trying to solve and be able to begin to piece those back together into a cohesive app experience. Being able to refer back to these sketches and notes was useful throughout the project.
My feeling was that the most important part of this app, and the thing that sets it apart, is not the UI. Where Root excels is in the way that people use it: how information is organized, how people access the most important things, and the microinteractions that occur as it's being used. Root did not need to be overly-designed; rather, the UI needed to be as simple as possible to avoid getting in the way of the user. A simple color palette and clean type was enough to make it look nice and be easy to read.
Because of this, after sketching out the general flow of the app and the layout of some of the key screens, I jumped straight into UI design, skipping wireframes. Because the focus was on the interactions and not the design itself, designing a full set of grayscale wireframes first would have been redundant, since the UI design phase would simply have been adding colors to them.
The result of this hybrid wireframe/UI process is below:
Root's design relies on a simple, almost monochromatic color scheme. This accomplishes a few things: users are able to dig straight into the discussions without having to navigate any superfluous design. Content like highlight videos really stands out because of its contrast against the rest of the interface. And since a lot of the app relies on tying people's emotional reactions with colors, there isn't any collision between the use of color for interface elements versus emotional analysis.
As I wrote above, the real differentiator for Root is the way users are able to navigate and interact with content. So it was crucial that the small details like how things behave when scrolled, the speed at which elements transition, and the gestures used to engage with the app be excellent.
Because of that, it made sense to build an interactive prototype for Root. The approach I took was to prototype out every single feature separately, like how users add content, how the header behaves as they scroll, how they move between different sections of the game thread, and how they keep track of new content as it comes in. Each of these stood on their own as individual, interactive prototypes. I also combined the most important ones into a single, combined prototype. This prototype could be previewed on actual devices, and because every screen of the app was accounted for, you could navigate through the entire app just like it was real.
Because Roots interactions, not its UI, are the best thing about it, designing and building a great landing page was tricky. A set of static screenshots wouldn't adequately convey the value provided by Root. The prototype I designed earlier came in useful here, because I was able to build a landing page around Root's features, with a great, animated depiction of each.
As the user scrolls down the page, the navigation sticks to the side and each feature is highlighted individually. If a picture is worth a thousands words, a video is worth 1000 more. Users are able to understand immediately how Root works and why they would want to use it.
The landing page had a 10% conversion rate, well above industry average. You can see it at tryroot.com.