OnBoard is a B2B board management software that offers tools for efficient communication, organization, and decision-making for board members within an organization.
UX Research: Heuristic Evaluation, Design Systems Sprint, SWOT Analysis, Competitive Analysis, Co-design Workshop, User Journey Mapping
UX Design: Ideation, Lo-fi Mockups, 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
A redesign effort of Actions and Approvals, two main features offered by the board management app—OnBoard Meetings. The goal was to design solutions improving the clarity of action states displayed on the Actions homepage and revamping the individual Approvals page to optimize screen real estate and present information intuitively.
Research current features to identify issues and suggest design system improvements for the proposed designs. The goal was to create interactive prototypes for user testing to enhance the overall end-user experience.
OnBoard tasked us with exploring and suggesting solutions to enhance board members' user journey with Approvals and Actions, making them not just functional but also informative and intuitive.
The goal of this project was to improve the interface design of OnBoard’s Actions and Approvals features by evaluating the existing design and proposing redesigns to enhance 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.
For our initial research, we analyzed the platform that was being used at Ford and performed a competitive analysis of similar services. Through primary research, we gathered insights into the social culture at Ford and interviewed Ford employees to understand their needs from the platform.
Through heuristic evaluation, we analyzed the current interface based on usability guidelines to identify design issues and provide design recommendations to improve the overall user experience.
Heuristic Evaluation 1: Actions' State Visibility
Lack of visual hierarcy between
Action state and Action Name
The 'Open' state of this action is
represented through plain text
In the existing design, Approval states are indicated by plain text labels, making it difficult for users to identify and distinguish the different statuses. Currently, there is no clear indication of the approval status apart from text labels. Users may struggle to discern the approval’s state without close inspection because there are no distinct or unique identifying characteristics for each state violating visibility of system status rule.
Heuristic Evaluation 2: Approvals Discussion
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
The current Approvals interface does not efficiently utilize screen space, requiring users to click through several pages to access the voting discussion. This violates 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.
Heuristic Evaluation 3: State Hierarchy
Items in draft state are listed above open approvals. Open/available items are listed first by default.
Heuristic Evaluation Takeaways
OnBoard’s current design lacks flexibility and efficiency. Users frequently need to click multiple times to access crucial features. Additionally, the states of Approvals is often ambiguous, making it challenging for users to distinguish between various states.
While the Approvals feature serves admins, contributors, and readers, our redesign prioritized board members. Board members oversee management and strategic direction. Their needs include casting votes, participating in discussions, and viewing voting results.
User Journey Map from a Board Member's Perspective
User Journey Map Takeaways
User Journey Map from a Board Member's Perspective
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 Current OnBoard InterfaceProvided an overview of the existing OnBoard interface, ensuring participants understood its design and features.
Performing Tasks using OnBoard's Current DesignGuided participants through tasks such as creating an Approval, accessing Voting and Discussion sections, and viewing results.
Uncovering the Strengths & Pain PointsAnalyzed the strengths and weaknesses of the current OnBoard interface from the board members.
Feedback Session Post Co-design Workshop
Received feedback from participants of their experience with the Actions and Approvals pages.
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 would improve usability.
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 several design system expectations. These included conducting preliminary research to develop foundational knowledge and applying that knowledge in the redesign process. Using Figma, created a design library featuring various states for essential components, including 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 approvals screens, we measured the time and clicks required to complete a variety of tasks. Participants were introduced to the OnBoard's features and performed 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.