In this project, I will design software for project management, and I started from ideation, using sketching to come up with a variety of designs, to creating personas, scenarios, mapping input and outputs of systems, wireframes, and prototypes.
Design problem
Much of the work we do, we do with other people. Be it professional projects, or more complex home activities such as planning a trip or a move, we often need to coordinate our activities with the activities of others, such as coworkers, friends, or family members. Some of this coordination is relatively simple: we can just talk to them or exchange a few emails or text messages. Coordination of more complicated projects, however, often requires more detailed tracking of who is doing what, when individual activities need to be completed, the status of various tasks, and so on.
Sketching
In this part, I focused on quantity rather than quality, I came up with 20 different sketches of the design about how to manage the progress of tasks in a project ?. See the figure below.
- Each member’s progress will be presented on the app.
2. Group members will upload their files or diary log, and the system will evaluate their progress.
3. Group members will upload their files or diary log, and other group members except him/herself will evaluate the progress.
4. Set the target you want to reach every day, and the system will present the effort you need to do.
5. The system will present your progress and others and give you some recommendations to catch up.
6. Present the progress of each task under the project, and show the total progress of the project.
7. Present the progress of the task, and the system will give you some recommendations for the next step.
8. Present the progress of each task under the project, and show the total progress of the project.
9. Present the progress of each task under the project, and the system will present the priority and give some recommendations.
10. The system will present the work plan every day, after one day, the system will present what’s done and undone.
11. If group members are running behind, the system will give you a list of who is ahead of schedule and give you some help.
12. Create a space for discussion, each member can give their advice on how to improve the progress.
13. Dividing project into three types: Inbox, Ready, and In progress and presenting the progress of each task.
14. Present the progress of each task under the project, and show the total progress of the project(in a circle).
15. If group members are running behind, the system will send an alert to the project leader.
16. The system will present the works you need to do to achieve the target every day and present the contribution of each work to the task.
17. The system will present the effort each member needs to do to achieve the target every day and present the contribution of each one to the task.
18. The system will present the works you need to do to achieve the target every day and give you the priority of the works.
19. Present the progress of each task under the project, and show the total progress of the project(in a circle).
20. If group members are running behind, the system will send an alert to the project leader and the system will give the recommends how to redistribute the tasks.
Personas
Next, I thought about the types of people whose collaborative work my system is intended to support. Who are the target users? What are their motivations? What is their educational level? How do they live and work?
Based on the above, I developed 2 personas for my design’s target users. I specified their (1) relevant demographic information; (2) motivations and needs related to the work and goals related to my design problem; and (3) characteristics that represent barriers or facilitators for use of a system.
Demographics
Name: Jason
Age:24
Occupation: research assistant
Location: Seattle, Wash.
Life stage: in graduate school
Motivators
- Working for graduation
- openness: be open to any new technologies.
- Sense of responsibility: try to make everything right and perfect
- High concentration: be concentrated on each project.
Constraints
- Hard to put everyone together in the research group.
- Tend to be too focused to review others' work.
- Need to do his own research
- Lack of confidence in himself
Demographics
Name: Andrea
Age:48
Occupation: programmer
Location: Boston, Mass.
Life stage: married, one child
Motivators
- Chasing professional success
- Working efficiently
- Perfectionism
- Lifelong learning orientation
Constraints
- Rarely use apps to manage projects.
- The workplace is open and easy to discuss with colleagues.
- Have meetings for projects before going off work.
- Never worried about her progress
Scenarios
Based on the sketches and personas above, I created two activity scenarios that demonstrate the envisioned functionality I considered for my design solution. Each scenario included information about the five key scenario components: setting, agents, goals, actions, and events
1. Jason’s scenario
It’s very close to the deadline of the research projects, Jason wants to check the progress of other members in the research group. On the one hand, he has been busy doing his own research, so he hasn’t had time to check their progress, on the other hand, he is the leader of this group, so he has the responsibility to check the progress. He use an app for project management, ProMan, to check the progress of each task. He clicks the icon of the app, the app presents the progress of each task and finds out that someone run a little behind, so he clicks the recommendation, asking the system for advice on how to catch up. The system gives him some recommendations, like asking members who complete every day’s target to help the member who running a little behind.
2. Andrea’s scenario
Andrea’s working efficiency has been a little low since her child got sick, making her worried about her child all day and lack of concentration on her work. Since her progress has been running a little behind, she accepts the advice from her co-worker and installs the app for project management, ProMan, to set goals she needs to achieve every day to catch up. When working on her progress, Suddenly, she gets the call that her child pass out and was sent to the hospital, so she goes to the hospital to check if her child is ok. After listening to the doctor about her child’s condition, she gets relieved. At the same time, her cellphone vibrates to indicate that ProMan send her a message about her progress is running behind. She clicks the icon of the app and the system gives her a list of who is ahead of the schedule and can ask them for help. Since her child is still needed for a companion, she has no choice but to ask one of her co-workers for help.
Mapping Out Inputs and Outputs
In this part, I thought through the kinds of information the system my design will need to take in and the kinds of feedback it will need to provide to users. I developed 5 types of information my system needs as input, and 5 types of feedback it would need to provide users as output. The design description is below:
Design Description:
I try to design a system that can promote teamwork or collaborative work. A project always has lots of tasks to do and it requires lots of members to complete it together. Sometimes, one of our team members maybe run a little behind because of family affairs or sickness, and we need to know the work progress of each member to decide whether we should give some help. To sum up, I want to design a system that can push the team members to work together and can help each other when it’s needed.
Inputs
1. Today’s target: the user needs to set the target every day. It can be entered by voice or text.
2. To-do list of every day: the user needs to write every day’s to-do list to determine what to do.
3. What you’ve done today: the user needs to upload your work every day to evaluate an individual’s progress.
4. Calendar: uploading from another app, the information contains the deadline of the project and the date of the regular meeting.
5. Problem: when the system finds that someone running behind, it would request the problems you are facing and provide them to other members for a solution.
Outputs
1. The priority of today’s work: after entering today’s to-do list, the system will present the priority of today’s work.
2. The alert of work progress: after uploading what you’ve done today, the system will evaluate the gap between the target and the progress and send an alert if you run behind.
3. Messages for help: if the system finds that someone’s progress runs behind, it will send messages to members that are ahead of schedule for help.
4. The progress of each task and the total progress of the project: every week or every month, the system presents a graph of everyone’s progress and their contribution to the total progress of the project.
5. The recommendations: when the system finds someone’s progress runs behind, the system would present the recommendations to help out.
Wireframes
Based on the inputs and outputs I identified in the last part, I created wireframes for 10 screens of my application.
It’s the main screen of the app, containing the calendar and a list of notices about projects.
It’s the screen of “Overall”. It shows the progress of each member of the team.
It’s the place where users can enter today’s goal.
After entering your goal, the system will show a to-do list of tasks.
It’s the screen for “New project”. It shows the list of projects you are involved in and can add new ones.
It’s the response when the user clicks the “Menu” top left, showing some options like the user, progress, account, and contact.
It’s the screen of “Meeting”. It shows the participant of the meeting and the presentation.
When someone’s work runs a little behind, the system will send a message and ask others for some recommendations.
After one day, the system will present the gap between your completion and your goal and give you some recommendations.
After the user chooses to add a new project, this is the screen user will see. Users can enter the title, member, and content of the new project.
Prototype
Finally, I used proto.io, a prototype tool, to create a lo-fi prototype and invited 2 participants to execute some tasks to test the functionality of the system, each task consisted of at least 5 interactions. Here are the tasks:
Task
Task 1: Create a new project
1. Click the “new project” button.
2. Click the ”Add” button.
3. Click the input space under the “title”.
4. Enter the text by the keyboard.
5. Click the input space under the “member”.
6. Search for the member or select from the default.
7. Click the input space under the “content”.
8. Enter the text by the keyboard.
9. Submit the new project.
Task 2: Set 2 tasks on today’s goal
1. Click the “Goal” button.
2. Click the ”Add” button under “today”.
3. Click the input space under the “title”.
4. Enter the text by the keyboard.
5. Click the input space under the “content”.
6. Enter the text by the keyboard.
7. Submit.
Task 3: Check the progress of each member and give some recommendations for someone running behind.
1. Click the “Overall” button.
2. Click the icon with a red exclamation mark.
3. Click the notification
4. Click the input space under the “content”.
5. Enter the text by the keyboard.
6. Submit.
Below are the pictures when testing:
After testing, the participants gave me some feedback about how to improve my system, including:
1. Need to improve the function of “Back”: tester 1 found that it’s hard to find a way to go back to the previous page. In that case, I will add more icons of “back” on the top left of each page or add a function that the user can scroll the screen left to get back to the previous page.
2. Cooperate with other communication apps: tester 2 gave a recommendation that if the app can cooperate with other communication apps, like Line, telegram, it will be more convenient to communicate with others. In that case, I will design a function that the app can directly link to other communication apps to make it more convenient.
3. Be more visualization: tester 2 said that UI needs to be more visualization to make the user understand how to use the function. In that case, some elements need to be redesigned, for instance, add some icons to make the user know the function easily or add an explanation phase when the user use the app the first time.
4. It’s hard for the user to find the one that runs behind: one of my tasks is to check the progress of each member and give some recommendations for someone running behind, but tester 2 did not notice it and tried to find it literately. In that case, I will make the notification more apparent to make it more obvious, like a notification from a system message.
5. Check the new create content repeatedly: both tester 1 and tester 2 tried to check the content they had created, but it’s not involved in the prototype. In that case, I will design the page of content, so that users can check the content they created.
Reflection
Following the course, I completed a prototype myself. It may not be created from the beginning of the whole design process and it may not be perfect as a prototype, but I still learned lots of things from the process.
I started by sketching and came up with lots of ideas. I spent lots of time trying to imagine what kinds of layout and what kinds of system users may perceive it as intuitive. In this part, I considered quantity over quality and take other products as references, finally, I came up with these 20 sketches.
Next, based on the target audience of the system I designed, I created 2 personas and relevant scenarios. I created personas from different perspectives and contexts, and the content of personas contains information like demographics, motivators, and constraints. Then, according to personas, I developed the scenarios, they were activities or tasks that envisioned the functionality of my design solution. The scenarios contain setting, agents, goals, actions, and events. After this part, I had more specific imaginations about the system and understood.
After creating personas and scenarios, I mapped the input and output of the system. In this part, I thought about the information that the system intake and the feedback that the system provides. The inputs included free-text, calendar, and voice input, the outputs included text, list, and graphs. The design of both inputs and outputs must consider when, where, and how the user will need to interact with the system. Visibility of state helps users understand why the system behaves the way it does.
Based on the above preliminary works, I used Cacoo, an online tool for wireframes, to create my system layout. I created 10 screens for the app first, then, to create a prototype, I developed 10 more screens for the app and mapped the wireflow of the system. After developing the prototype, I set 3 different tasks to test the fluency and usability of my design. I invited 2 participants and got some feedback from their tests. Thanks to them, I know that there are still some problems I need to fix and I will continue to learn more about UX research.
