happyblue

Students at Wellesley feel stressed by their environment rather than enjoying it or often ignore their anxiety to continue working. We want students to have tools to reflect and focus on the positive.

Storyboards and Designs
Paper Prototypes
Computer Prototype
Implementation
Implementation

Download the HappyBlue App Here!

Installment instructions: This application is designed to be run from the home screen of an iOS iphone or ipod. After accessing the above link in Safari or entering the url http://cs.wellesley.edu/~happyblu/app into the Safari browser, to install the application to the homescreen click the download button in the Safari footer.You will see the option to "Add to Home Screen." Once HappyBlue is installed to the home screen it can be run like any other iOS application.

Project Screenshots

Figure 1: Application Home Screen Figure 2: Choosing a Relaxation Figure 3: Deep Breathing Relaxation Figure 4: Deep Breathing Animation
Figure 5: Deep Breathing Animation Figure 6: Game Relaxation Figure 7: Reflection Figure 8: Reflection Error Message
Figure 9: Highlighted Errors Figure 10: Selecting Reflection Figure 11: Writing Reflection Figure 12: Finished Reflection
Figure 13: Edit Reflection Figure 14: Edit Error Figure 15: Confirmation
Figure 16: Mind Exercise Listing Figure 17: Selected Mind Exercise Figure 18: Body Exercise Listing Figure 19: Selected Body Exercise
Figure 20: Exercise to Journal
Figure 21: Journal Listing Figure 22: Journal Entry Figure 23: Write Entry Figure 24: Written Entry
Figure 25: Confirmation Figure 26: Viewing Entry Figure 27: Editing Entry Figure 28: Edit Confirmation
Figure 29: Edited Entry Figure 30: Multiline Edit
Figure 31: Send Feature Figure 32: Send Feature Errors Figure 33: Send Filled Figure 34: Send Confirmation

Created with the HTML Table Generator

Implementation Documentation

The implementation of the HappyBlue application accessible via the above link and illustrated in Figures 1 - 34 includes all the features tested in the paper prototype.

Reflect Feature (Figures 1-15):

First, Figures 1 - 15 document the core "Guided De-stress" feature. This feature corresponds to the task of "Increasing Positivity By Daily Rememberance" identified in the task analysis. In this implementation Figure 2 illustrates the use of the more specific terms "Deep Breathing" and "Quick Game" on the icon labels. Although these descriptions do not contain verbs like the "Do Exercise" and "Send Note" icon labels on the home page, this difference allows the labels to give a more accurate idea of the icon's purposes. Especially the "Do Exercise" label illustrated in Figure 11 in the Computer Prototype screenshots created confusion over the use of the word "Exercise" on the home screen and in the "Exercise" section of the application. Moreover, the symbol for the game was also changed to a maze to more exactly illustrate the type of game the user is choosing.

In the paper prototype testing the "Deep Breathing" relaxation activity was simulated with a count of 1 to 5 on the screen that began increasing as soon as the user reached that screen. Heuristic evaluations determined this feature was stressful and difficult to follow. To reduce stress and increase the user's control, an icon was introduced to allow the user to start the exercise when they are ready (Figure 3). Moreover, the exercise may be repeated by pressing the same button after the animation's completion, allowing the user to redo their action. Additionally, instead of a numerical representation of the number of breaths, a simple animation is used to prompt the user to "Breathe In" and "Breathe Out" (Figure 4, Figure 5). Since removing the numerical indicator removed the indication of the user's progress, a slider progress bar was also included in the animation (Figure 4, Figure 5). Unfortunately, this design has proved to have undesirable affordances: user's are encouraged to manipulate the slider rather than simply observe it as an indicator of their progress as sliders are expected to produce some change. Thus, a revised implementation would replace this slider with a more sophisticated animation utilizing the HTML5 canvas.

In testing the game relaxation activity (Figure 6), the default scrolling behavior on all jQuery mobile feature complicated the ability to run a finger through the maze without moving the screen. Hence, the default scrolling was disabled on this screen and in fact on all screens where scrolling would never be necessary because the content is fit to the screen.

After implementing the Send feature in the first computer prototype, the combination of a preset dropdown of choices and a text input box for editing that preset option or writing a custom message appeared consistent and appropriate for the Reflect feature as well (Figure 7). The user may pick a preset option from a pop-up list (Figure 10), or write their own answer (Figure 11). Unfortunately, to fit this content comfortably on the screen, the descriptive top cloud had to be reduced in size. However, this visual inconsistency is less disruptive to the user than having to scroll to reach all content including the important "Submit" button. As the intended users of this application are busy students on the go, the ease of having all information visible at once outweighs the aesthetic concern of matching the cloud size on all screens. This particular arrangement also reduces the user's cognitive load as the question corresponding to the dropdown is always visible when the selection menu is opened since it is placed as the first item in the list (Figure 10). Similarly, the question's close attachment to the "Write Your Own" text field conveys that they are related and ensures the question is visible when entering text (Figure 11). The automatic filling of the "Write Your Own" box with the selected option also allows the user to easily edit their input.

Next, form evaluation, error messages (Figure 8), and highlighting (Figure 9) ensure that the user enters valid information in each reflection box. The error messages and highlighting are consistent through all features of the app (Figure 14, Figure 32) although not all the possible error messages are presented in these figures. For instance, the Send feature also includes an error pop-up before the highlighting pictured in Figure 32, and the Write Journal Entry feature (Figure 23) also includes an analagous process that is not pictured. Moreover, the error messages and error highlights are all of consistent color. This color is meant to catch the eye, and to be distinct from the color of the confirmation pop-ups that have a different intention.

Additionally, an extra step of editing shown in Figure 13 permits the user to edit their input before it is saved to the journal. This step reduces errors and gives the sequence a sense of closure. A final confirmation pop-up (Figure 15) completes this sequence. To facillitate the user's access to related features, the confirmation also allows the user to open the journal if they wish to look for the entry they have just created or updated.

Exercise Feature (Figures 16-20):

