Tream Crowdsourcing Teamwork makes the dream work

Raymond C (Developer) Osama E (Group Manager) Vivian N (Designer)

Quick Links

1. Problem and Solution Overview 2. Tasks & Final Interface Scenarios 3. Design Evolution 4. Major Usability Problems Addressed 5. Prototype Implementation 6. Summary

Problem and Solution Overview Have you ever had a project in mind, but haven't had the skills or manpower necessary to accomplish it? Do you need the help and support of a team? Tream Crowdsourcing is an app that helps people crowdsource projects by connecting them to people with diverse skillsets. The goal of Tream is to make it as simple as possible for teams to form and collaborate. Aspiring project creators and visionaries begin with an idea. Then, individual contributors explore projects that align with their interests and skillsets. If the individual wants to contribute to a project, they can apply and the project creator can hire said person. Hence, the person is no longer an individual, but a part of team. Our app aims to redefine how teams are designed and created and how they will work together in the future.

Tasks & Final Interface Scenarios Task 1 - Starting a Project (Simple Task). Every project begins with a simple vision that will become the impetus for action. Therefore, our app ensures that the barrier to entry of starting a project is as low as possible. The option to “Start a Project” is easily accessible from the homepage, and all the project creator needs to begin is an idea along with the skills probably required to carry out that idea.

Figure 1. Storyboard for Starting a Project Task 2 - Joining a Project (Moderate Task). After a project has been created, individuals need to be able to join. The purpose of our app is to bring people of diverse skillsets to work together as a team on projects that interest them. Therefore, it’s crucial for individuals to be able to browse through different project genres and to search for projects to see which projects they would want to work on. They can apply to as many projects as they would like, and the project creators can accept or reject their applications.

Figure 2. Storyboard for Joining a Project Task 3 - Working as a Team (Complex Task). Finally, after a team has been created, the team members need to be able to work together in order to complete the project. This is the essential feature of our app because it allows individuals to function as a team. Our goal is to capture the key aspects of working together as a team while still keeping our app simple and intuitive to use. Therefore, we decided to focus on the two things that make up teamwork: communication and division of labor. Team members can easily communicate through messaging channels on Slack (an app to which members are redirected), and our app also helps members keep track of what tasks need to be accomplished, who will carry those tasks out, and by which date each task needs to be finished. This is an innovative way of organizing teamwork so that team members don’t have to be in the same physical location to work together.

Figure 3. Storyboard for Working as a Team

  Design Evolution Through needfinding, we were able to identify different people’s point of views about crowdsourcing and how crowdsourcing applications or techniques affect their lives. From there, we brainstormed solutions to improve crowdsourcing. An innovative idea we had was that the people we crowdsource from need to feel a sense of connection to the project. Furthermore, they need to feel like they’re a part of a team. Therefore, we came up with the idea to design an application that allows people to create or join projects they’re interested in and to work with a team to complete that project. We began by sketching out storyboards for the three main tasks our application would enable (Figures 4-6). All of our sketches are for the mobile phone since we want our application to be easily accessible no matter where a person is.

Figure 4. Storyboard for a simple task - Starting A Team

Figure 5. Storyboard for a moderate task - Joining A Team

Figure 6. Storyboard for a complex task - Work As A Team

After completing our sketches, we received the feedback in studio that our “Start a Team” and “Join a Team” tasks are intuitive and easy to follow, but our “Work as a Team” task was a bit difficult to follow. Taking that feedback into account, we created our low-fi paper prototypes (Figures 7-9). This time, we would be testing on users to see if they were able to complete our tasks with minimal guidance from us. One team member simulated the actions of a phone and switched “screens” whenever a user pressed a button.

Figure 7. Low-fi Paper Prototype - Start a Project Task

Figure 8. Low-fi Paper Prototype - Join a Project Task

Figure 9. Low-fi Paper Prototype - Work as a Team Task

Through multiple user tests and iterations between user testing, we found that most users agreed that starting a project and joining a project was quite simple. It was also easy to begin those tasks from the homepage (Figure 10).

Figure 10. Homepage

What users found to be difficult, though, was the beginning the third task: working on the project. From the homepage, users would have to click on their picture in the upper left corner to navigate to all their current projects and all other information pertaining to them. Therefore, we knew that we had to fix this usability problem. In studio, we were given the advice to change our homepage. In our paper prototype, it had been a scrollable list of trending projects and project genres so that people could browse through projects on the app, but we realized that this design isn’t efficient. If a user wants to easily work on a project when they open the app, they should immediately be taken to a list of their current

projects. Therefore, we decided to make this major design change in our medium-fi prototype, which we created using proto.io. Furthermore, we decided to simplify the task. We wanted to capture the core aspects of working as a team. In our medium-fi prototype, we changed our homepage to a list of current projects, and users can easily start or join a project from the homepage as well. We also made sure to address other minor usability problems, such as consistent nomenclature for buttons in our app, as we moved from paper to medium-fi prototype (Figures 11-13).

Figure 11. Medium-fi Prototype - Start a Project Task

Figure 12. Medium-fi Prototype - Join a Project Task

Figure 13. Medium-fi Prototype - Work as a Team Task

  Major Usability Problems Addressed From the heuristic evaluation of our medium-fi prototype, we discovered that there were six major usability problems we needed to address going into our hi-fi prototype. The first problem was a [H2-1: Visibility of System Status] violation. When users want to join a project, they can fill out an application, but once they’ve done that, there is no easy way for them to keep track of their pending applications. If they happen to click on a project they’ve applied to, then they can see that they’ve applied to it, but we wanted to make it easier for the user to keep a list of projects to which they’ve applied. Therefore, our hi-fi prototype includes an “Activity” option on the slideout sidebar menu. If, at any time, the user wants to see what applications they’ve submitted, they can look on their “Activity” page (Figure 14). Furthermore, they can also see other users’ applications to projects that they have created. They can review those applications, and if they choose to hire the person, then the person will receive a notification that informs them that they have been hired for the project.

