OnBoard is a B2B board management software that offers tools for efficient communication, organization, and decision-making for board members within an organization. The objective of this project was to improve usability and intuitiveness of OnBoard's Approvals and Actions features. The outcome was to enhance the overall end-user experience by developing interactive prototypes through conducting research on the current features, identifying issues to suggest design improvements, and test the proposed redesigns with users.
UX Research: Heuristic Evaluation, Design Systems Sprint, SWOT Analysis, Competitive Analysis, Co-design Workshop, User Journey Mapping
UX Design: Ideation, Lo-fi Wireframes, Usability Testing, Hi-fi Prototypes
Duration: 5 month, Aug 23 - Dec 23
Type: Industry-sponsored Project
Team: Aashwini Vachhani, Dean Carroll,
Evan Brehm, Jasmine Li, Prithvi Manjunatha
In our UX design case study project, our main objective was to enhance the user experience within OnBoard's Actions and Approvals features. Approvals, a distinct category in OnBoard's Actions function, enables board members to cast votes on decisions requiring boards members' approval before execution. These decisions comprise proposals, budgets, nominations, and other decisions vital to the organization's management.
The primary goals of this project included:
- Enhancing the clarity of action states displayed on the Actions homepage.
- Revamping the individual Approvals page to optimize screen real estate and present information intuitively.
Stakeholders at OnBoard tasked us with exploring and suggesting solutions to enhance the interaction of board members with Approvals and Actions, making them not just functional but also informative and intuitive.
The goal of this project was to improve clarity within OnBoard’s Approvals feature by evaluating the existing design and proposing redesigns to enhance the end-user experience. Additionally, we also worked on enhancing the visual clarity of the Actions homepage, aiming to improve users' experience in navigating the actions space.
Proposed Actions Page Redesign
Proposed Approvals Page Redesign
We conducted research on design systems to gain a better understanding of how they are created and utilized in the industry. As a team, our goal was to build foundational knowledge on creating design systems, understanding their overall purpose, and implementing them in our work. The focus of this sprint was to apply the learnings to streamline future design processes through the development of a design library.
Process:
OnBoard outlined several expectations regarding design systems. These included developing foundational knowledge through preliminary research and applying what we learned in the redesign process in the later stages. Using Figma, we created an design library with varying states for key components within OnBoard's design system, such as buttons, typography, and layouts.
Key Learnings:
A design system is a comprehensive set of guidelines and principles that define the visual and functional aspects of a product or service. A design library accelerates the design process by providing pre-designed components, templates, and assets that designers can reuse across different projects. By using a design library, designers can save time and effort in creating and maintaining consistent designs.
Through heuristic evaluation, we systematically analyzed the current interface based on usability guidelines to identify design issues and improve the overall user experience.
Objectives:
- Evaluate the Approvals interface and overall user experience.
- Identify usability issues and assess the efficiency of task completion.
- Uncover areas for improvement in terms of clarity and consistency.
- Inform the direction of our competitive analysis.
Process:
- Breakdown and assessment of OnBoard’s approval pages.
- Referenced Nielsen’s 10 usability heuristics as a guideline.
- Looked for violations of these heuristics.
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
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 empty space, requiring users to click through several pages to access the voting discussion. This violates the heuristic recognize rather than recall.
Heuristic Evaluation 3: State Hierarchy
Items in draft state are displayed above open approvals. It is standard for open/available items to be listed first
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 Takeaways
- OnBoard's current design restricts flexibility and efficiency.
- Often requires extra clicks to view important features.
- The status of approvals is often unclear, and users struggle to differentiate between the different states.
Through co-design workshop, our goal was to actively involve users and gain insights into their perspectives. For this workshop, we recruited board members from Purdue University's student clubs to interact with the product and perform the following tasks on OnBoard.
Co-designing with a board member of a Purdue University's student club
Walkthrough of the Current OnBoard Interface
Provided a overview of the existing OnBoard interface, ensuring participants were familiar with the design and features.
Performing Tasks using OnBoard's current design
Guided participants through tasks, including creating an Approval, accessing Voting and Discussion sections, and viewing results.
Uncovering Strengths & Pain Points
Explored and recognized both the strengths and pain points in the current OnBoard interface from the board members.
Feedback Session post
Co-design Workshop
Received feedback from participants specifically of experience with the Actions, Approvals, and Voting Results pages.
Co-design Workshop Takeaways
Customization Needs: The interface required more customization options, including additional filters to enhance user experience.
Voting Results Page: The voting results page was not user-friendly and lacked effective visualization. It should be made more graphical and comprehensible.
Excessive White Space: There was excessive white space on the page. Adding more content could help guide user actions more effectively.
Unclear Headings: The headings were unclear and unhelpful. Implementing tags for better categorization and visualization would improve usability.
While the approvals feature is used by three different user groups, including admins, contributors, and readers, our redesign focused on the needs of board members. OnBoard defines board members as individuals responsible for overseeing the company’s 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
The current design of OnBoard’s approval page lacks detailed information on the status of available actions. It also lacks filtering and sorting options, making it difficult for users to find the open actions.
Current Actions Page
The current design for creating a new approval provides limited information, making it difficult for users to determine the approval's state. It only displays a sentence without any bold or highlighted text, preventing users from quickly catching the status at a glance. Additionally, the interface is missing key features, such as voters’ details.
Current Approvals Page
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.
Proposed Actions Page
The redesign introduces several new features and improves existing ones. We also enhanced the layout of the approvals page by making it more informative, including details of votes cast, providing direct access to the discussion section, and offering more information about each approval.
Proposed Approvals Page
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 asked to imagine themselves as board members newly introduced to the OnBoard system and to vocalize their thoughts throughout the task completion process.
The results from the users testing showed that there was 38% reduction in clicks and a 20% decrease in task completion time significantly improving interface efficiency and performance reliability.