Our app springs from the reality that even the best intentioned student will at some point experience boredom during his/her schooling career. In this day and age our attention spans are short and our instinct to search for supplementary forms of entertainment is strong.
Writers can browse stories created by other users at random. If they read something that inspires them, they can quickly add to it. In the end you unravel a story that represents the efforts of a potentially infinite number of people; a completely unpredictable narrative.
Roll With It is a solution to your boredom in class, at work, or late at night. This game is for writing enthusiasts, bored students/teachers, poets, and creative thinkers alike.
Lead Developer, Product Designer
3 Founders
4 Months (Spring 2016)
ENTR 390 - University of Michigan
The aim of ENTR 390 is to practice managing, designing, and implementing an entrepreneurial vision.Define MVP
Design Logo
Map User Flows
Research Users
Prototype MVP
Design Interface
When designing experiences for various personas, it is imperative to acknowledge their individual thoughts, desires, and feelings. Think Relationships 101.
These are the types of users we expect to have:
Bored millenial looking to be entertained. Remember that these are users. Not craigslist ads.
- Needs constant stimulation
- Focused on finding entertaining stories
- Enjoys absurdity
Professional and hobbyist writers who are just so flipping excited when they get to contribute!
- Prefers well-written stories over absurd ones
- Focuses on contributing
- Enjoys lenghty, well crafted reads
Group of people playing simultaneosly during a unanimously loathed event (i.e. boring lecture).
- Wants to collaborate on stories with friends nearby
- Contributes to specific stories that friends have contributed to
- Enjoys inside jokes, name-calling, anything that connects the stories' content to the world around them
After researching our users and defining their goals, we mapped out their experience using flow charts. Depending on the app and it's functionality, it can be useful to draw out separate flows for each user persona. In this case, our MVP was basic enough to accommodate the various personas in one flow.
Once we narrow down our options we begin creating low-fidelity mock-ups of each screen to better visualize the experience. During this step, we focus on information and layout rather than aesthetics. These can be combined with user flows for smaller applications, where they also depict the navigation between various screens.
Now that we have a concrete understanding of the journey our users take throughout our app, it is time to decide how to aesthetically present the various information and features to our user. Due to the length and context of the original project, we were not able to create high fidelity mockups yet.
The aim of ENTR 390 is to practice managing, designing, and implementing an entrepreneurial vision. Unfortunately, we had a strict schedule and proceeded to prototyping and user-testing the app without spending a worthy amount of time on the aesthetics.
We rapidly prototyped 'Roll With It' in python utilizing Flask to create a responsive, mobile-first web app. On presentation day, we deployed our prototype on a local server allowing the audience to log on and play live. Within minutes, we hear chuckles around the room as we see familiar names (used as verbs) in unfamiliar situations scroll across our phones. It didn’t take very long for people to start using hyphens to get around the word limit. It was a great time and we learned a lot for future iterations.
Some notes from the final presentation: Need to disincentivice trolling. Make it easy to see personal contributions as well as perspective changes (Archive?). Private stories (add contributors). We need to improve the quality of the stories. What scenarios lead to a better story? Location based stories (within certain radius, geotag stories)?
Writing this reignited my passion for Roll With It. To practice my craft and prove my skills, I began redesigning some high-fidelity mockups for our app...
Time to bring it all together. Using the previously created wireframes and userflows, I designed high-fidelity mock ups. Here I paid close attention to aesthetics as well as the overall user experience.
Notable changes and rational:
- 'Submit' > 'Contribute'
fosters collaboration and discourages trolling
- Character limit instead of word limit (counter above keyboard)
no-hypen-loopholes
- Visuals encorporate ancient scroll theme
papyrus, parchment feel
- Stats for # of Contributors and Scroll (Story) Age
promotes growing community, builds attachent
It is never easy choosing from the myriad of colors, fonts, and layouts available. Furthermore, there is never only one right answer to a design problem. For this reason, I designed many mockups of each screen with various styles so we can quickly see which designs are most readable and intuitive.
The first interesting challenge was figuring out how to best display the stories such that viewers can distinguish between words/characters added by different contributors. Our original design of Roll With It did not solve this problem. I want users to clearly see when the narrative is switching between writers and also draw their attention to the collaborative nature of the app. I came up with the following solutions:
Whitespace Solution
Adding extra space between each contribution
Alternate Color Solution
Alternating font color between contributions
Font-weight (Ink Effect) Solution
Font-weight decreases as each contribution approaches the character limit
I first believed alternating font color was the best solution. Fortunately, during the time I spent redesigning Roll With It, I happened to see an episode of "Abstract: The Art of Design" on Netflix in which Paula Scher describes how she used different font weights within the word "Public" to convey the diversity of the fonts found on the streets of New York. I immediately paused the show and began designing mockups that utilize this technique for Roll With It.
For many designs, the test of time is the only way to validate familiarity and functionality. I appreciated this solution more and more as time went on. It looks like someone was writing with an antique feather and ink and began running out of ink. Or like someone was engraving text in an old scroll and started getting too tired to keep writing. This perfectly captures the essence of our app and also helps convey the character limit imposed on contributions.
Along with recognizing different contributions, I wanted the users to see their past contributions to various stories. Personal contributions are displayed in red ink.
My next challenge was deciding what statistics to display about each specific story. To evaluate how important each statistic is to the various personas, I simply asked five potential users to choose the information they value most from a list of possible stats. To my surprise, all five of them only cared about how many people contributed. Taking this into account yielded a much cleaner interface.
As we have witnessed before in various social media platforms, the quality of the content heavily dictates the success and usability of such an app.
How can we counter trolling and ensure quality contributions?
Veto System (WINNER)
Readers can veto additions they dislike to flag them (force touch gesture?). After a certain number of vetoes, the contribution is removed and the story keeps rolling from the previous contribution. This can only be done on the most recent addition to avoid abrupt jumps in the story's narration.
Contribution Timeout
This solution operates under the assumption that if a story is interesting, someone will contribute to it promptly. If an addition is made that ruins the story, no one will bother contributing to it. This solution utilizes a timeout on stories. For example, if 24 hours pass since the last addition and no one bothered to contribute to the story, the last contribution is automatically removed.
After consulting with various product designers in the Ann Arbor area, I realized the contribution timeout's base assumption is not always true. For now, I am using the veto system for quality assurance. Determining the number of vetos needed to remove a submission will require more user testing. It could be 3 strikes and you're out, or it could be dynamically calculated based on the number of contributors to the story.
While a force touch gesture would be nice, there is lots of speculation on whether Apple will be removing 3D touch in future devices. For this reason I decided on a basic tap and hold to veto a submission.
I am currently in the process of prototyping the interface and micro interactions using Sketch and Principle.
Create a High Fidelity Prototype with micro interactions using tools such as Principle or Framer.
Create dynamic visual cues and help tips to get new users acquainted with Roll With It.
Test prototype with various users, discover pain points and REPEAT REPEAT REPEAT...