In this implementation, the distinction between "Mind" and "Body" exercises was further clarified by including icons on the footer menu (Figure 16). These icons also explain the "Do Exercise" icon on the home screen that visually depicts "Mind or Body" with a slash between the icons (Figure 1). The previous footer can be seen in Figure 17 of the Computer Prototype screenshots.

Additionally, the buttons present on each exercise page that allow easy access to other exercises in the same category were updated (Figure 17, Figure 19). In the paper prototypes and first computer implementation, one button allowed the user to get to a different exercise after users expressed and interest in seeing other similar exercises without returning to the main listing. However, given that the user might wish to go forward or backward in the list of exercises, it was decided to add both a forward and backward chevron-icon button by the description of the exercise to allow the user to cycle forward or backward. This improvement raises the user's control of the interface and allows them to easily undo or redo moving through the exercise descriptions.

As in the reflect feature, Figure 20 depicts that when the user indicates they have completed an exercise a confirmation appears and allows them to easily reach the journal if they wish to see the related journal entry.

Journal Feature (Figures 21-30):

The first improvement to the journal feature can be seen in the listing in Figure 21: the order of presented entries was changed to give the most recent entry first. Hence, after making an entry in another feature of the app and either using the "Open Journal" button on a confirmation dialog or navigating to the journal, the user can easily locate the entry they have just made.

Clicking a journal entry then presents all the data entered for that specific date (including reflections, exercieses, and entries) using information retrieved from local storage (Figure 22).

The user is also able to write journal entries and save them in their journal entry for that date (Figures 23-25).

To increase the user's locus of control and allow them to undo mistakes, this implementation also includes the ability to edit a journal entry. The journal edit button was added on the entry page in the footer as it is a feature similar to that given in the write button in the left corner of the journal pages. Additionally, it is not a "Submit" or "Confirm" feature, and these are the features that are normally presented with blue buttons on the actual page of the application. Also, since the entries may be of variable length, a button under or above the entry might not appear depending upon where the user has scrolled to. Therefore, the edit button is included in the footer (Figure 26).

Figures 26 through 29 show the editing of a simple journal entry to illustrate the edit feature. However, the feature is available even when the journal consists of multiple lines of different types of data (Figure 30). In that case each line will appear for editing in its own textbox. At present, some of these text fields might be smaller than completely desirable for ease of editing. For example, in a more sophisticated editing interface a long entry might appear for editing in a text area rather than a small text field. However, the current interface is fully functional and allows the user to fix mistakes if they are made. Additionally, it is designed to look much the same as the finished entry with the "Reflections:", "Activities:" and "Entries:" headers still present to indicate to the user the breakdown of the page.

Send Feature (Figures 31-34):

This feature is still accurately described by the "Complete Feature" section of the Computer Prototype documentation. Changes such as the color coding of the error pop-up and confirmation were made to keep the feature consistent with others in the application.

Computer Prototype

Prototype Screenshots

Figure 1Figure 2Figure 3Figure 4
Figure 5Figure 6Figure 7Figure 8
Figure 9Figure 10Figure 11Figure 12
Figure 13Figure 14Figure 15Figure 16
Figure 17Figure 18/td>Figure 19Figure 20
Figure 21Figure 22/td>Figure 23Figure 24

Created with the help of HTML Table Generator

Documentation

Look and Feel

Mainly, we strove to implement the same designs we tested in our paper prototypes. However, we made several new decisions based on working with the screen size of our app.

First, we decided to implement our prototype using JQuery mobile as we think that this framework will help us to make a high quality web app. Therefore, we started implementing our look and feel by using JQuery mobile's them roller to make a color theme and design scheme for our app.

As we think that the native iOS look and feel is a good standard to begin working from, we picked Helvetica fonts that are readable and similar to native iOS fonts. We chose blue as a color for our important buttons because blue is a color associated with relaxation and also the name of our app HappyBlue. We chose a specific blue that is endorsed by Wellesley as a "Wellesley blue." Based on our lectures on simplicity in design and using color sparingly to highlight functions and associate items, we decided to make the background and headers and footers of our app white. This makes the limited colors we do use stand out. We chose yellow as the secondary color in our design as it does not clash with the blue, and it is also a color associated with happiness.

In our theme roller we also chose to minimize JQuery mobile's rounded corners. We think the square edges look crisper, more professional, and closer to the native design of iOS7 which is the version on all of our testing devices.

Next, we picked or made icons for our app that clearly represent the functions without conveying conflicting impressions. We learned from our paper prototypes that many of our icons were unclear. Therefore, we made custom icons like our "Exercises" icon that is meant to represent "Mind or Body" (Figure 2). We also changed the name of our categories in the "Exercises" section to be called "Mind" and "Body."

On our home screen (Figure 2), we also decided to eliminate the "Settings" link that was in our paper prototype as we have come to realize that we do not have settings to put in this feature. We also decided to add text by the journal icon in the bottom left corner to make sure that all of our icons are very explanatory. Only the "Back" and "Home" links that are very consistent with current standards in apps are not labeled.

We have a second type of footer menu that appears on some of our pages in order to create dialogs that have closure. In our Guided De-stress feature (Figure 11), the yellow highlighted footer shows the user where they are in a progression. In the Exercises feature (Figure 17), the yellow highlighted footer also shows the user which page they are on.

In our app we also use consistency between the lists in the Journal and Exercises listings. Both look the same. We decided to put the "Write" button that appeared over the Journal list into the footer to make the lists more consistent. We noticed in our paper prototype testing that users were somewhat put off by this "Write" button as they thought they had to write things. Since the primary goal of the journal is to log what the user has done, we think the "Write" button is better as a subsidiary feature. Similarly, we moved the "Show Another Similar" button on the "Exercise" page to be a small icon near the title of the exercise. This button also had too primary of a position in the other design.

Although we are mindful of the "Fat fingers" problem and Fitts' law, we decided to not make our important buttons like "Guided De-stress" and "Send" close to the whole width of the page because they became less "button looking" and seemed to invite clicking less.

Complete Feature

