Redesigning OnBoard Meetings' Approvals and Actions features to improve overall user experience through research and usability tests.
UX Research: Heuristic Evaluation, Design Systems Sprint, SWOT Analysis, Competitive Analysis, Co-design Workshop, User Journey
UX Design: Ideation, Mid-fi Wireframes, Usability Testing, Hi-fi Prototypes
Duration: 5 months, Aug '23 - Dec '23
Type: UX Design Apprenticeship
Team: Aashwini Vachhani, Dean Carroll, Evan Brehm, Jasmine Li, Prithvi Manjunatha
Team Leads: Connor Schrank, Jarred Porter
OnBoard Meetings is a board management software that offers tools for efficient communication, organization, and decision-making for board members within an organization. Redesign of Actions and Approvals, the key features of the board management app, OnBoard Meetings. The goal was to improve improve states of Actions homepage and optimize Approvals page for screen real estate and intuitive information presentation.
Research current features to identify issues and suggest design system improvements for the proposed designs. The outcome was to create interactive prototypes for user testing to improve end-user experience.
OnBoard tasked us with enhancing board members’ user journey with Approvals and Actions. We aimed to make them functional, informative, and intuitive. The project involved evaluating the existing design of OnBoard’s Actions and Approvals features and proposing redesigns to improve the end-user experience.
Our redesign introduces user-friendly filtering and sorting options for Actions based on their states. We’ve also revamped the visual representation to make it more intuitive for members to quickly identify the current state of Actions.
In our redesign, we’ve added features and enhanced existing ones. We’ve also revamped the approvals page layout to be more informative, including vote details, direct discussion access, and relevant approval information.
Heuristic Evaluation
Through heuristic evaluation, we analyzed the current interface based on usability guidelines to identify design issues and provide design recommendations.
Heuristic Evaluation 1: Actions' State Visibility
In the current design, plain text labels are used to indicate Approval states, which makes it challenging for users to identify and distinguish different statuses. The absence of a clear indication of approval status beyond the text labels leads to potential confusion and difficulty in understanding the status without close inspection, which contradicts the principle of visibility of system status.
Lack of visual hierarcy between
Action state and Action Name
The 'Open' state of this action is
represented through plain text
Heuristic Evaluation 2: Approvals Discussion
The current Approvals interface does not efficiently utilize screen space, requiring users to click through several pages to access the voting discussion violating the heuristic recognize rather than recall. Approvals in draft state are prioritized over open Approvals in terms of visibility. This does not adhere to industry best practices and violates the heuristic of consistency and standards.
Users select an approval to view more information
Users click “View Discussion” to communicate with other voters
The chat pop-up appears, allowing users to send messages to others
Heuristic Evaluation 3: State Hierarchy
OnBoard’s current design lacks flexibility and efficiency. Users frequently have to click multiple times to access essential features. Furthermore, the Approvals state is often ambiguous, making it difficult for users to distinguish between different states.
Items in draft state are listed above open approvals. Open/available items are listed first by default.
While the Approvals feature serves admins, contributors, and readers, our redesign prioritized board members. Board members oversee management and strategic direction and their needs include casting votes, participating in discussions, and viewing voting results.
User Journey Map from a Board Member's Perspective
Takeaways from User Journey Map
For the co-design workshop, we recruited board members from Purdue University Communities to interact with the product and perform tasks on OnBoard to actively involve users and gain insights into their perspectives.
Co-designing with a board member of a Purdue University's student club
Walkthrough of the OnBoard's Current Design
Provided an overview of the existing OnBoard interface, ensuring participants understood its design and features.
Performing Tasks as Board Member
Guided participants through tasks such as creating an Approval, accessing Voting and Discussion sections, and viewing results.
Uncovering the Strengths an Pain Points
Analyzed strengths and weaknesses of the current OnBoard interface from board members perspective to identify issues.
Feedback Session Post Workshop
Received feedback from participants of their experience with the Actions and Approvals pages of the existing design.
Co-design Workshop Takeaways
CUSTOMIZATION NEEDS
The interface required more customization options, such as filters to improve the browsing experience.
INEFFICIENT USE OF SCREEN SPACE
Organizing the content prioritizing information hierarchy and could help guide user actions more effectively.
LACK OF VISUAL HIERARCY
Implementing tags for better categorization and visualization to improve usability for existing and new users.
The current OnBoard Approval page lacks detailed information on available actions and filtering and sorting options, making it hard for users to find open actions.
Current Actions Page
The current approval design lacks essential information, making it challenging for users to discern its status. The interface elements lack visual hierarcy, hindering quick glance-based identification.
Current Approvals Page
OnBoard outlined design system expectations, including preliminary research for foundational knowledge and its application in the redesign. Using Figma, we created a design library with various states for essential components like buttons, typography, and layouts.
Colors, Typography, and Icons
Buttons
Checkbox, Radio-buttons, and Switch Buttons
Input Fields and Menu Components
With our redesign, we have addressed these issues by introducing options to easily filter and sort the actions based on their states. We have also revamped the representation of actions, making it more visual and enabling members to easily identify the current state.
Hi-fi Prototype of the Actions Page
The redesign introduces several new features and improves existing ones. The improved layout of the Approvals page makes it informative-dense by including details of votes cast, providing direct access to the discussion section, while also offering more information about each approval.
Hi-fi Prototype of the Approvals
To evaluate the current OnBoard website and compare it with the redesigned proposal, we measured the time and clicks required to complete a few tasks. Participants were introduced to the OnBoard's features and asked to perform a think-aloud exercise throughout the task completion process.
The results from the users’ testing showed that there was a 38% reduction in clicks and a 20% decrease in task completion time, significantly improving interface efficiency and performance reliability.