Clickable Prototype

As we near the completion of our journey, we’ve arrived at the clickable prototype phase. This stage represents a significant milestone, where we translated our wireframes into a functional and interactive prototype. Along the way, we made several key adjustments based on user-centered design principles and feedback, incorporating guidelines like the Gestalt principles, Hick’s Law, Fitts’ Law, and Shneiderman’s 8 Golden Rules. Here, we will delve into our clickable prototype and justify our design decisions with evidence and reasoning.

link: Prototype

1) Onboarding

Before users can sign in and access the application, we implemented an onboarding process to introduce the app’s main features. This step is essential as it sets user expectations and provides a clear overview of how the app will help them.

As you can see we provide skip button for the user to be able to skip the onboarding. This feature corelate with 8 golden rule which is shortcut.

2) Create account and login

This images show the changes from wireframe to prototype. The wireframe initially required users to input multiple details, which we later streamlined in the prototype.

Key Adjustments:

Reduced input fields for account creation to include only essential details, minimizing user effort.
We add indicator on the formal of email to avoid the user from making any mistakes when creating account.
Did not include the “Forget Password” interface, as it was not a primary feature.

Design Justification:

By minimizing input fields, we adhered to Shneiderman’s rule to reduce user memory load, making the process faster and less frustrating.
By putting indicator, this follows 8 Golden rules, offer simple handling error.
The streamlined interface aligns with Hick’s Law, as fewer options lead to quicker decision-making.

3) Class selection and planner (Home)

The planner undergo significant changes to focus on what users need most which is accessing their classes.

Key Adjustments:

Added a search bar for quick class lookup.
Introduced a filter function to sort classes by year.
Limited the display to three classes per page to reduce information overload.

Design Justification:

The search bar and filter function address user needs for efficient navigation, as identified in user research.
Displaying three classes per page follows Hick’s Law, reducing decision fatigue and making it easier for users to focus on relevant options.
These changes also align with the Gestalt principle of simplicity, ensuring a clean and intuitive interface.
The filter function also follows 8 golden rule which is support internal locus of control because user can control what class they wanted to be displayed and this feature also follow reduce short term memory load rule because the user dont need to remember what year that class is because they can easily know it by applying filter.
Besides, our primary user, is an organized person. thats why it is important for us to only highlight the main feature here, which is choose the class.

4) Main interface

This section highlights the app’s core functions. We made minimal changes to streamline the interface.

Key Adjustments:

Reorganized the menu bar at the top to reduce clutter.

Design Justification:

The simplified menu follows the Gestalt principle of simplicity, helping users focus on the app’s primary functions without unnecessary distractions.
This also aligns with Shneiderman’s rule of striving for consistency, ensuring a uniform layout across the app.
We also add poll in the message section so the user can easily make poll in our apps and it is one of the primary features that Lisa Kim wants.

5) Create virtual class

Key Adjustments:

Moved the “End Meeting” button to the top of the interface to avoid accidental clicks.
Positioned the “Send Link” button as an overlay for a more organized layout.

Design Justification:

Placing the “End Meeting” button at the top adheres to Fitts’ Law, increasing the distance from frequently used buttons and reducing the risk of accidental clicks.
After the user click the send button, an informative feedback will appear to inform user that the link has been sent

6) Virtual class interface

We refined the screen-sharing feature and reorganized menu elements for a more intuitive experience.

Key Adjustments:

Replaced text-based buttons with icon-based ones, placed on a menu bar on the left.
Added an “End Meeting” button at the top-right corner.

Design Justification:

Using icons follows the Gestalt principle of similarity, making the interface visually cohesive and easier to understand. We also want to save some space because if we proceed on making the button like the prototype shape, the screen will be smaller.
The icons are: share screen, interactive quizz, whiteboard, and breakout room. These are main functions that Lisa Kim wants and the other primary function, which is poll is located in the message section
The “End Meeting” button placement adheres to Fitts’ Law, ensuring it is easily accessible but not prone to accidental clicks.
The tree dots icon beside the mic is where located button to record the class and activated noise cancelling features

7) Share Screen

Key Adjustments:

Change the features button selection only to icons

Design Justification:

There also informative feedback will be displayed when the user share the screen.
We make the design similar to google meet because we want the user feel familiar to use our apps.

8) Whiteboard

We made minor but meaningful adjustments to the whiteboard interface.

Key Adjustments:

Relocated the “End Whiteboard” button to the top to avoid accidental clicks.

Design Justification:

This placement aligns with Fitts’ Law, ensuring the button is easily accessible but not in a high-activity area.
When the user choose to open the whiteboard when the virtual class is on going, the screen will automatically share to everyone. Means, there is less button to be clicked. The user only need to open the whiteboard and everyone will see whats going on the whiteboard.

9) Recording

Details on this section remain unchanged, as it functions as intended without significant complexity.

10) Quiz

The initial wireframe resembled Google Forms but was redesigned because we realize that Lisa Kim want interactive quiz instead on quiz like in the google form.

Key Adjustments:

Redirected users to external platforms like Kahoot and Quizizz for interactive quizzes.

Design Justification:

This change enhances engagement as users can now create and participate in dynamic quizzes without switching tabs.
We intended to redirect to Quizziz and Kahoot because these are the apps that are mainly used by our primary user for interactive quizz.

11) Breakout room

Changes were made to improve usability:

Key Adjustments:

We refined the breakout room assignment feature for user-friendly interaction but maintained the breakout room view while allowing users to switch focus with a single click.

Design Justification:

This design simplifies navigation, aligning with Hick’s Law to minimize decision-making effort.
Besides, we make the breakout room view where the user could easily see all breakout rooms and choose which one they want to highlight because and keep track of everyone's progress and allow the user to switch between breakout room smoothly.

12) Student Performance Dashboard

The dashboard layout was redesigned to better represent information.

Key Adjustments:

Grouped related sections to follow the Gestalt principle of proximity.
Introduced color-coded performance indicators (green, yellow, red) for quick assessment.
Add back button where user can go back to page before to permit easy reversal of action.

Design Justification:

These changes improve usability by visually segmenting information, following the Gestalt principle of similarity.
Shortcut button at 3 dots button so the user can give immediate feedback by messaging the students that need more attention after observing their performance

By adhering to well-established principles such as Gestalt Principles, Hick’s Law, Fitts’ Law, and Shneiderman’s 8 Golden Rules, we have refined our prototype to deliver a seamless, efficient, and intuitive user experience. Below is our checklist for Shneiderman’s 8 Golden Rules.

Thank you for joining us on this design journey and stay tuned for usability testing update :).