We decided to implement the "Send" feature fully (Figure 3). This feature is important to our app and has features that will be repeated in the reflect feature. We included form evaluation and error highlighting in this feature. We decided to make both the "choose a message" and "picture selection" fields dropdown menus. This way, when the user opens the dropdown menu, they can still see the question (like "Choose a Message...") in the first slot. This takes load off of their short term memory by allowing them to still have the prompt (Figure 5). This same logic was applied to the dropdowns in the guided reflection (Figure 14) Also, we made it so that there is prompt text within the "Email Recipient" and "Write Your Own" features to prompt the user. However, to reduce the user frustration, that text is deleted for them when they begin to type (Figure 4). Moreover, if they leave the box without their input, the prompt text returns again to reduce short term load. We noticed that some of the preset messages do not fully display in the select menu. Therefore, to give more power to the user's locus of control, we made it so any selected preset message appears below in the "Write Your Own." box (Figure 9). This allows the user to see the full message, and to edit the preset message if they so choose. This is desirable for our on the go users because many simply want the convenience of a pre-set message. However, they will still now have the ability to edit this preset message.

Our form evaluation informs the user if they have left required fields blank, and highlights those fields in orange for them to see (Figure 6, Figure 7). This orange highlighting contrasts appropriately with the rest of our color scheme. Additionally, the user is asked to confirm their choice to leave the app to send their message via email. This gives the user appropriate feedback and the control needed to stop their choice if they do not wish to leave the app (Figure 8). Moreover, sending the message via the user's default email provider gives them another opportunity to edit their information or message and use their default address book to add other contacts (Figure 23, Figure 24). Since we are building a web app, we would not have access to the user's address book within the app.

Paper Prototypes

Prototype Photos

Click to Enlarge:

Created with the help of HTML Table Generator

Briefing

To our pilot users, we gave the following briefing:

"Happy Blue is a Positive Psychology App intended to reduce stress at Wellesley. Students should use this app when they feel stressed to take a break. The app has features that allow users to de-stress, send notes to friends, and do other activities that have been demonstrated by studies of Positive Psychology to make people happier."

After working with the pilot users, we realized that many test users would be unfamiliar with the idea of working a paper prototype, and might try to rely on us as we ran the app.

Therefore, we expanded our briefing to the following:

"Happy Blue is a Positive Psychology App intended to reduce stress at Wellesley. Students should use this app when they feel stressed to take a break. The app has features that allow users to de-stress, send notes to friends, and do other activities that have been demonstrated by studies of Positive Psychology to make people happier."

"While you do these tests, one of the testers will play 'the app.'' We will not be able to explain the app to you. You cannot do anything 'wrong,' we are testing the app, not you. If something is confusing, we need to change our design. Please feel free, in fact we encourage you, to think aloud about what you are doing, or what you wish you could do with the app."

"Any questions?""

This more detailed introduction helped us to set a better tone for our user tests.

Scenario Tasks

In an effort to see how the users would explore our app, we tried to keep the descriptions of our tasks as simple as possible while still requiring the use of all features. For instance, we intentionally left "Use the app to de-stress" as a vague instruction to see if user's would click the "5 Minute De-Stress button" rather than any others.

To the pilot users, we gave the following tasks:

  1. Use the app to de-stress
  2. Send a message to a friend
  3. Find an activity and look for it in the journal

After observing the pilot users, we decided to make our tasks more precise.To the first test user, we gave the following tasks:

Task 1

Use the app to do a guided de-stress. During this reflection, select a pre-set option and write your own. When you return to the home page, your task will be complete.

Task 2

Send a message to a friend.

Task 3

Find an exercise. Then find another similar to it. “Complete” that exercise. Next, go to your journal and see the entry about that exercise.

However, after running some user tests, we decided that these tasks became too didactic. Users spent too much time trying to follow the tasks to the letter - they stopped reading the text on the screens or noticing other features: for example, one user clicked the "Skip To Reflection" button when given the option to do an exercise or game before the reflection because she felt doing the reflection was the goal of the task.

Therefore, we gave the last two users the tasks:

Task 1

Explore the guided de-stress feature. When you return to the home page, your task will be complete.

Task 2

Send a message to a friend.

Task 3

Find an exercise. Then “Complete” that exercise. Next, go to your journal and see the entry about that exercise.

We found that these tasks allowed the users to naturally run through the features of our app.

Observations

Our pilot users were the most helpful in determining what our most problematic features were. These are the observations we made while they tested our app:

4/3/14, Pilot User Testing

Pilot User 1

Pilot User 2

Pilot User 3

Overall, our pilot users demomstrated that our app's lack of text made them confused about what they were supposed to do. User 1 mentioend that she didn't want to be kept guessing about what each button did. The lack of text on each page also kept each user guessing as to what they were supposed to do on each page and made it unclear as to what each page was supposed to accomplish. Most of the users also reported that they would have preferred for a space to write down thoughts in a journal style format. We aimed to address that issue in the next prototype with our next group of users. Our pilot users also helped us to remember certain errors that we overlooked as well such as pressing the submit button when she did not intend on completing the action. This round of testing also allowed us to explore what our users thought each function was supposed to accomplish based on their actions and some feedback at the end of their test. With these new insights, we made changes to our prototyped and began testing with another round of users.

4/6/14, User Testing

User 1

Demographic information: First-year. As a test user, this user was hesitant to think aloud. It was harder to gauge the cause of their confusion or motivation in pressing certain buttons compared to testing our pilot users who - as part of the HCI class - understood what was helpful to testers. Therefore, some of our observations also came from asking debriefing questions.

Notes:

User 2

Demographic information: First-year, Linguistics Major

Notes:

User 3

Demographic information: Sophomore, Math Major

Notes:

User 4

Demographic information: Upperclasswoman

Notes:

