balancer high-fidelity prototype dian hartono, grace jang, chris rovillos, catriona scott, brian yin

Size: px

Start display at page:

Download "balancer high-fidelity prototype dian hartono, grace jang, chris rovillos, catriona scott, brian yin"

Rosalyn Harper
5 years ago
Views:

1 balancer high-fidelity prototype dian hartono, grace jang, chris rovillos, catriona scott, brian yin Problem and Solution Overview A healthy work-life balance is vital for both employers and employees. Overworked employees may not perform their jobs effectively and may develop long-term health problems. Many workers, including engineers, non-governmental organization workers, and consultants suffer from long hours, high expectations, and an intensely competitive environment. For example, many software engineers work in companies that have rapid development cycles, requiring each worker to put in long hours prior to major product releases. In addition, the perks that many tech companies offer to employees seem to encourage them to stay well beyond the typical 9 5 workday. Employees can quickly find themselves having to adjust to an unstructured schedule, a lack of personal time, and a tendency towards sedentary behavior. Solution To solve these problems, we have prototyped an iphone app that was initially targeted at software engineers, who are prone to long working hours in stressful environments. However, we soon realized that our application appeals to a wider audience and could apply to anyone who wants to improve their work-life balance. Balancer aims to help users achieve and maintain a healthy work-life balance through setting and completing goals that both users and their employers can define. Companies can create goals and activities and reward employees that accomplish them, thus motivating employees to live healthier and more productive lives. This in turn benefits companies themselves, providing a more productive and healthier work force. Goals are accomplished by completing various activities, each of which individually count towards a goal. Balancer incorporates social functionality: users can create goals based on what their friends are doing and accomplish them together. The social aspect of Balancer not only helps users stay connected, but also provides them with more incentive to accomplish the goals they create within the app.

2 Tasks Simple task: Learn about and join a workplace sponsored event With Balancer, users can see workplace-sponsored goals and activities, as well as join them. A defining feature of Balancer is this company integration, so this task is important. We feel that users are likely to join and actually follow through with a company-sponsored goal or activity, as they don t have to come up with the idea for a goal or activity themselves. Company sponsored goals and activities can also be done with other co-workers, increasing users motivation to follow through. Moderate task: Complete an activity invited by a co-worker Users can see what work-life balance activities co-workers have invited them to, as well as invite coworkers to join their activities. Another defining feature of Balancer is this social integration: we chose this task thinking that users are more likely to use the app and participate in goals and activities with other people. The second task is considered moderate because it is not as common as the simple task and it depends on Balancer s prevalence in the user s social circle. This also requires the user to look at their Social page and click on the Invitations button. The user has to decide whether they want to decline or accept an invitation. This task is important, because it demonstrates how users can interact with other co-workers using the app. Complex task: Create a personal custom goal and share it with others We recognize that goals sponsored by users workplaces may not appeal to them; as a result, Balancer allows for the creation of a custom goal. Users can also share this custom goal with friends and co-workers. The third task is considered a complex task because it takes longer to complete and is meant for power users. Lastly, it is much less common than adding an activity or accepting an invitation. We decided to include this as a task because creating goals and sharing it with friends should provide users with more incentive to complete it. This task displays the ultimate goal of Balancer, which is having users customize the application to their benefits and share it with friends. Overview of UI design changes One of the major changes we made in our design was merging the Goals and Activities tabs into just Goals, as we wanted to make it clear that activities are associated to goals. In our third-party heuristic evaluation results, we found out that placing Goals and Activities side-by-side was confusing, as users were confused by the relationship between goals and activities. In addition, we wanted to establish the idea that our app is goal driven and show that activities contribute to goals. We want our users to create goals and achieve them through activities. We created a tree hierarchy in our Goals page so each goal can be further expanded to show the activities that are actively working towards accomplishing that goal. Also, users have the freedom to create a new activity to work towards achieving that particular goal. However, our app does not allow users to add an activity

