Problem

How might we redesign OnBoard’s Actions and Approvals for board members?

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.

Solution

Addressing the issues through our redesign

Proposed Actions Page Redesign

Proposed Approvals Page Redesign

Research

Exploring the problem space

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

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

Ideation

How might we address the pain points in the current Actions and Approvals through our redesign?

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

Design

Our final redesign proposals for OnBoard's features

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.

Co-design Workshop Takeaways

Participants reported an increase in clarity with our redesigned screens. This is supported by a 2-5 click decrease on many actions and a reduction in overall time to completion by up to 10 seconds for some tasks, as shown above
‍Improved Clarity: Participants found the redesigned screens clearer, with a significant decrease in clicks needed to complete many actions.
Faster Task Completion: There was an overall reduction in time to complete tasks, sometimes by as much as 10 seconds.
Easy Location of Buttons: Participants noted the ease of locating relocated buttons and found these items faster than on the previous OnBoard system.
Clear Visual Representation: Those who tested the redesign thought that the visual representation of the results page was very clear and informative. In contrast, participants testing the current page felt they had to do some internal processing to understand the information presented.