These group of users provided us with feedback that addressed many smaller issues within the app. Although we had fixed the major issues with feedback from our pilot users, there were still some minor problems throughout the app that we will address in further iterations. The most common error was on the send a friend a message page: users would frequently fill out all of the textual information and click submit. However, they would then see the "add an icon" function and want to add it in. We addressed this issue earlier by providing a page after they had clicked submit to edit their message before they sent it. Users were also puzzled when they encountered the "Write" option on the jounrnal page. We included this button in response to the feedback that we recieved from the pilot users. However, although they navigated through the journal pages successfully, that button made them initially confused about the function of the page. We also noticed that the majority of users chose to complete the game option instead of the breathing exercise. We hope that since we only tested 7 users, a larger testing sample will yield at least one user who may complete it. For now, we will leave the breathing exercises in to provide users with a greater options to de-stess since postiive psychology experiments have shown it to be one of the most commonly used techniques to relax.

There were many more minor problems that our users encountered from this prototype. User 7 additionally demonstrated how the app could be used in a completely different way than what we expected and served as a reminder to include verification statements and other functions to prevent users from encountering problems. As we work on creating the app, we will focus on addressing these problems and others.

Prototype Iterations

Designing our first iteration, we thought carefully about the main tasks of reflecting, sending notes and doing positive psychology exercises that we identified in our task analysis as being essential to improving one's mood on the go. We also focused on the golden rules of interface design. For example, trying to uphold consistency, we laid out both the home page and the first page of the reflection with a main button for a central feature and two differently shaped buttons for less important features. We also laid out the list of Activities and Journal entries in the same format. For the reflection feature we wanted to make a design that promoted closure by highlighting the current step the screen represented, and we also included many alerts to give the user feedback.

Here are some of the main screens of our first iteration:

Created with the help of HTML Table Generator

Overall, after our initial user feedback, our main takeaway was that we needed to make the purpose of various features in our app clearer. The three pilot users indicated that they were unsure of what to do to complete our given tasks, or that they were unaware of the intention of parts of our tasks such as the relaxing portion of our guided reflection. They enjoyed our features, but they felt lost because of the low learnability of our interface. To achieve greater learnability we focused on making the purpose of each icon self-evident, adding instructions or motivational explanations to each page, and making our physical materials better for a smooth testing experience.

First, to make our icons clearer we examined which icons were too similar to other icons currently used in other applications. For instance, a user pointed out that our "Journal" symbol is currently used as the "Compose New Email" button in the iOS mail application. As that would make our use of the symbol inconsistent with the user's expectations, we found a custom symbol that looks more like a book to represent the user's journal in our app. We believe this more obviously conveys that the journal is a log or diary-like place for writing.

In a similar vein, some of our icons were unclear to users simply because the underlying concepts were too novel to explain just with a picture. Our section of positive psychology exercises for instance is hard to capture with a common image as users do not generally have an experience with this form of exercises. We find it difficult to find terms that do not suggest to the user that these exercises will be physically demanding or overall stressful or time consuming. The diction of "exercise" or "activity" can often mean something that to a Wellesley student would not be stress relieving. Similarly, when we think of pictures for "Exercise" or "Activity" they are often of active things like running or seeming to be "doing" something. Hence, we decided to just use a smiley face as our first iteration icon to indicate that something positive was meant by this category. Users found this too vague and were not excited to learn by exploring the feature. Therefore, we decided to compromise by trying to find a slightly more descriptive symbol, but also adding an explanatory label. Along the same lines, we changed the "Game" button in our "Play" feature from the "Club" cards symbol to a picture of dice. We also added a helpful subtitle to this icon.

Beyond making the icons clearer, we added informative sentences on each page to either help the user understand how to use the interface or to explain why they would want to have these features. The distinction between instructions and motivational explanations is important because of the unfamiliar domain of our app. Many students are not aware of the findings of positive psychology: hence, our pilot users felt lost as to why we would ask them to do certain things. Therefore, we added some notes like, "positive psychology suggests..." to some screens that were confusing to users.

Rather than making these instructions some sort of tutorial or opening message, we decided to include them in every page to help with learnability and to decrease the need for memorability. If our app is intended to reduce stress, a user should not return to the app after some time and feel pressured to remember the features. It should be self-explanatory enough for the user to enjoy whenever they are on the go and think of using HappyBlue.

We also included these explanations in the same place on every screen to uphold consistency. And we also added labels to all icons that were not in the header or footer to similarly promote consistency.

Another feature we added text to was our progression of stages in the reflection sequence. Before we had labeled these stages “1”,”2”,”3” to make a design to promote closure by showing the user's progress. However, the pilot users were not sure what they were progressing through. Adding text clarified this in our next iteration.

Overall, using more precise iconography and descriptions - even by clarifying the text we had already included - separated our iterations. Even our "5 minute de-stress" button was clarified to be a "Guided de-stress" button. We had used a time to try to convey to the user that it would be a quick activity that would be realistic to do on the go, but our pilot users performed the task in less than five minutes and were not expecting it to be a guided activity. Hence, changing the language made the feature more understandable for users as adding text generally did for the rest of our paper prototype.

The third issue of making our physical materials more suitable for paper prototype testing was addressed by adding sliders to the "Journal" and "Activities" listings, adding a keyboard display to place over the sceen when we gave the user pen and sticky notes to simulate writing, and adding detail to make our app more realistic. For example, in our first prototype we put in the name "Happy Blue" in our header, but in our second iteration we changed the text to be our more custom logo. Similarly, we added other journal entry dates to the "Journal" to simulate the fact that the user had already used the app and entered things. Both details made our app more visually rich and encouraged the user to approach it like they would a normal app and less as just a task to be completed. It also made blank or empty pages from our initial prototype less confusing: one user had clicked on an "empty" journal entry that was included to show the structure of the page even though no material was there. We also fixed small usability errors in our paper prototype such as the impossibility of closing our selection dialogs if the user opened them in error by adding a "close" symbol to their corners.

Our pilot studies also made us aware of some navigational issues in our app. Some users would have liked more back buttons, even though for most features the home screen is not many steps away. We had thought that including a home button would be sufficient, but to make errors easy to recover from we added more back buttons and made them more clearly labeled.

After speaking with our pilot users, we also heard of other functionalities that users would want to use. They indicated that they would prefer to use the preset options on the go to fill in the reflections, but might like a space to write more. Therefore, we added a write feature to the journal. We also added an edit button to the journal to edit an entry to also improve the user's locus of control.

Another user expressed their desire for an easy way to see similar exercises without returning to the exercises listing. Therefore we added a “See another similar button” which a later user took advantage of.

Last, we were able to iterate the prototype while testing our actual users. After the first two users, we realized that the navigational pattern in our app was not suitable to how users would actually want to use the features. For example, after adding an exercise to the journal, users might want to open the journal when the alert appears that informs them, "This has been added to your journal." Therefore, we changed the alert that appears to say “Ok” or “Open Journal,” which was more suited to our other testers. Additionally when users did not choose to open the journal, we redirected to the main activity page rather than the home page. Along the same lines, we had not thought about where the user would be directed if they chose to edit their reflections during the "Guided De-stress." Some of us had envisioned allowing the user to edit the input on the edit page, but we decided that going back to the reflection page to edit the material would better uphold the feeling of closure in the sequence. Last, we noticed that few users seemed to notice the "Write Your Own" option that appears in the selection box. We moved that option to the top of the selection list for our final tests. Although users still chose from the pre-set options, they did notice the "Write Your Own" feature in the list.

Resolutions

Learnability:

After our first iteration, we discussed how we were going to make the app more explanatory. Overall, we went from a minimalistic design with little text to a design that accompanied each icon outside the header and footer with text and featured an explanation or motivational information on each screen. Since our user testing also included a brief introduction to the domain of our application, users seemed confident about the app without any sort of initial explanation of the app other than the text on the homescreen. However, we would still like to explore whether there should be some sort of introductory, explanatory modal that appears over the screen the first time the app is opened. We would hope to test this in our next design stage.

Clarity:

In our second iteration, it was effective to have text to explain the icons, and overall a less minimalistic design.The users had less confusion operating the app compared to the pilot testers. Therefore we will preserve the greater amount of text. Having updated and less ambiguous icons that were more relevant to our domain made the functionality of the app clearer and did not remind the user of erroneous functions. However, we will still strive to develop more unique or appropriate icons for certain difficult to capture concepts such as our “Exercises” button. We are still unsure of how to represent this "Exercises" button because the common representation of exercises or activities often looks more active than we want to convey these positive psychology exercises are. Our less specific icon that was just a smiley face was very confusing to pilot users, but we also did not provide explanatory text in that iteration. Possibly returning to a more abstract icon but relying on the label underneath will give the user a clearer impression of the category. Alternatively, we can establish the purpose of some icons by how our navigation works. By allowing the user to open the journal after adding an exercise to the journal, they learn there is a journal feature. Therefore, when they return to the home page, they will be more likely to know what the journal icon represents even though it is unlabeled.

Similarly, we noticed that using very specific language such as that on the “Guided De-stress” button helpful to users. We resolve to concretely convey concepts and be aware of what our word choice implies in the next stage of our design. For example, two users commented that they didn’t realize the “Health” and “Academic” categories in the “Exercises” sections were buttons. Especially, one said they were confused by the word “Academic.” We could try using alternate language such as "Physical Wellbeing" and "Mental Wellbeing," or we could change the explanation on the “Exercises” page to explain that there are two categories of exercises focusing on different domains that can be switched between.

Another place to explore clarity would be in the use and placement of the "Write" button on the journal page. Some users felt confused about the purpose of the journal because of this button. We might consider moving the button to the bottom of the screen to show it is an extra feature and not necessarily the main purpose if users would just like to read the records from their reflections and activities. We could also move the "Write" button onto the specific journal page.

Navigation:

We can improve the navigation in our app by allowing the user to open their journal after being notified that an activity has been added to it, by redirecting them to the first page of reflection data entry if they click edit, and making the standard navigation of the "Exercises" section return the user to the "Exercises" listing rather than the home page. These navigational choices will be closer to what users were trying to achieve rather than what we chose to simulate.

Error handling and editing:

We noticed that we had not thought about form evaluation in our main reflection feature when one user prematurely clicked the "submit" button without filling anything out. This error is partially mitigated by the fact that the user is then directed to an edit or confirm page where they are allowed to change their responses, but we would also like to add an error message that requires the user to add at least one value on the first page before being allowed to progress to the edit page. Similarly, we should add form evaluation to our send feature to make sure the user enters at least an email address and message. We noticed that one user added a BCC email when she got to sending the email, which we think supports our decision to move out of the app to the user’s own email agent at that point. This will allow the user to edit their message in the email program and use whatever normal functions their mail agent allows. We have included an alert to confirm whether the user is willing to leave the app.

Memory Load:

Another issue we observed was the keyboard or typing interface overlapping the reflection question the user is currently answering. When the user reaches the third question at the bottom of the screen, in our non-scrolling interface, the keyboard covers that question. In our actual implementation, we would like the current question being answered to appear as a pop-up above the keyboard or selection menu so that the user can remember what question they are answering. This will lessen the load on their short term memory.

Users also expressed that they would not remember their friend's email addresses easily, or even know the full name of their friend. If we could have access to the Wellesley directory or to their contact book, we could lessen the user's cognitive load by suggesting or filling in emails.

Video

A run-through of our three tasks:

If your browser does not allow you to see the embedded video, please click here to view it on YouTube.

Storyboards and Designs

Design Sketch 1: Simplicity is Perfection

Click to Enlarge:

Design Sketch 2: Feature Rich

Click to Enlarge:

Scenario 1