Figure 14. Before (Leftmost Screenshot) and After (Two Right Screenshots) In our hi-fi prototype, you can now view a list of pending applications.

Another problem that was brought to our attention was a [H2-3 User Control and Freedom] violation. It once again pertains to project applications. Users aren’t able to delete applications to projects once they have submitted it. Therefore, we made this change in our hi-fi prototype in case a user decides they no longer want to join a particular project. By going to their list of currently pending applications, users can easily click on a project and choose to delete their application to it (Figure 15).

Figure 15. Before (Left Screenshot) and After (Right Screenshot) In our hi-fi prototype, you have the option to withdraw a pending application.

We also had a problem that was a [H2-4 Consistency and Standards] violation. In our medium-fi prototype, we didn’t have a textfield to enter the project name when starting a new project. Since the project name is necessary for any project, we fixed that for the hi-fi prototype (Figure 16).

Figure 16. Before (Left Screenshot) and After (Right Screenshot) In our hi-fi prototype, there is a place to fill in the project name.

We also found that there was a [H2-7 Flexibility and Efficiency of Use] violation. A creator of a project should be able to delete a project if they so choose, but team members shouldn’t have this capability, only the project creator. Therefore, project creators see something slightly different than what team members would see when they click on the project (Figure 17).

Figure 17. Before (Left Screenshot) and After (Right Screenshot) In our hi-fi prototype, the project creator sees the option to delete the project and the

option to view applications to their project. Before, in our medium-fi prototype, all members had the same project view.

Another violation was an [H2-9: Help users recognize, diagnose & recover from errors] violation. If a user were to submit a “Start a Project” form or an application to join a project with empty fields, they weren’t notified of this in the medium-fi prototype. To prevent this accidental error on the user’s part, we notify them of empty field that must be filled-in in our hi-fi prototype (Figure 18).

Figure 18. Before (Left Screenshot) and After (Right Screenshot) In our hi-fi prototype, there is an error message if required text fields aren’t filled in.

Finally, the last problem addressed was a [H2-9: Help users recognize, diagnose & recover from errors] violation. In our medium-fi prototype, users couldn’t edit calendar events of things they need to complete for the project very easily. They also couldn’t remove events. Therefore, we made sure to fix this in our hi-fi prototype. Furthermore, we also decided to call the list of things a team needs to complete in order to finish a project “Tasks,” instead of “Calendar Events.” This makes it more intuitive for the user (Figure 19).

Figure 19. Before (Left Screenshot) and After (Right Screenshot) Our hi-fi prototype has tasks that are easy to edit versus calendar events in our medium-fi

prototype.

  Prototype Implementation

To implement our hi-fi prototype, we used a variety of tools to develop a native iOS app. Coding was done in Xcode using Swift 2.0, which was exceedingly helpful due to more concise syntax compared to older versions of Swift. We used Parse for our backend to keep track of all the projects, tasks, and users, which made backend integration possible thanks to their extensive documentation. We used CocoaPods as a dependency manager to easily integrate third-party libraries into our app and found some awesome tools to create custom loading activity indicators as well as alerts. For beautiful icons throughout our app, we used Font Awesome’s OTF font files. However, not all tools were helpful for our app. In designing our app we strived for flat design, so we thought integrating FlatUIKit would be a good choice. We found integration of flat UI elements from the kit to be harder than expected, so all the buttons and pretty much everything in the app is custom created and rendered through storyboard/viewDidLoad/viewWillAppear methods. In trying to add animations for a smoother and slicker feeling app, we also attempted to use Facebook POP, but it added a lot of complexity so we ended up trashing it. We also attempted to integrate badges using JSBadgeView so that we could have notifications be shown in a pleasing way in the side bar menu, but that also added great complexity and wasn’t very intuitive to use. Lastly, we attempted to use Parse Push Notifications to have real time alerts and push notifications for the app, but were unable to due to the time it would have required. The documentation, in our opinion, although decent, could use a bit of work and simplification. We didn’t use any Wizard of Oz techniques or any hard-coded data. Everything, including the backend was fully implemented and functional. Accordingly, creating and deleting projects and tasks and users in places throughout the app will actually change our database and update data accordingly. One thing that we would like to add in the future is functional Slack integration. For our project, we simulated the loading page for opening the Slack app on the user’s phone when he or she wants to message team members. Lastly, since we learned iOS development for this class, we did not have the greatest fundamentals, so we created some view controllers with fixed size views rather than scroll views where scroll views would have been more handy. This resulted in some of the UI being a little “squished” - for instance the project view page when the application subview is shown, and the project creation page view. Lastly, we would have tested on more device configurations if there was more time, but the app is not likely to render super well on some smaller screens, such as iPhone 4s, due to the fact that some of the views are fixed size views rather than scroll views.

  Summary We created TREAM with a simple vision that team-making should not be the major barrier to achieving your dreams and working on your projects. After brainstorming, needfinding, and iterating countless times over our low, medium, and high fidelity prototypes, we are confident that TREAM is the app to connect you to individuals with diverse skillset to help you form and work in a dynamic team. In our high fidelity prototype, you can start a project, manage a project, search & join other projects, and most importantly, work as a cohesive team with precision and ease. As a project creator and team leader, TREAM makes communication, division of labor, and managing expectations easy and intuitive with a task-based system. If you can dream it, TREAM will help you achieve it!