RISE Academy provides alternative learning opportunities and resources to help students develop their talents and interests. They provide a safe and secure learning environment for students to gain access to the knowledge and resources they need to succeed. With exceptional teachers and a comprehensive curriculum, RISE Academy strives to help students reach their full potential.

The academy was using Google Drive to store all the documents created by the facilitators and students had to upload their projects and assignments into folders assigned to them. Also, facilitators and administrators did not have an easy process to insert grades and create report cards to be sent to the ministry. Students needed a way to contact facilitators easily as they were using Instagram to do that.

The goal of the project was to create a web application for the academy, with specific features for students,administrators and facilitators. We would have a high-fidelity prototype at the end, which had the basic features requested by the users.

This project was handed off to us by a previous team who conducted the initial user research and analysis.They were able to produce a user flow that the users had to go through. So, we were able to take that andcreate user flows and user stories to create the initial design of the application. They conducted tests withmultiple students, facilitator and administrator to understand their needs and frustrations with using Google Drivefor the academy. From these tests, they developed user personas which we had to update to fit the user stories.

This project was handed off to us by a previous team who conducted the initial user research and analysis.They were able to produce a user flow that the users had to go through. So, we were able to take that andcreate user flows and user stories to create the initial design of the application. They conducted tests withmultiple students, facilitator and administrator to understand their needs and frustrations with using Google Drivefor the academy. From these tests, they developed user personas which we had to update to fit the user stories.

In the first week, we prepared some necessary documents like the milestone document, risk assessment, SEO audit,website technology audit and project charter. Then we had the kick-off meeting with the client to discuss the goals and process of the project and made sure that we are all aligned on it. After that, we moved on to start creating the skeletons of the project.We decided to create user personas, stories and flows from the data we had been given by the previous team.

We analyzed the biggest pain points of each persona and created three flows for them. The student had to see all the course material, submit assignments and contact the facilitators. The facilitator had to create tasks,assign assignments to students and needed access to a templates database for that. The administrator needed to be able to generate report cards for students, update the templates database and configure accounts of everyone.

We developed a story for each user, which would be expanded later. The flows accompanied the stories and showed the whole process that the user would go through in that story.

Meanwhile, we also worked on creating user journeys, as we needed to understand how new studentswould be selected at the academy. Parents and councilors had a role, along with the students in how they would beselected and we were able to draw up the journeys for them and present to the client.

After creating the user flows for each persona, we went on to create a sitemap for the whole application for each user.We had to limit the number of screens because of the time constraint but we drew up a simple but functional sitemap.

Now that we had a basic information architecture of the web application, we were given the go-ahead to produce the low-fidelity wireframes and create the skeleton of the app.
‍
We had to get it done quickly and efficiently, so we created the basic wireframes with the most important screens first,and then iterated on them as we received more user feedback. We used Figma to create the wireframes and handled the design decisions as a team, so that we could all agree on a design that would work for both the client and the users. We split the team into three and started creating the student wireframes first and then the administrator and facilitator. I worked with Meryem on the student wireframes, Blerta and Zak worked on the administrator, and I also worked with James on the facilitator.

We decided to create a dashboard structure for the app. This would make it easier for the users to switch betweenthe different components of the application, instead of using a traditional navigation system. We also added a notifications tabto the dashboard, so that the users could easily see any notifications from the facilitators. We also added a messages tabnext to the notifications, so that the students can communicate with the facilitators or administrators as required.Then we have a profile button, from where the student can see their profile information.

We called the main components My Workspace, My Assignments and My Facilitator.
My Workspace includes all the courses and the information about them, and tasks/to-dos that are assigned to the students.
My Assignments include all the assignments that the student has been assigned and they can submit them there.
We also separated them into All, upcoming, overdue and completed and set them as tabs instead of using a filter system as this is a much cleaner and simpler way of doing it and required only one click to switch.My Facilitator included contact information of the facilitators that the student has, and the student would be able to contact them right from that screen.

I worked on the main features of the facilitator while James worked on the popup video and side panel flow for the facilitator.I took a lot of inspiration from the administrator wireframes for the facilitator wireframes as the functionality would be a lot similar.I split the dashboard into three components, My Workspace, My Students and Template Database.

My Workspace would have a calendar view of the events that have been scheduled, and the tasks that the facilitator hasassigned to themselves. They would also have a simpler calendar view on the side, with badges on days that have events or tasks.At the top, I added a meeting button so that the facilitator can create or join meetings with students quickly.

The My Students screen displayed information about the students that have been assigned to the facilitator. They would be able to go into each student’s screen, which shows the content that is being shown to the student and they can update to-dos or assign assignments and projects to them. Clicking on assignment links in the to-do items takes the facilitator to the assignment page where they can see the submission if there is one and provide feedback to the student.

Template Database is the home to all the projects and assignments that have been created by the RISE Academy facilitators and administrators. From here, we decided that the facilitator should have permission to edit and assign specific projects to students, and see the updated version that they created so that they can go back to it and assign the same new template to another student. They also have the ability to create new project templates, for which they will have to fill a form so that they can have all the information needed for the student to complete that project.

After completing a few iterations for the application with the low-fidelity wireframes, it was time to create the final high-fidelity wireframes that we were going to submit and handoff to the next design team.

We started off by creating a simple style guide and a component hub with the help of Figma’s awesome auto-layout and component features. We started with the colors, typography, main buttons, then moved on to icons, and basic components like the calendar and sidebar. Once we were happy with those, we began updating the low-fidelity screens into high-fidelity, starting with the Student. The goal at this point was to establish how the application would look like, and make changes as needed by the client, as we did not have the freedom to test it with the students or facilitators.

After we were satisfied with the results, we presented it to the client and they were pleased with both the design and the overall functionality, as we also provided them with a working prototype.

There is much more to be done with this application design, as we were not really able to do any testing with real-world users. But we have requested the next design team to accept feedback from users, go back to the lo-fi wireframes, reiterate and redesign the screens as needed. In addition to that we created a list of screens that we had to skip during our process as it was out of scope and we requested them to consider adding those screens to the app so that the users would have a seamless experience throughout the application.

This project was especially challenging because of the time constraints. We had to push ourselves to deliver an application prototype to the client and professor in a total of 20 days, and we were ecstatic to exceed the expectations of them. All of us gained a lot of practical knowledge of product design with this project, especially using Figma and Figjam to collaborate, brainstorm ideas and create a viable prototype that could potentially reshape the studies of thousands of students in Ontario.