Team Members: Anjali, Dorien, Ellington, Ji Hong, Karson
Bubble Maps
These bubble maps were created in order to help connect the different aspects of our app together. For the map on the left, the bubbles were scaled based on the importance of the word. Screen time and money are the most important aspects of the app because users participate in a competition centered around screen time and they must be willing to put money on the line. The money connects to politics and donating because the money at stake is money that will be donated to the opposite political party. The other words in the bubble map are words that carry significance and are key areas to be focused on when we work on the design implementation of our app. We need to consider how each of these different aspects can be implemented in different ways and identify which way will best fit our users to have the best experience.
For the bubble map on the right, the two main areas are social competition and lower screen time. Within each of these sections, there are words that relate to those topics. These words are a combination of outcomes, concerns, and building blocks. This bubble map is important for our team because it will help us to consider what we need to focus on to create the best possible social competition and to best influence users to lower their screen time.
Although these bubble maps are different, they both highlight key factors and topics that we will need to focus on when designing our application so that we can create a fluid and easy to use application that meets our goals and our users’ goals.
System Map
For our system map, we started by identifying some of our personas that were identified during our study and testing period. With these personas, we were able to focus on the different day to day activities that they perform and how one action leads to another. Ultimately, we identified paths that some of our personas could take to lead them to relative success. For the golfer, performing well and winning money is the goal, and for the distracted student and our other personas, doing well in school and earning good grades is important. As one can see in the map, we were able to identify ways that these people can reach their goals. Competing with a friend and stopping phone usage were some of the key needs we found in order for our users to be able to reach their goals. With this in mind, we can focus our design implementation to ensure that these tasks are completed in order to reach one’s goals.
Individual Task Wireframes
This wireflow indicates how the app flows once it has been activated by the user and the user continues to not get distracted. It includes a warning message if the user picks up their phone and tries to navigate away from the app since we believe that the user should be given a chance to rectify their behavior once they start to stray. Furthermore, over time this repetitive nudge would condition the user to avoid picking up their phone when they are trying to stay focused. (Anjali)
In the wireframe below, I show the key features that appear in the application. The steps are simple. The user can create a “focus challenge”, a set amount of time to stay off of your phone and get work done. They are generated a share link where they can create a group of their friends to take on the challenge with. They then compete against their friends to stay off their phones and the ones who win get their money donated to their political party and the ones who lose get money donated to an opposing political party. Since we don’t want people to be using their phones more due to the app, I want to keep the screen of the app very minimalistic. (Dorien)
In the wireframe below, the user begins a competition while on the app. Once they start the competition, they lay their phone out. The phone will display a motivating message and display the time. If a user decides to give up on the competition, it will first give them a second chance by showing a warning message. If the user still decides to quit and they lose, then it will display a screen showing that they lost and money was donated to the opposite political party. (Karson)
Social Media Wireframe:
In the wireframe below, we have an intro panel that shows their level (xp earned by focusing) and an announcement (toast) about their achievement of studying for 2 hours. The user is then prompted to share with their friends. After they tap the share button, they can select the social media platform they want to share it to. Our server will then automatically generate a social media post for their account that announces their score and challenges friends to join in on the fun. We believe that this will allow us to snowball and create an engaging environment where users will want to compete and use our product with their friends. (Ellington)
Donation Wireframe:
This task flow is super important because it the foundation of this app: to donate to a political party to try to keep focus. The key flow for this task starts up when an user wants to start studying. When they want to start, the can choose a party and then the amount they want to donate (to opposing when focus is lost or to themselves if they do focus) before they start. Some of this information can also be stored beforehand to prevent constant input from the user. Unless they want to change parties, they can do that in other settings. (Ji Hong)
Synthesized Wireflow
Reasoning:
In our synthesized wireframe, we combined our screens into two distinct categories. One section for users who want to study independently and one if they want to compete with friends to foster this competitive atmosphere. Like most flows explain above in the individual panels, the arrows in the image above shows a general flow of how users will use the app (of course there are many things still missing, but since this is the initial iteration, we wanted to keep in the main components of the app). So the general flow was separated into two sections and we came to this conclusion after some talk about having the users journey be as simple as it can be since they’re on this app for one reason and that reason is to focus and get work done. Any other unnecessary hoops or barriers are inhibiting factors as that would just distract the user more and may even become frustrated when using the app–which is something we’re not aiming to do.
Task flows:
Study Independently:
- Login -> click on start studying -> prompt with political affiliation input and donation amount -> submit inputs -> start studying
- Of course, at any time of this process you may exit and return back to the home screen where it will display your personal analytics and data (i.e. concentration/ focus duration, donation amounts, etc)
- At the end of this flow, you either:
- Not lose focus -> donate to your party
- Lose focus -> donate to opposing party
- Exited somewhere in the process, contingent on where you are in the timer
Study with friends:
- Login -> click to the interaction tab on navigation bar -> send link to invite friends -> enter competition with friend -> input amount to put into the donation pile -> start competing/studying
- Same as above, you can exit the process at anytime but after you start studying and want to exit, that’s when you lose the amount you put in. The game screen will show leaderboards between your friends and also other information pertaining to the social aspect of this app.
- At the end of this flow, you either:
- Not lose focus -> donate to your party
- Lose focus -> donate to opposing party
- Exited somewhere in the process, contingent on that being before the competition
- You’ll have the option to share this to other socials to promote more focus or achievements
Note: during these two tasks, any distraction will be prompted with an “are you sure, you’re money is going to X party,” to try to manipulate the user back into focus.
Next steps:
There are still some fleshing out to do in terms of separating more things on the navigation bar or smoothing out task flows. These UI revisions will happen along in the process as we hone into exactly what we want the users to engage in while using our app.