Chloe is a sophomore who has an 8:30 Spanish class in Founders, and she can never seem to get to breakfast beforehand. Her friend Alice gives her a banana during class, and she eats it on the way to her 9:50 biology lecture in the science center. At eleven she rushes to the science library to work on a Spanish essay that’s due that night at 5pm. She feels lightheaded, and she knows she should eat, but she decides there is just too much to get done. She pulls out her cellphone to check if her partner for her biology lab has emailed her about when to meet to finish their lab report that’s due tomorrow. She sighs when she sees the twenty unread emails in her inbox, and her head starts to throb. Suddenly, she remembers a positivity app called HappyBlue she installed on her phone. Chloe's RA recommended the app since she’s noticed how stressed Chloe is this semester. She suggested to Chloe that maybe classes aren’t always the most important thing if it means sacrificing her mental health. Chloe opens the app because she knows her RA is right: she should be able to fit happiness into her day. Standing outside the gate to the science library, Chloe presses the "Reflect" button on the app's home screen. A new page appears with a soothing image and the instruction to “Take five deep breaths.” Chloe feels her head start to clear as she follow’s the app’s guidance. She presses the “Begin” button when she is finished. A series of screens appear that ask her to enter things she is happy about like, “What happened today that made you smile?” She remembers her friend telling her a joke as she handed her the banana during Spanish class. Before she knows it, she feels the corners of her lips tugging upwards into a smile. When she’s finished answering the three questions, Chloe sees all of her responses. Then the app directs her back to the home page. Chloe remembers that you can send messages with the app, and she decides to tell her friend how thankful she was for her support that morning. In the message she also tells her friend that she’s going to the Lulu to eat lunch, and she’d love it if her friend would join her. She decides that she might not get quite as much work done on her laptop in the dining hall, but she knows she’ll feel less stressed on a full stomach.

Scenario 2

Nicole’s senior year has been great, but now she’s in her second semester, and everything seems to be happening too fast. She’s overjoyed that her economics major has landed her a job at a boutique firm, but she feels like she’s finally realized what a unique place Wellesley is. At lunch, she’s sitting by herself after everyone has headed off to their classes, and is clicking around HappyBlue. Every morning during breakfast this week she has entered three positive things into the app, trying to capture as many of the special things that happen at Wellesley as possible. She’s also used the activity feature to find new things she’s never thought of before. Reading through her HappyBlue journal, she sees a note about her experience studying in the art library for the first time last month. She was shocked to find out what a beautiful space she had been missing. Inspired, she goes to the “Together” section of the app and chooses the “Create” option. She makes an activity for the next day for people to go exploring through campus. She wants to find out if there are more secret spaces that she’s overlooked. Before she closes the app, she goes to the “Reviews” section of her profile and skims through her notes on other activities she has enjoyed. Reading her descriptions of finally eating the Green Tea ice cream in Tower dining hall and attending an open tower event at the Carillon, she feels comforted that she’s using her final time at Wellesley in a meaningful way.

Scenario 3

Mary is a firstyear and has spent the majority of her first semester working alone in her dorm room. She hears that lots of orgs have meetings with free food or interesting lectures, but she's intimidated by going alone because she hasn't found a group of friends she feels comfortable with. Sometimes she's felt homesick and lonely. Recently, however, she’s been hanging out with some people she met through HappyBlue. After downloading it from a suggestion by a hallmate, she was ecstatic to find that people were hosting events around campus looking to promote healthy, academic, or fun activities. Last week when she was looking to find some people to study with, she opened the app and selected the icon with the group of people on it. She tapped the academic category and began scrolling through the various study groups that people were hosting on campus. She quickly found that a group of classmates were studying together in the science center and tapped the event to add it to her current activities list. Yesterday, she selected the fun category and discovered that there was a group of people gathering in the Stone Davis third floor common room to watch one of her favorite television shows. She added herself and had fun bonding with other fans of the show at the event. Later that night, she remembered that she could review the event so that the app could remind her of all the positive progress she's made over time. After selecting the profile menu and clicking the review tab, Mary scrolled through the past events that she attended and selected the television night event. The app asked her how she felt attending the activity, if she would like to do it again, and when she completed the activity. After answering these three questions, she saved it and began to reminisce about how much fun she had at the event. She was so happy, she made plans to meet with the people she met to watch another episode. They have already begun chatting over email about their favorite moments from the show. Mary has a feeling that she has finally found her niche at Wellesley.

Storyboards for Scenario 1

Click to Enlarge:


Alternative, Pop-up and App-focused storyboards


User Analysis

Team members

User and Task Analysis

Initial User Data

To begin our analysis we interviewed users. We asked variations of the following questions and produced a table of information.

Questions and Topics Discussed with Users:

  1. Do you feel stressed right now? On a scale of 1-5 how stressed do you feel? (See if they differentiate between stresses)

  2. Can you demonstrate what you would do if you became academically/socially stressed?

  3. If you wanted to find an activity to help you relieve your stress, can you demonstrate what you would do?

  4. If you know your friend is stressed, can you demonstrate what you would do to make them feel better? Do you feel better after you check in with your friend to make sure they’re okay?

  5. Do you practice some sort of reflection (meditation, reflection, religious activity)? If yes, can you describe when you do it? Do you do this when you're stressed?

  6. Think of 3 things that you’re happy or thankful for. (Participant doesn’t have to tell you what they are) On a scale of 1-5 how stressed are you now?

User Feedback:

Interviews were conducted in the Science Center while students were working, conditions that are likely to produce academic stress and an on-the-go representation of where a mobile app would be useful.

UserInitial Stress (1-5)Stress at End (1-5)Do you reflect to relieve stress?How to help a stressed friend?Can you think of three happy things? Do you feel better?What do you do when stressed?What do others do when stressed?Do you differentiate between types of stress?How do you find activities to destress?
12.52NoSend Facebook messageReported three happy things aloud. Felt better.Exercise, do an activityProcrastinateNoMakes own activities
26 (partially joking, then reported 3)"less stressed"Yes, positive feedbackPost happy pictures on their Facebook wall, send .gifsThought of three happy things. Described feeling better.Take deep breaths then start working on workUse internet sitesYes
37-8 (above 5)"a little bit less stressed", 6NoSend text message or call friendThought of three happy things. Smiled.Start doing the homeworkMostly it's all academicAsk others about activities
42.52Yes, for social situationsThought of three happy things. Felt somewhat better.In social situations, meditate. Clean room, exercise.Yes
53.5"Now I'm not thinking about stress, I'm less stressed."NoSend buzzfeedThought of three happy things. Reported no longer thinking about stress.Start workingWatch Netflix, stay in dorm room, avoid workYesFriends recommend activities
63.5"less stressed"Yes, positive feedbackThought of three happy things.No
722NoSend textHad difficulty thinking of three happy things. Did not report much difference.Call mom. Talk to a friend.No
ConclusionsMost users reported feeling less stressedOverall, users reported feeling less stressed. They emphasized that thinking about something other than their stressful activity was beneficial.Users reported using mobile apps to reach out to stressed friends. People reported that helping friends made them feel better. Users had to be committed to really thinking about the three things in order to feel better. The user who reported what they were thinking of aloud felt more of a change than those who just rapidly thought about them. Users did not really report what they would do in the Science Center the moment they were stressed even when the interviewer asked, “Can you demonstrate what you would do right now when stressed?” Many students seem to work despite anxiety.Users reported getting activity suggestions from other students and creating their own activities.

