Qwickly Design Challenge

Redesigning the Qwickly’s Attendance Record and Student Grouping Manager.
‍
Qwickly’s Design Challange encompassed cleaning-up/reimagining two of their existing product screens. The Attendance Record screen is used at a class/course level to allow an instructor the ability to see a full picture of the attendance taken for the course. The Student Grouping Manager allows school administrators the ability to place students into specific groups so that attendance reports can be generated in reference to those groups.
MY ROLE
Visual Designer
DURATION
5 days
TOOLS
Figma
DATE
July 2020

ATTENDANCE RECORD

1/2

Current Version

New Version

01

Defining the Problem

Due to a lack of visual hierarchy, the information provided on the attendance record is cluttered and difficult to quickly comprehend. The design does not allow for a large enrollment of students in a single course; for example, scrolling through 200+ students effectively. In addition, the color contrast in the cells of the current version fails the Web Content Accesibility Guidelines.

02

Framing the Solution

How might we improve the visual hierarchy of Qwickly’s Attendance Record UI to make it easier for users to understand course attendance?
1.
Include ‘Rows per Page’:
When displaying individual students within designated rows, include the ability for the user to control the number of rows presented on the screen as well as a method to navigate through students per page. This design choice is supported by the category of ‘flexibility and efficiency’ in traditional heuristic evaluations.
2.
Establish Strong Visual Hierarchy:
The current UI keeps elements tightly compact which becomes visually straining for the user. Negative space can be used to provide visual relief while creating spatial relationships that define what elements go together.
3.
Stay within Brand Guidelines:
It is important for company products to keep a brand identity to establish product recognition. Qwickly uses different weights of the font ‘Barlow’ and has a distinct color pallete on their main website which should be translated to their Attendance Record display.

03

Developing the Solution

This new solution gives users a clean interface to visualize class/course attendance. By organizing the student attendance information into a tight grid of circles, users are able to scan the screen and easily identify who was absent, present, and tardy for specific sessions/dates. At the bottom of the screen the user now has the flexibility to choose rows per page and select the specific page to view. The new solution keeps a minimalistic design while staying in line with Qwickly’s brand. Another key change can be seen with the message attachment for specific student attendance; the message bubble has been transformed into a smaller circle mimicking a notification symbol.

STUDENT GROUPING MANAGER

2/2

Current Version

New Version

01

Defining the Problem

The split sections in the current design do not establish an intuitive process of navigating through different student groups and adding/removing students. The current design relies completely on text to guide the user to take certain actions which decreases the communication speed between the screen and the user.

02

Framing the Solution

How might we improve the visual hierarchy of Qwickly’s Student Grouping Manager UI to make it easier for users to control student groups?
1.
Match Between System and Real World:
English speakers are accustomed to taking in information from left to right which becomes an engrained natural/logical order. To keep users oriented, the process of getting more details about a group should follow that same direction.
2.
Recognition Rather Than Recall:
The current UI requires users to recall and select a new group from a drop down menu. This action serves to be more time consuming and makes groups invisible at first glance. I propose that groups are easily selectable following a layout similar to the slack interface.
3.
Use Familiar Icons:
Icons can improve visual interest and guide the user’s attention. They use familiar metaphors to communicate to the user quickly.

03

Developing the Solution

This new solution better showcases how users are able to interact with the Student Grouping Manager. The three distinct sections labeled ‘Groups’, ‘Students’, and ‘Add Students’ help the user progress through the grouping process from left to right. Each of the established groups are visible with ‘edit’ and ‘delete’ icons to increase transparency for the user. All of the information allocated to a section is grouped inside the table; for example, ‘Add Group’ and ‘Delete Empty Groups’ are now contained instead of sitting outside. Similar to the work done on the Attendance Record, this screen also establishes strong visual hierarchy and follows the Qwickly brand guidelines taken from their main website.

REFLECTION

While I found that my changes  improved the existing attendance record and student grouping manager designs, this was a quick project and all of my decisions were made based on my intuition and my own use cases/assumptions. To further challenge this design, I would like to take it one step further by testing its functionality with multiple people with a variety of use cases. I would love to A/B test my solution with Qwickly’s current solution to see where I succeeded and where I can still improve.
ⓒ 2024 with ♥ Brittany Newton