CS 147 Let’s Do This!

Assignment 6 Report 1. Team Name: Value Proposition Let’s Do This: Achieve your goals with friends. 2. Team members’ names and roles Eric - Developer, manager. Video filming, editing, storyboarding Sami - User testing, documentation. Design sketches, writeup, storyboarding Juan - Design. Video acting, design sketches, storyboarding Divya - Developer. Video acting, design sketches, storyboarding 3. Problem and Solution Overview Working towards goals and meeting deadlines is hard. Reminders are not very effective: they are very easy to ignore, can simply be snoozed away, and most importantly, they are not motivating. People who are motivated can accomplish great things. We plan to use a strategy of friendly competition and cooperation to motivate the users to work towards their goals. 4. UI Sketches for 2 different interface designs We first started by considering two different approaches to what the user interface design should focus on. The first UI design alternative (See Figures 1 and 2) was primarily geared toward allowing the users to interact with the tasks related to the Pacts themselves in the easiest and fastest way possible. For instance, the UI provides a detailed easy-to-access page for the user’s current achievements, a handy touch button to send a “Good Job” (or “GJ”) to another user when they successfully complete a task in their pact, etc. The second UI design alternative (See Figure 3) aimed to improve more explicitly the user experience within the mobile application altogether. Focused more on fun, humorous and attractive visuals to lure the user into spending more time on the app in general, this design alternative dedicated for example a whole page to an actual “pact pledge” where each user sees their pact fixed in red seal, in addition to an analogue game-like reminder clock to be set by manually rotating the hours and minutes hands. In other words, the 2nd design alternative, when compared to the 1st, seems to be sacrificing some of the efficiency and ease of use of the application toward higher aesthetics and a sense of “cooler” eye-candy product.

Figure 1: Screenshots from the UI design alternative 1

Figure 2: Example of transition between app pages for the UI design alternative 1

Figure 3: Screenshot from the UI design alternative 2

5. Selected Interface Design Although both design alternatives were appealing in different areas, we decided to go with the 1st alternative (Figures 1 and 2). The reason is that, since the main advantage of our app will come from the network effect and the increase in the number of interactions among the users (sharing moments with each other, sending a kudos to one another, checking how the others compare in their achievements, etc.) as opposed to the user interacting with the app almost solely as in the case of a calendar app or a mere reminder, we really needed to enhance the experience of using Let’s Do This together. Therefore, we decided to focus on a UI design that prioritizes sharing tools, ease of use, interaction tools and settings, etc., all in a very straight forward and intuitive display right in front of the user at every point. Therefore, with our current design, our users will be able to easily achieve the following functionalities with the app: Functionality summary table:

Feature Description

Motivating reminders By showing the progress of your pacts and friends in reminders, we use social pressure to motivate users.

Joining pacts Users can join “pacts”, which are groups of friends that share a common goal. Pact members get pact notifications when someone is doing a pact task and can join them.

Motivate friends Friends can motivate each other by sending “likes” or “kudos”. They can also send direct messages and comment on updates.

View progress Progress is measured in many ways, but is primarily measured by social approval (number of “likes” or “kudos”). It is also measured by achievements (unlocking a 5-day streak). Users are able to view their own progress as well as others’ via a newsfeed and a trophy case (for achievements).

Update progress At the beginning of a session, Let’s Do This updates the status of a user so their friends know that they are working on a goal. At the end of a session, users update their progress via a picture and text. Their update will appear on the newsfeed of their friends.

6. UI Storyboards for 3 Scenarios As we have argued in the previous section, the current UI design we have chosen caters well for a pleasant user experience when performing any of the main tasks desired. We will know walk the reader through 3 typical scenarios of performing different tasks in our app, and will complement it with visual storyboards:

-Scenario 1: Viewing progress : The user wants to check his/her current progress and achievements with respect to the pact. This can be achieved with 3 simple steps (See Figure 4), starting from the home page: (1) tap on achievements to look at current achievements to date, (2) tap on the current level icon to see how long before the next level is reached, (3) enjoy all the detailed info you may want.