Created with the help of HTML Table Generator

  1. Users

  2. Analyzing users, we see that different class years and personalities will experience different types of stress and respond to different strategies to alleviate that tension. For example, first year students face homesickness and would be more likely to feel social stress as they seek to find a community away from their permanent residence. As the years progress, students have higher levels of academic stress. Senior students feel the pressures of making choices that impact their future careers. Davis Scholars experience the social stress of feeling distinct from the rest of the student body. Students with disabilities or illnesses have challenges related to personal wellness. Generally, all students are likely to experience some mixture of social, academic or personal stress. To combat these types of stress, students with introverted or extroverted personalities will respond differently. Students who are more introverted may prefer reflective strategies versus extroverted students who prefer community or peer based strategies. In order to capture the cross sections of these various factors, we describe personas of the “Introspective User,” the “Community Oriented User,” and the “Activity or Event Oriented User.” Additionally, special circumstances related to class year are discussed in “Growing User,” “Future Focused User,” and “Nostalgic User.”

    1. The Introspective User:
    2. Karla is a sophomore economics major with long problem sets due each week. She works on her problem sets in her room. She prefers to work in solitude and considers herself an introvert. She’s not a frequent user of Facebook or social media. She doesn’t tweet on Twitter, but she likes business news like the Wall Street journal. She doesn’t have a lot of time to go around, and normally she just pushes through stress and continues to work. Even though she feels anxious she tells herself she will feel better when she gets things done. Recently she’s thought of reducing her stress rather than ignoring it. She therefore uses Happy Blue to record three things she is happy about when she is feeling stressed. This allows her to reflect personally on positive aspects of her life without taking up too much valuable time. She likes the private feeling of journaling and being able to look at her reflections over the course of the semester. Occasionally, she likes to find tips or quick activities such as visiting websites that she can do from her computer.

    3. The Community Oriented User:
    4. Rachel is a first year student and hasn’t quite decided what her major will be. She is currently leaning toward biology but has become interested in art history lately. Although she has made the majority of her friends though classes and organizations, she is still looking for her niche in the Wellesley community. Because she is a first year, she doesn’t have too much academic stress and is unsatisfied with her current social situation. Socializing is her method of relieving stress as well as spending time with her friends on weekends. She regularly enjoys the events that house council and other organizations put on but wants to find intimate events in which she can make some close friends. There are so many things happening on campus both formally and informally, but she doesn’t know how to find them. Recently, she has downloaded the app HappyBlue and enjoys the social aspect of the app the most. Although thinking about three things that make her happy and reading about tips are helpful, she loves that she can scroll through different events happening on campus and choose what she wants to go to. The best part about the social events aspect is that some of the events are just a few people getting together to watch a TV show or spontaneously bake cookies rather than huge organized events that sometimes makes her feel like a number. Additionally, she enjoys providing feedback on events that she has attended and seeing more events that she is interested in.

    5. The Activity or Event Oriented User:
    6. Emma is a Davis Scholar who previously worked for Teach for America before coming to Wellesley, and she is an active volunteer on and off campus. She was inspired by her work to learn more about empowering women through education. She envisions using the same techniques present in the Wellesley culture to foster a constructive environment in her own classroom. At first, Emma was worried about being able to connect with other Wellesley women. Although her peers are only a few years younger than she is, her off-campus connections and other commitments made her nervous about joining in on-campus life. Luckily, she downloaded HappyBlue and found she could create and share events on-campus to allow her to meet other students. She finds that caring for others is the best way for her to relieve her stress, and she loves to bake cookies for her friends, send them encouraging messages through texts and Facebook, and surprise them on their birthdays with gifts. Now, she can care for others in a Wellesley-oriented setting by sending encouraging notes to her Wellesley peers through HappyBlue and inviting them to join her cookie baking events. Emma also loves the positive aspect of the app and recommends it even to her off-campus co-workers who are stressed by their jobs.

    7. The Growing User:
    8. With the excitement of orientation and the break-neck speed of the first few weeks of class, Joann didn’t have time to feel homesick. Now, during a week with two midterms, she tells herself that her first year is going terribly, she’s miserable, and that everyone else is smarter than she is. Joann usually enjoys studying and would happily work in her room, but her roommate constantly plays loud music. Joann is shy, and doesn’t want to offend her roommate, who she considers one of her only friends. Her RA seems friendly enough, but Joann doesn’t want to bother her with any problems. Another first year on Joann’s floor sends her a note from HappyBlue, wishing her good luck on her midterms. Feeling better, Joann joins HappyBlue too, and sends the other student a note through the app about having dinner together. They meet, and Joann realizes that the other student feels just as overwhelmed. Together, they make plans to hang out more often. Meanwhile, Joann discovers that HappyBlue has a whole range of positive psychology training activities that allow her to process her homesickness and look on the brightside. Plus, the app has encouraging tips like, “Wellesley women can do anything, but they don’t have to do everything,” that make her realize that many other Wellesley students are also fighting to diffuse their stress.

    9. The Future Focused User:
    10. Amanda is a second semester senior who is excited to be graduating in the spring but also apprehensive about her job prospects. The job market has been difficult and there have only been countless articles describing her dwindling job prospects. Between psets, midterms, and her thesis, all she can think of is how she is going to get a job when she graduates. She feels guilty if she spends a moment away from her work so she needs a way to relieve stress without taking too much time. After downloading HappyBlue, she starts reflecting on the things she was thankful for. Although she doesn’t have time for events, she finds that the websites and tips that the app suggests have been helpful when she can spare a minute to do them. The positive psychology strategies that it offers have helped her approach her tasks with less stress. Being able to see her stress levels decrease over time has also been a method of relieving stress.

    11. The Nostalgic User:
    12. It seems like only yesterday that four long years were stretched out in front of Elizabeth, but now she’s a second semester senior dragging her heels to stay in the Wellesley bubble. She tells her friends she won’t survive in the “real world” despite that she is on track in her classes and already has a “real job” lined up for her after graduation. There’s something about change that daunts Elizabeth, and she is keenly aware that the moments she has at Wellesley now are coming to an end. Thankfully, activities in HappyBlue teach her positive psychology strategies for savoring the present. She uses the feature of recording what she is happy about to journal her experiences: although they will be over soon, they will be immortalized in her HappyBlue diary, so she can look back on them if the future does get rough. Moreover, the positive psychology strategies encourage her to abandon her underestimations of herself. She feels affirmed that she will leave Wellesley with strategies to be happier her whole life long.

  3. Tasks

  4. To help Wellesley students increase their level of happiness, we have identified five high level-tasks:

    1. Increase positivity by daily remembrances.
    2. Share happiness with another person.
    3. Find happy activities.
    4. Evaluate happy activities.
    5. Monitor progress toward a happier state.

      1. Following is a hierarchical analysis of these five tasks.

        1. Task 1: Increase positivity by daily remembrances.
        2. The first goal of our users is to be aware of their current happiness. Positive psychology suggests that focusing on what a user is content with already will increase their happiness and decrease stress. Therefore, a goal of our app is to motivate reflection or remind users of their current happiness. In interviews with users, we did not find that stressed students currently use positive psychology strategies to reflect on happiness. Thus, to find the behavior we would like students to use, we consulted studies on positive psychology. In their study on gratitude, Emmons and McCullough found positive results after users reflected and wrote down five things they were grateful for each day (379). Exercises on “Zone Positive” also instruct users to write down their happy thoughts, saying, “Record your blessings for the next 7 days. Each night before you go to bed, reflect back on what went well during your day. This could be anything significant or trivial. Use a notebook or journal and record events, people, strengths etc. that you were especially thankful for during this day” (“Bedtime Blessings”, 1). Finally, Martin Seligman, considered by some the father of positive psychology, also describes a practice called the “3 Blessings Exercise” which similarly emphasizes identifying positive aspects of the subjects day, but also insists that determining why this positive thing occurred has an effect (Seligman). Hence, the task could involve this extra step of explanation.

          Overall the first task can be described as:

        3. Task 2: Share happiness with another person.
        4. The second goal of our users is to share positive messages with friends. This act of sharing a happy or positive message has two purposes: to contribute to the happiness of others and encourage a prosocial behavior (as found by Dr. Ed Diener in his studies on positive psychology), and to reflexively contribute to their own happiness and decrease stress by developing and creating optimistic thinking, as described by Dr. Michael Fordyce in his work “Psychology of Happiness.” Fordyce also identifies one of the fundamentals for happiness as working on a healthy personality, which compliments Diener’s studies that show that the enjoyment of activities and social interactions provide a positive effect. ("What")


          Click to Enlarge:

        5. Task 3: Find happy activities.
        6. The third goal of our users is to find happy activities. These could include either events or simply actions that increase positivity like practicing yoga or learning a positive psychology strategy. Considering what we observe from current Wellesley behavior, students look at spam boards and emails or email conferences, ask friends, or create events themselves. Activities could include student organization event/activities, college events/activities, meals with friends, exercising, study groups, movie viewing, and more.


          Click to Enlarge:

        7. Task 4: Evaluate happy activities.
        8. Again building off the expert advice of positive psychology, we note that making conscious decisions to pursue happiness increases positivity (Medlock). One resource on positive psychology describes this goal as, “Mak[ing] daily decisions about how to bring happiness into your life" (“What”). To help our users to increase their positivity, we hope to foster the review of the events or actions the app encourages to see if they did in fact produce happy results. Consulting others and sticking to a decision can lead to overall increased satisfaction with decisions (Tasler). Therefore, a high-level task for our application is reviewing happy activities.


          Click to Enlarge:

        9. Task 5: Monitor progress toward a happier state.
        10. The fifth task of our users is to monitor the progress toward a happier state. According to “Steps for Happiness in Positive Psychology” one of the main approaches to becoming happier is “Evaluat[ing] your progress toward your outcomes” (“Steps”). This involves both being able to deal with discouragements and to acknowledge advances. The user would need to assess their current progress toward the goal of a happier state by remembering their emotional state in the past and comparing it to their current one in order to reflect on any changes in their approach and mental state. Considering the opinions of others would provide the user with an objective point of view, providing a more holistic evaluation. The user should ultimately be able to reflect on changes over time, and decide to create new goals.

          Click to Enlarge:

      2. Domain

      3. Click to Enlarge:

Works Cited

  • "Bedtime Blessings." Zone Positive Blog RSS. Zone Positive, n.d. Web. 24 Feb. 2014.
  • Emmons, Robert A., and Michael E. McCullough. "Counting Blessings Versus Burdens: An Experimental Investigation of
  • Gratitude and Subjective Well-Being in Daily Life." Journal of Personality and Social Psychology 84.2 (2003): 377-89.
  • PsycARTICLES. Web. 24 Feb. 2014.
  • Medlock, Ph.D. Lisabeth Saunders. "10 Decisions That Will Make You Happier and Healthier."
  • The Huffington Post. TheHuffingtonPost.com, 05 Nov. 2013. Web. 26 Feb. 2014.
  • Seligman, Martin. "3 Blessings Exercise." Positive Psychology Resources, Happiness, Tips and Techniques. Centre for
  • Confidence and Well-being, n.d. Web. 24 Feb. 2014.
  • "What is Positive Psychology?" Positive Psychology. N.p., n.d. Web. 26 Feb. 2014.
  • Tasler, Nick. "Make Good Decisions Faster." Psychology Today. Sussex Publishers, 24 July 2013. Web. 27 Feb. 2014.