Project Overview
Course: ISM 220 – Interactive Design and Prototyping
Roles: Researcher, Designer
Group: Jenica de Leon, Gabrielle Fitzpatrick, Sparky Price
The Challenge
DePaul University students face many struggles regarding team collaboration and working in group projects. Our project goal is to conduct user research and design a new tool that will help students collaborate and work efficiently with team members, while forming strong groups to work toward academic success.
Our Solution
To address this problem, we designed DeProject – a website that will increase group efficiency, allow groups to set their expectations higher, and help each individual team member participate more actively. This project management tool will make group work easier and smoother for DePaul students, therefore minimizing the challenges they face regarding group work.
The Approach….
A. User Study
B. Concept Exploration
C. Low-Fidelity Prototype
D. Mid-High Fidelity Prototype
A. User Study
The goal of our User Study is to gather information that will help us understand the users and their contexts. By interviewing and observing DePaul students, we are able to find out how individual team members collaborate with their team on class projects. The results will help us learn about their pain points and needs, and help us form the insights that will guide our design process.
Process
1. Conduct interviews and observations.
| What we did | What we learned |
|---|---|
|
We each interviewed 2 DePaul students by asking them open-ended questions so our team can learn from their detailed responses as students share their own experiences with group work. |
|
2. Analyze the results and form themes.
These are the observations derived from the behaviors, responses, and stories of our interviews.
| Observations / Interview Results | |
|---|---|
|
– Differences in work ethic- e.g., some people were negatively affected by the decisions of their group members – As students, we have high expectations from our team members- e.g., good communication, independent work before collaborating, those who are eager to work – More people prefer to work individually because they have more control over the quality and outcome of their work – Students mostly use email to work on team projects because they are unaware or unfamiliar with other work related tools for communication – Group member stopped working on the project because team stopped collaborating, which resulted in failure and reflected in the outcome of the project (surprising but not unexpected) |
– People were discouraged to continue working because of the attitudes of incompetent group members – Those who feel good about working in groups also feel good about taking leadership roles (non-obvious) – Students become frustrated when other teammates don’t contribute and are reluctant to seek help because they don’t know how the professor will react – Accountability seems to be the main concern for students working on group projects – Some students struggle with decision making and group discussions – There is a major issue with collaborative projects, so our app should include several different functions that meets the needs of those who struggle with working in groups |
After comparing and contrasting our interviews, we listed our observations and findings on sticky notes so we can cluster them into themes.
3. Turn themes into insights.
These are the insights that help us generate design principles to inform ideation about user needs.
| Insights derived from observations |
|---|
|
1) Equal Effort
2) Different Working Methods
3) Unequal Work Ethic / Accountability
4) Personal Connections / Understanding Group Members
5) Lack of Communication
6) Student / Professor Mediation
|
B. Concept Exploration
The goal of this step is to generate concepts that build from user research and analysis. This will address the design challenge and will be used to define our product design.
Process
1. Generate a list of “design principles” from insights discovered.
These are the design principles that have guided our design.
| Insight | Design Principle | |
|---|---|---|
| 1 | Equal Effort | A successful solution will incorporate a role picker so they know individual roles / tasks. This will ensure that all team members put forth equal effort. |
| 2 | Different Working Methods | A successful solution will create a tool that allows users to customize their work environments. This function will be used to promote user efficiency and create a balance between focus and direction. |
| 3 | Unequal Work Ethic / Accountability | Accountability means that a person a) knows what they are responsible for and the level of competence that is required and b) completes the tasks they are responsible for at the correct level of competence and on time. A successful solution will maintain accountability by showing deadlines, checklists, and other time-sensitive elements openly to all members. These functions will be shown on the main page where each team member can see the progress of the entire project. |
| 4 | Personal Connections / Understanding Group Members | A successful solution will create a personal connection with teammates by having a user profile for each team member. This will help team members learn about each other before they begin working as a group and would hopefully build rapport so they can get along and work well. The user profiles will have details like their biography (name, major, email) so they will have basic knowledge of who they will be working with. |
| 5 | Lack of Communication | A successful solution will provide team members the options to message, create timelines, and set group meeting reminders so they may stay up to date with each other. |
| 6 | Student / Professor Mediation | A successful solution will create a checklist for tasks that will allow the professor to track group progress once the group marks it as completed. |
2. Generate design concepts or ideas for the product design.
These are ideas generated from our design principles that will be turned into product features.
| 6 Design Concepts |
|---|
| 1 ) Professor Progress View
2 ) Student Homepage with View of Overall Progress 3 ) User Checklists 4 ) Meeting Reminders / Calendar 5 ) Role Designation / User Profiles 6 ) Chat |
3. Create concept representations using scenarios.
To communicate our 6 strongest ideas that address the challenge, we created scenarios to represent each concept generated from our design principles.
An example:
| Design Principle | CONCEPT | SCENARIO |
|---|---|---|
| Insight: Personal Connections / Understanding Group Members Design Principle: |
Role Designation / User Profiles | Sasha wants to know the basics about the people she will be working with on her class’s group project. On the app, she is able to view profiles of the people she is grouped with that they each individually created when they made their accounts. She views Katie’s profile (a person she is paired with) and sees Katie’s biography. On the profile, Sasha is able to view details such as her name, her hometown, her job, her major, and email, and fun facts Katie chose to wrote on her page so other students can get to know her better. Sasha is also able to see Katie’s list of strengths and weaknesses. When it comes to picking team roles, Sasha knows because she gets an understanding and therefore will form a productive team. |
C. Low-Fidelity Prototype
Using the paper prototyping method, this step helps us detail the overall architecture, layout, and interaction flows of our web app. We created and tested our low-fidelity prototypes within our target audience to look out for errors and difficulties in its usability.
Process
1. Identify user stories from concepts.
These user stories represent our product requirements in a simplified manner. Told from the user’s perspective, they describe the type of user, WHAT they want, and WHY.
| Design Concept | User Stories | |
|---|---|---|
| 1 | Professor View Progress | – As a professor aiming to be active throughout the project, I have a tool that tracks student submissions so I can monitor participation and easily keep up with grades. – As a professor looking to place someone who doesn’t have a team in a group, I have an easy way to select a student from the class list and add them right through the system. |
| 2 | User Checklists | – As a student working on a group project, I can edit the tasks on my checklist and change their names as need be so that I can stay on top of my work and my team members can see when I’ve finished specific tasks. – As a student working on a group project, my communication tool lets me know when I input something incorrectly, such as typing a word into the due date field when adding a task to my checklist, so that all of my reminder notifications work correctly even when I make a typo. |
| 3 | Role Designation | – As a student working on a group project, I can change my chosen assigned group role so that I can pick another role and work more effectively with my group members. – As a student working on a group project, I can confirm if another team member wants to change his/her group role so that I will be aware of any changes made within the group. |
| 4 | Student Timeline | – As a student who wants to check on my group’s timeline of submissions, I have a tool within the DeProgress interface that allows me to have a general overview of the files submitted by my peers. – As a student who wants a detailed view of the files submitted, I also have an option to see the actual documents and summary of what was submitted. |
2. Sketch out possible user interfaces for the product.
We considered giving our sketches some navigational design patterns to give it shape and structure.
Examples of digital design sketch:
Site Map:
This site map diagram represents how our system is organized. It reflects an outline of our prototypes and shows the users how they will navigate through DeProject.
3. Create paper prototypes derived from user stories.
This step allowed us to show the placement of elements and controls on our app’s user interface.
An example:
Product feature: Role Designation
As a student working on a group project, I want a role picker that will assign each team member individual tasks that they can be aware of so we can form a productive team.
Imagine your professor has grouped you with your fellow classmates to work on a class project. You meet your team members and from there, you specify a role on the app. You volunteer to be a Project Lead.
Can you show me how you would use this interface to pick your role?
4. Test the paper prototypes.
Using our paper prototypes, we asked volunteer users to complete a given task. This allowed us to gather feedback and evaluate the effectiveness of our design by observing their thoughts and interaction with the user interface.
User testing involved 3 roles:
Example of our evaluation for the “Role Picker” feature:
| Problem found | What we learned / What to change |
|---|---|
| For the role picker, an option was already highlighted which may cause users to choose it before looking at their options. | The test subject wanted to click on a different option than the one that was originally designated and had to be instructed where to go.
Our test subject suggests we unhighlight it and show descriptions of each role for them so they can navigate easily through the process. |
User testing helped us catch errors in our design layouts and determine ways to improve our design. Therefore, we were able to improve our prototypes to include proper discoverability, constraints, feedback, and natural mapping.
D. Mid-High Fidelity Prototype
After testing and refining the design of our low-fi paper prototype, we created our mid-high fidelity prototype in Axure RP and added built-in interaction.
OVERVIEW OF MAIN FEATURES
The following is a list of main user activities supported in our design. They are the tools necessary to make group work a smooth and enjoyable process. The name of the feature is provided, along with a description of what each feature is meant to accomplish.
| DeProject’s Main Features | |
|---|---|
| Instant Messaging | Group members can chat with specific teammates, multiple teammates, or the entire group. They can create multiple conversations to suit their needs, allowing them to communicate effectively within their groups. |
| Main Page Progress Indicator | Our homepage features a progress indicator that shows how far along each group member is in getting their tasks done for the project. Each student is represented by a race car as a fun way to motivate them towards finishing. Their car moves along the bar as they check tasks off on their checklist. In the case of a problem student who is not contributing, this feature forces them to own their part of the work and makes it clear that they are slacking without anyone having to report them. |
| Calendar with Meeting Reminders | To set up meetings, students can use the calendar feature to invite their teammates at a specific date and time. When members accept the meeting invite, the event appears on their individual calendar. They will then receive individual reminder notifications and emails when their meeting is coming up. |
| Role Selection | Having a group with varied skills is an often overlooked necessity in group projects. DeProject requires students to pick their roles based on their strengths and weaknesses during the signup process. Each individual team member also has the option to change roles if they choose, and this would notify other group members and present them with the option to either Deny or Confirm. This allows students to pick their groups with the confidence that their final product will reflect a diverse skill set. |
| Checklists | Users are required to check their tasks off on a list which is programmed to move their icon along a progress bar on the homepage as each task is checked. This serves the dual purpose of helping students stay on top of their work and hold them accountable for their designated tasks. |
| Separate Professor View | Professor involvement is a rare benefit in group projects. Many students feel nervous approaching authority figures when they are struggling with their group, work, or both. DeProject’s professor view takes the pressure off of students by giving the professor their own environment in which they can track student progress, show grades, leave comments, and set the expectation that students must complete their work. |
We published our mid-high fidelity prototype to AxShare. We used Axure’s Page Notes feature to give users direction on navigating the product.
Our team made a final presentation to demo our prototypes with annotated screenshots. The user stories and scenarios for each of the tasks helped demonstrate the main features of our product.
- Role Picker
- Checklist
- Professor View & Navigation
- Student Timeline View
View the demo here:
OVERVIEW OF DESIGN PATTERNS
We applied at least 6 design patterns in our prototype. Each one has a detailed explanation of why each pattern is the appropriate choice.
| 6 Design Patterns | ||
|---|---|---|
| 1 | Dashboard | The dashboard is where students can view activities of the latest and important data. It is displayed and organized into a single information dense page and updated regularly. This is appropriate to show users relevant, actionable information, and let them customize the display as necessary so they are aware of their activities. |
| 2 | Progress Indicator | We have a race car track for progress on the homepage. Each toy car represent each user and their progress. It is appropriate because it shows the users how much progress has been made so far on the projects they are working on. It also allows each team member to view where their fellow teammates are on the project. |
| 3 | Button Groups | We have buttons for the user profiles on the left panel. When a user clicks on a team member’s avatar, they will be taken to a page with their team member’s user profiles and details. It is appropriate because these buttons are presented as a small cluster of buttons; they are related aligned with similar graphic treatments and therefore it is easy to distinguish and recognize. |
| 4 | Two-Panel Selector | We have a smaller left panel with menu options and a bigger right panel with the carousel dashboard and progress indicator in the homepage. This is appropriate because the interfaces are placed side-by-side panels for easier reference. In the first one, it shows a list of items that the user can freely select; and in the second one, the interface will show the content of the selected item. |
| 5 | Carousel | The carousel function is available to provide the user with an interface that engages them with our site. It is appropriate because it is helpful for students to have a visually organized way to have information presented to them when they can conveniently swipe back and forth to view and browse for latest content. |
| 6 | Module Tabs | We have tabs placed at the top of each page to help users navigate throughout the interface. This is appropriate because when modules of content are placed into a small tabbed area and a user clicks on one tab, it is easy for a user to focus on the activity when only that particular module is visible at a time. |
Conclusion
DeProject is a website that not only makes it easier to work in teams, but also encourages groups to stay on task and creates a sense of community between group members and their professor. Its purpose is to promote coordination and collaborating with group members on class projects.
REFLECTION:
This project broadened my understanding of interaction design as part of a user-centered design process. I loved learning and hearing about the user’s thoughts and feedback during our interviews and user testing. However, even though this project was a lot of fun, time was a big constraint because we only had 10 weeks. I wish we had more time to do more user interviews and testing! I also enjoyed contributing to the product’s visual design. I learned about common design patterns and principles, and got to practice applying them. In the future, I would like to learn how to implement more built-in interaction with smoother transitions in Axure RP for the prototypes.
Tools used: Axure RP, GoogleDocs, GoogleSlides, Microsoft Word, Slack