Figure 4: Storyboard for Scenario 1 - checking your achievements (read from left to right) -Scenario 2: Finding buddies within a pact : The user learns that his/her friend is currently working on his/her pact and decides to join him/her in their task. Again, 3 very easy steps are needed (See Figure 5): (1) once the pop-up notification is received informing you of your friend’s update, swipe it to read detailed info about the task; (2) if you want to join your friend, tap on “Join”; (3) tap on “Navigate” to receive commuting directions to physically join your friend.

Figure 5: Storyboard for Scenario 2 - Joining your friend’s task (read from left to right) -Scenario 3: Features for motivation : The reminder for a task rings, the user first decides to dismiss it, but then he/she is encouraged thanks to peer pressure to follow the task and work on his/her pact. Here is how this scenario works out with our app (See Figure 6): (1) the reminder screen is shown to you with the task as a label, (2) you tap on “Not Now” if you don’t really feel like it, (3) now that you see all the friends you’re letting down by dismissing the reminder, tap on “No! Let’s Do This!” to take up the awesome challenge. A user can also give ‘Good Job’(Figure 5) to his/her friends and motivate them on the task.

Figure 6: Storyboard for Scenario 3 - wanting to dismiss a reminder then changing your mind thanks to peer pressure

7. Video Planning Storyboards for 3 Scenarios for shooting video The general idea of the concept video is pretty simple: showcase the motivational boost from using our Let’s Do this app. Here is how the storyboard goes (See Figures 7 to 10): -Scene 1: Larry wakes up to his generic reminder to go for a run and practice for the marathon, but he directly dismisses it and goes back to sleep -Scene 2: Pauly wakes up to his Let’s Do This reminder to practice for the marathon and tries to dismiss it, but he gets hit by the guilt from our app, feeling he’s letting his friends down. Pauly gets up, puts on his running gear and goes running full of energy. -Scene 3: Pauly is getting tired but Let’s Do This keeps him energized by tracking his achievements and encouraging him. He continues running and happily shares a selfie of his run with Divya. Divya is meanwhile working on her cooking pact. She sees Pauly’s selfie and his progress, and sends him a “Good Job” to encourage him via our app. Pauly is thrilled. -Scene 4: Pauly gets home and thinks of calling it the night, but the app tells him that Divya is still learning how to cook. He decides to join her instead and give back the encouragement. He leaves his room again, with the cooking gear this time. -Scene 5: Pauly and Divya are cooking together and having an awesome time, together! -Scene 6: Larry wakes up and checks his watch: he missed out on an entire day by sleeping in his bed instead of being productive. He should definitely use Let’s Do This next time.

Figures 7,8,9,10: Video Planning Storyboard for our our final concept video

8. Concept Video Description (Link : https://www.youtube.com/watch?v=rmqKLrqHDKw&feature=youtu.be)

1. What was difficult? a. Finding cameras. All of the DSLR cameras at Lathrop were checked out. We

ended up using a point-and-shoot. b. Editing took longer than expected, and it’s difficult to throw away scenes to

meet the 2:30 mark. 2. What worked well?

a. Using a tripod made shooting much easier. A tripod allows the camera to be placed in positions that would be hard to hand hold (above head shots/ in tight corners).

b. Tools: i. Using POP for prototyping was helpful. ii. We used printed wireframes (see Figure 11) to draw our sketches. It

made it a lot easier to integrate the sketches with POP, because the dimensions were just right.

Figure 11: Wireframe for iPhone5

iii. Adobe Premiere Pro for editing. It has all the features you need and there are many online tutorials. It’s cross-platform so it runs on Window and Mac, which is great in the context of a group project.

3. How long did it take for each phase of design prep, shooting, editing? a. Design prep: 2 days b. shooting: 1 day c. editing: 2 days