A Student in post-secondary education,
needs a method of organising their work and school responsibilities because it is overwhelming to keep track of events through multiple platforms, resulting in missed responsibilities and product dissatisfaction.
School can get busy, and the workload can get overwhelming, leading us to second-guess ourselves when managing the projects. We start to question ourselves—Did I hand in that assignment due three days ago? What do I have to do for that one project again? What does my schedule look like this week with all these upcoming projects? While some apps provide solutions, students still feel overwhelmed with the additional navigation from one app to another. Ultimately, this leads to unneeded stress and missed minor details when executing their projects or assignments.
Creating a simple, intuitive, solution
We discovered a similarity in all different applications by going through various project management apps. The critical similarity was that these applications required manual user input for task and project breakdowns. Our solution's competitive advantage is to exist alongside current programs teachers use to upload assignments, grades, and class content, such as D2L. We aimed to create a solution that acts as a project management application with pre-loaded data to help students narrow down their focus of priority and provide them with an easily manageable overarching view of assignments.
What’s currently out there?
As market research was conducted, we came across platforms close to what we were trying to build but still missed the component we were genuinely building our solution around.
Notion
Strengths:
-
An online platform institution wide communication channel
-
Notifications are easy to read and understand
-
Easy to look through lectures on mobile
Weakness:
-
May take some time to set up for instructors needs
-
Can’t arrange order of pinned coursed
-
Navigation can be a bit confusing causing user’s to feel overwhelmed on where to look exactly
Brightspace:Pulse
Strengths:
-
All-in-one solution for project management needs
-
User Friendly variety resources to help with learning the program
-
Simple interface that allows for user customization for their work board
Weakness:
-
May take some time to set up for instructors needs
-
Can’t arrange order of pinned coursed
-
Navigation can be a bit confusing causing user’s to feel overwhelmed on where to look exactly
Understanding the perspective of the user
To get a deeper attitudinal analysis of how the average post-secondary student thinks, we utilized an interview-style method to gather insight, then synthesized the data into an aggregated empathy map.
Understanding the perspective of the user
To further expand our research process, we created a survey on google forms to collect additional quantitative data to get a more comprehensive understanding of how students across different universities and colleges use project management applications to balance their workloads
This process has helped us see how current components within students' project management apps have either benefited or created an obstacle for them. By gathering this type of data, we could note down what's currently working well for the students and apply it to our solution.
Additionally, we wanted to know the ratio of students utilizing iOS or Android devices and use that data to apply the appropriate UI kit accordingly to make an effective prototype when moving to the design stage.
Brainstorming through sketches
After synthesizing our data and developing a better understanding of our user's problems and needs, we began to brainstorm through storyboarding and sketches to explain the struggles within our user's journey and how our app design (Amigo) could help provide a solution.
Crazy 6 Sketches
Once we were able to see the different scenarios and potential solutions that we could provide to the user, we then conducted a Crazy six challenge. Each member would present another type of solution, tackling different problem areas. Since there were multiple sets of alternative solutions, we decided to utilize dot voting to narrow down our decision on areas of focus. Once we flushed out which solution was most desired from the outcome of the dot voting, we then carried the design over to the low fidelity process.
Narrowing down our focus!
Once the Crazy 6 exercise was completed, we began to streamline our ideas and solutions by going through a 3 panel sketch exercise in order to narrow down our solutions more.
Mapping out the Information Architecture:
In order to map out our ideas and features, we created a site map to get a birds eye view of how we were going to build out this solution.
Low fidelity
Translating the I.A and Data into the early design
For this stage of the design we mainly focused on the information architecture and translating the data we collected during our research into communicable information to help our user’s succeed within their task.
Medium fidelity
Responsive Design and Layout
For medium-fidelity, we aimed to focus on creating a responsive design for our solutions. For our web application, we designed it so it could be compatible with tablet-like sized devices. We also focused on the layout and structure of the app and ensured that the section placements were intuitive enough for the user to use and navigate through.
Dashboard
Classes Display
Assignments Showcase
Project Brief
Amigo Branding Guide
High fidelity
Final Mockups
For medium-fidelity, we aimed to focus on designing our solutions for different device sizes, for our application we designed it so it could be compatible with tablet-like sized devices. At this stage we also focused on the layout and structure of the app and ensuring that the section placements were intuitive enough for the user to use and navigate through.
When students approach the main dashboard, they are welcomed by the notification and agenda sections. With a busy schedule, we wanted to allow students to have a quick glance of what’s to come next and have them consume information quickly without having to think too much about it.
The class sections are listed and ordered by time of schedule. Each class has a specialised icon catering to individual subjects so that they can be identified individually, along with colour coordination as well. When utilised on a bigger device such as the iPad, we took advantage of the additional space by creating a side-by-side view of the student’s courses and their weekly class schedule.
After students have selected the class they want, they are presented with a list of assignments, all ordered according to the dates that the assignments are due. When prompted on a bigger device, the layout will change to a side-by-side view. Students are able to click on the assignment they want to view and a quick view display will be shown, breaking down the progress of the assignment, description, and weight of the task.
The idea behind our project brief page is to welcome students with pre-loaded information that is required to complete their assignment. Our objective here was to provide a streamlined and direct list of tasks for the project so that the student doesn't feel overwhelmed or lost when trying to complete it. Additional components we added were visual elements such as the pie graph and the highlighted days left until the assignment was due.
The Last Piece Of The Puzzle
After designing our high-fidelity prototype on figma, it was now time to carry it over to the coding component. Since we added HTML and CSS in the previous phases, our final step here was to incorporate JavaScript into our clickable web prototype.
For the JavaScript components, we aimed to add the following elements of: arrays to store and manipulate data, a mathematical function to display or manipulate information on the screen; and a form to collect information.
Usability Testing
With some adjusted design from the medium fidelity, we conducted a usability test to ensure that the changes were enough to help fulfil the user's goals.
After gathering data from the usability test we prioritised which issues to tackle first by sorting out commonalities in areas in which users were having the most trouble.
Some findings for the usability testing were:
We learned that when user’s feel most challenged is when tasked with finding something through multiple steps of navigating. Our first initial task for them was to find the assignment page, immediately, the users were searching for a one click navigation to get where they needed to get to. Some minor notes that our user’s encountered were just adding labels on our icons such as the navigation bar for a better indication of where those buttons will lead the user.
Picking the right methods to measure our success
Below is our execution plan for the stage of development:
In order to test our product here are some statements we made to ensure which elements need to be measured to ensure that progress is being made
Hypothesis:
We believe that by creating a streamlined and intuitive project management app will help students stay more organized and reduce stress with less effort. we will know this is true when we see 20% of users continuously return to our app within three months of their first use.
Sub-Hypothesis:
We believe that creating a more intuitive button for new users will increase the # of added tasks. We will know this is true when both the number of interactions with the Add Task button and the amount of tasks added have increased
We created a plan to utilise Google's HEART framework to measure the success of the design solution:
