The Company

Coding Champs is an online service that allows parents to sign their children up to learn programming skills that can be applied in their future careers and development. They offer courses in web development, Python programming, as well as game development in Roblox.

The Project

Our team was approached by the CEO of Coding Champs to create a web app that would allow teachers to easily track student attendance, performance, progress, and the assigning of students to different courses. They also wanted features that would allow admins to be able to have an overview of all of these basic features as well as the ability to generate reports that can be sent off to the parents of the students.

My Role

My role was one of the three team members that were included on the project. I helped perform secondary research, sketches, user flows, wireframes, and the creation of the final project in Figma.

Design Process

Competitor Research

Once our team had our initial meeting with our client and set about concluding what the final product would entail, we as a team set aside another meeting to decide where we would focus our efforts for our research. For my part I decided on taking a look at other apps or websites that focused on teacher attendance and student tracking, anything that had the basic functionality that our client was looking for.

The two websites that I performed my research into were: E4Effort and MyAttendanceTracker. I chose these two websites as hey closely resembled what the client was looking for in terms of what they wanted their website to be able to do.

Starting with MyAttendanceTracker as I looked through the website it was not the most appealing design wise, but what it lacked in that it more than made up for it with functionality. This website was definitely designed more for school teachers that teach multiple subjects as it allows the teacher to be able to create classes and pull from a list of students to assign those classes to them. Once this function was complete the teacher would be able to mark attendance per day from the list the teacher created per class.

The other things that I liked about this app as well is the ability to track student attendance based on a chart, giving teachers easy metrics to track student performance.

Moving onward to E4Effort, though it unfortunately was a paid service and I was unable to scroll through the app myself I was able to sort through the numerous tutorial images that were provided by the company to get a feel for how the app operated. This was another attendance app that was aimed more for school teachers as it had the same kind of functionality that MyAttendanceTracker had as well. The things that I liked about it was the ability to see at a glance from the teacher’s homepage of the total amounts of on-times, tardys, and absences on a student to student basis.

In addition to this overview, the way that the website organized students in a overall list and also gave attendance percentages, completion, and also overall behavior in the class was something that I liked about it very much. This was something that I was interested in bringing up to my team for the project going forward.

Sketches and Wireframing

Once all of this research was compiled, our team went onto a call and created a Figjam board where we could compile all of our notes, sketches, and ideas onto one central location so we could easily return to it and offer feedback if the need for it ever arose.

Link to the Figjam Board: https://www.figma.com/board/2Grvv84yG7BxspwBXiOpVP/Coding-Champs-Springboard-IDP-FigJam?node-id=0-1&t=mUYTvjGWUOxYJAo4-1

After creating the board, our team went about the creation of our initial sketches for the project. For ease of access and for the ability to quickly create a sketch and scrap it if need be, I created my sketches on pieces of notebook paper. Taking inspiration from MyAttendanceTracker, I created a dashboard with a calender for teachers to easily see when they were having classes upcoming and on what days

Once the teacher had a class that day and the teacher clicked on that particular class they would be taken to the class page. There the teacher would have a list of all of the students that were attending that class and the teacher would be able to mark the attendance of each student with a button press and also leave any notes that would be applicable

After these initial sketches were completed I went to the task of recreating them in Figma as simple low fidelity wireframes and also adding some additional in between screens.

An additional screen I added here was for the creation of the student profile and the main profile view. My idea was for the notes of each class to be added here as well as the ability to generate the report that the client had wanted as well.

Designs Moving Forward

With our wireframes completed, our team got together with our client to go over our designs and see which aspects of each of the design that they liked. The biggest thing that was in common with all of our designs was the access to the calendar on the very main page which they did like. Though a concern that was brought forth by the client was the idea of breakpoints for different devices and while that was not part of the initial project scope it was something that our team kept in mind going forward.

After this meeting our team started to look into design kits or any other materials that would help us create this website quickly and efficiently. In the end we decided to utilize Google Material Design for both the style guiding as well as utilizing its breadth of components which we used to great success for creating our designs

Once this was decided our team started to split the various aspects of the website amongst ourselves. In the end I was responsible for the creation of the log-in screen and the process of signing in for the teachers as well as the design for the ability for the admin of the website to be able to assign students to classes and teachers.

User flow

I set about creating a user flow once my aspect of the website was decided. I wanted it to be fairly straight forward and so I created two flows for if a student was new or if a student was an already existing student. If the student was new the admin would be able to input all of the student information and then once that was complete, the admin would then assign the student a teacher and a beginning course.

After consulting with the team, if was later decided that having the creation of students exist also in the same flow as the assignment of students was inefficient and it was easier to separate them into different flows. I then went back to my original flow and edited it slightly to remove the creation of students and focus solely on the assigning of students to classes, but it would also link back to the creation of students because as soon as a new student was created their information would be sent to the assigning students page.

High Fidelity Wireframe Creation

The first thing that I started to create as soon as the user flows were created was the log-in screen. This was a fairly simple task and I quickly created a simple log-in screen that allowed teachers to sign into the attendance tool. I was under the assumption that the admin would be giving the teachers all of their log in information, be it username and password, but having the ability to have a “forgot password” and a “sign-up” functionality is still standard on most websites.

After this was created I set about the task of creating the wireframes for the assignment of students to their teachers and to their classes. My original idea or the misinterpretation was that the assigning of students was the simple task of setting the next teacher to see the student and that the class number would be automatically generated and this was my first draft of the design.

After consulting with both the team and the client this original draft was completely scraped, but there were still some aspect that were kept along for the final revision. This being all of the students that needed their classes assigned to them to be in one big list that would show their class completion as well as the next class that would be on their curriculum for their current course. Modeling this screen off of the other screens that had been created prior to this flow to keep everything consistent with the rest of the design I set about creating the final iteration of the assign students screens.

The first thing the admin would see upon clicking the “Assign Classes” button would be the main screen for the list of students that need assignment.

Once the admin clicks on one of the students they would be brought to the screen where they would be able to input all of the information for the student’s upcoming class. This being the teacher, the next course in the curriculum, the frequency of the class on the days of the week, and the date and time that the class would be occurring.

Once this was done and completed, the admin would be able to submit the form and the relevant information would then be sent off to the teachers and the class would populate on the teacher’s main dashboard. After this the screen would return back to the main “Assign Classes” page and the admin would be able to continue on to the next student.

Final Designs

In the final meeting with our client our team compiled all of our completed designs into one final slide deck and presented our prototypes.

Link to final design slide deck: https://docs.google.com/presentation/d/1xG4nSfR--mMoE1SS7sO0vH8zQ5fpSpkkOHOTbNOCt6E/edit?usp=sharing

The client was very impressed with our work and stated that even though we were all still students that everything looked organized, presented well, and the use of the components of material design would let them continue to develop the website further with our suggestion for features moving forward.

We as a team suggested that the client take our designs and continue to iterate them further, especially when it came to developing for both tablets and mobile. We also suggested that they take these prototypes and creating methods for data visualization in the forms of charts and graphs for both student progression as well as attendance tracking. The prospect of user testing was also mentioned to the client if they ever decided to update our design with another team.

Conclusions

Challenges

This was a significant undertaking for both me and my team as this was the first time any of us had undertaken work as a team. The splitting of work proved to be a challenge as there were multiple times where any of us would have to go back and edit designs that we had completed to further match with what someone else on the team had created. Dealing with a client and having to curb expectations and to keep the design on track without more and more features being added was a big challenge as well. When to agree with the client and add a feature that later down the line really positively contributed to the design and when to bring to the client’s attention the deadline of the project and that adding more features would make us miss those deadlines.

What I learned

Overall this was a truly enlightening experience for me and it really made me realize that I enjoy working on UX/UI projects as a team. Being able to receive feedback in real time by other people working on the same projects and being able to bounce ideas off of each other in real time was a huge benefit to me. Also during this project I received major coaching on many aspects of Figma design that I was still unnsure of or had even heard of, biggest of all being the auto layout feature of Figma. Once I had learned how that aspect of Figma work it was like a door had been opened to me and there are now so many possibilities for me to pursue in creating designs both quickly and efficiently.