3 to multiple goals at the same time. Therefore, if users want to add an activity to multiple goals they will need to select a each of the goals and add the activity. This is currently a limitation of our prototype. The Add Goal and Add Activity pages were made more visually appealing, with large images of sponsored goals and activities. We wanted to heavily emphasize this company sponsored aspect of Balancer. We also modified our Social page into a news feed-like layout. The redesigned Social page will show friend s recent activities, goals and sponsored activities and goals, as we believe displaying friends activities/goals can provide users with more incentive to add and complete them as their own goals. Another major change on the Social page was adding the Invitation page and removing the Notifications page to encourage users to respond to invitations from friends by accepting or declining on the page directly. The touch target for accessing this screen was made larger to make it easier to tap. The last thing that we changed from our medium fidelity prototype to our high fidelity prototype is that we added a Today page, which can be quickly accessed through the bottom navigation bar. This is a crucial part of the application as it organizes user s activities, show the upcoming ones for the day, and lets the user edit them directly. We had a similar page in our medium fidelity prototype, but was not made clear, therefore, we want to give this page more attention in our high fidelity prototype. We modified our Progress page to make it more aesthetically pleasing, because the one in our medium fidelity prototype did not present the information in an organized manner. We also removed the sleeping statistics because we shifted the direction of application to activities/goal managing, instead of behavior tracking, which was a focus in our previous prototypes. Major usability problems addressed Here is the list of heuristic violations that were ranked as severity 3 and 4: 1. [H2-2: Match between system and the real world] [Severity: 3] On the Activity Detail screen, the list of attendees is labeled Attending ; however, the user may perceive this as an indication that they are marked as attending the event, instead of realizing that this is a list Figure 1. Left: Old Activity Detail page with the confusing Attending terminology. Right: New Activity Detail page with the Going term and the pink box emphasizing that the people in the profile images are going to the activity.

bar will be giving information about the list of attendees.

4 of the people who have already said they are attending the event (figure 1). To address this problem, we changed the bar to say Going (3) with the number of people going in parentheses and included profile pictures of the friends that are going to reinforce the idea that the bar will be giving information about the list of attendees. We chose this re-design as the solution because Facebook follows this convention for their events and therefore, believed users will understand better with this consistency. The map is also included along with the location information to reduce the additional action of touching the location bar to see the map. 2. [H2-7: Flexibility and efficiency of use] [Severity: 3] On the Add Activity page or the invitations page, the expert user may want to be able to directly add activities that they already know they want to join, instead of making the extra step of opening the activity details (figure 2). To address this violation, since one of the ways users can add activities was through clicking on the goals page, we decided that users can add multiple activities to achieve a goal. This also allows user to directly add the activities instead of going to Activities Detail to add the activity. We prompt the user by using + buttons to indicate to the user they are able to select those activities. We also changed the Sponsored Activities to be a carousel of activities with pictures to encourage users to participate in sponsored activities. Figure 2. Lastly, we moved the Add Custom Left: Add Activity page with inability to add activity from this page. Activity to the bottom to encourage Right: Corrected Add Activity page with + buttons for adding. users to choose sponsored activities and friends activities (which are scrollable) before creating a custom one (fixed on the screen). 3. [H2-7: Flexibility and efficiency of use] [Severity: 4] The expert user may want to add a goal to an activity and add the activity in a single step, instead of adding the activity, opening it, and then editing it (figure 3). To fix this violation, the user can now add a goal to an activity right after adding the activity in one single step. 4. [H2-5: Error prevention] [Severity: 3] Only certain users should have permission to edit certain aspects of an event; for a company-

goal. Bottom: New prototype: Users are now taken to a page to add a goal after adding an

sponsored event, only event organizers should be able to change whether the event is

It isn t clear from the interface whether you re editing that everyone can see whether you

To resolve this issue, we have eliminated the edit button on all public activities and

5 Figure 3. Top: Old prototype: User has to add an activity, see its details, edit it, then add it to a goal. Bottom: New prototype: Users are now taken to a page to add a goal after adding an activity from the social page. sponsored event, only event organizers should be able to change whether the event is public, for example. It isn t clear from the interface whether you re editing that everyone can see whether you re attending, or whether the event itself is public. To resolve this issue, we have eliminated the edit button on all public activities and goals, therefore unless the user himself is the creator of a particular goal/activity, he will not be able to edit it, and the edit button will be replaced by an add button for the users to join the event (figure 4). 5. [H2-4: Consistency and standards] [Severity: 3] On the Activity Detail page, the Location and Attending buttons display information about the

activity. The Goal display mostly looks like the two buttons above it, so the user might expect to be able to click on Goal to view or change their goal.

This will eliminate the confusion and prevent users from tapping on it in the future. 6.

Having a small amount of help available to the returning user could reduce confusion. To address this violation, we could add an initial tutorial explaining to first-time users how to use the app.

6 activity. The Goal display mostly looks like the two buttons above it, so the user might expect to be able to click on Goal to view or change their goal. To solve this violation, we modified the goal description and made it into part of the activity detail between the time and the public event description (figure 4). This will eliminate the confusion and prevent users from tapping on it in the future. 6. [H2-10: Help and documentation] [Severity: 4] The user may want some assistance in understanding how to use the app, or in remembering how to use it if they haven t used it in a while. Having a small amount of help available to the returning user could reduce confusion. To address this violation, we could add an initial tutorial explaining to first-time users how to use the app. However, due to time limitations, this was not implemented. 7. [H2-3: User control and freedom] [Severity: 3] Users cannot add activities to goals; they are required to add goals to activities. However, some users may think of activities as part of a goal, instead of vice versa. Figure 4. Left: The previous Activity Detail screen implied that company-sponsored activities were editable. The Goal box looks like a button. Right: The new Activity Detail screen gets rid of these false implications. Figure 5. Left: The old UI separated goals and activities, leading users to think that they were equal, even though activities were used to achieved goals. Right: The new UI integrates goals and activities into one screen. This was resolved by linking all activities to a single goal and removing the activities page from the tab bar (figure 5). Now, all activities appear as belonging to a goal, eliminating this confusion. We made this decision to clarify the role of activities and how they relate to goals. 8. [H2-3: User control and freedom] [Severity: 3] There does not appear to be a way for users to delete or remove an activity or goal, if they

added it by accident and want to undo. This is not an issue with our UI, but with our prototype. The convention in ios is to swipe to the right to delete items.

[H2-7: Flexibility and efficiency of use] [Severity: 3] Users have to create a goal and then go to the Activity Detail page and edit it in order to add the goal; you can t do it in a different order.

7 added it by accident and want to undo. This is not an issue with our UI, but with our prototype. The convention in ios is to swipe to the right to delete items. However, due to limitations of Axure, we did not implement this in the prototype. 9. [H2-7: Flexibility and efficiency of use] [Severity: 3] Users have to create a goal and then go to the Activity Detail page and edit it in order to add the goal; you can t do it in a different order. You can t create a goal from the Activity Detail page. This was resolved by linking all activities to a single goal and removing the activities page from the tab bar. When tapping on a goal, the list of its associated activities expands. When expanding a goal, an option to add an activity to that goal appears. This eliminates the need to manually link activities to goals, resolving this problem. 10. [H2-2 Match between system and the real world] [Severity: 3] When a user views the Attending list for an activity that they have already added to their personal list, the user does not show up in this Attending list. The user has no indication that they have joined this activity unless they are on their personal activities page. We addressed this issue by showing all attending friends profile picture including the user himself/herself. The user s profile picture will show up in the attending list after they have added the the activity. I. [H2-2: Match between system and real world] [Severity: 3] It is unclear if there is a way to invite only certain people to an event, or whether all events are open to everyone. To resolve this violation, we are making the privacy settings more apparent. For example, under the Volunteer activity, it says that this event is public. The public/ private settings will be different for every user. Therefore, our prototype only shows a version for a particular user. The user is able to select public or private fields to determine if their activity or goal will show up in their friends app. 11. [H2-1: Visibility of system status] [Severity: 3] On the social page, the notifications are shown as a small red button with a number (figure 6). So if the users are on a different page, they may not notice the Figure 6. Left: The old social screen, with notifications for invitations not very visible at the top right.. Right: The new social with more visible invitations.

In addition, we plan to put a red circle with the number of pending invitations on the top right of the Social icon on the tab bar at the bottom.

8 notifications immediately. We resolved this by making the pending invitations number more apparent in the Social page. Now, a bright pink bar appears when there are pending invitations rather than the small red circle as in the previous prototype. In addition, we plan to put a red circle with the number of pending invitations on the top right of the Social icon on the tab bar at the bottom. Other apps on ios follow this convention: for example, the App Store shows a red circle with the number of available updates on the tab bar. 12. [H2-7: Flexibility and efficiency of use] [Severity: 3] On the Repeat and Reminder pages, there are not enough options; if the user wants to select certain days, it appears that they would have to add the same activity several times. Figure 7. The Today screen and the new Add Activity screen. This was resolved by removing the ability to add repeating activities and having reminders for them. This was part of an effort to simplify the app: we felt that this was not a core feature. The new Today screen is in effect a replacement of the reminder functionality (figure 7). As we list previously completed activities in the Add Activities page, users can easily add an activity that they have done in the past. Conclusion Throughout the past couple of days, we incorporated the feedback from the third-party heuristic evaluation into a partial redesign of the interface created for the medium-fidelity prototype. We decided to make the app fully developed for the three specific tasks we have assigned, while ignoring some of the concerns raised at this stage of our prototype, as we feel those would be better addressed in an actual code implementation of Balancer. Balancer s main goal is to help users work hard. play hard, and we believe that this high-fidelity prototype is an important stepping stone to realizing this goal.

9 Appendix: Prototype Screenshots

Team : Let s Do This CS147 Assignment 7 (Low-fi Prototype) Report

Team : Let s Do This CS147 Assignment 7 (Low-fi Prototype) Report 1. Title, each team member s name & role Title: Let s Do This Roles: Divya - Developer. Eric - Developer, manager. Sami - User testing,