OnBoard
_edited.png)
Project Overview
Problem
Current users are confused by the different approval states, prompting a need for enhanced clarity within Onboard’s approval feature.
Tools
Figma
Miro
OnBoard is a B2B intelligent board management software that offers tools for effective board communication, organization, and decision-making. This project focused on improving meeting approvals within OnBoard.
Solution
Our proposed redesign provides the user with more information, improves the visualization of data, and streamlines the accessibility of key features.
My Role
-
Conducted a heuristic evaluation to identify usability issues within the current interface
-
Analyzed industry competitors to gauge OnBoard's strengths and weaknesses
-
Mapped user journey to identify painpoints
-
Created sketches for redesign ideas
-
Developed lo-fi and hi-fi wireframes
-
Tested prototypes with users
Design Process
1
2
3
4
5
Heuristic Evaluation
Competitive Analysis
User Journey
Sketching & lo-fi
Hi-Fi Mockups
6
User Testing
Heuristic Evaluation
The goal of this activity was to find and assess usability issues, evaluate task efficiency, and highlight areas for improvement in clarity and consistency. We broke down and analyzed OnBoard's approval pages using Nielson's 10 usability heuristics, identifying violations and gaining valuable insights to enhance the user experience.
Findings
OnBoard’s current design is overly minimalist, restricting flexibility and efficiency
Users are often required to take extra steps to view important features
The status of approvals is often unclear, so users struggle to differentiate between states
Competitive Analysis
Our team analyzed OnBoard's top competitors to take a closer look at how approvals are managed across different platforms. Our process for the analysis involved identifying the strengths and weaknesses of each company’s design system for approvals. We formed our comparison criteria by referencing findings from our heuristic analysis.
Takeaways
-
Make efficient use of space and display more information
-
Images and icons create visual balance for content-heavy screens
-
allows for simple navigation and clear visualization
-
users can scan information and quickly gather insights
-
-
Color-coded elements maintain consistency and can help users recognize and distinguish between different types of information
.png)
User Journey Mapping
We identified pain points by observing two students interact with the current site. Our team focused on their struggles and collected feedback specific to approvals. Using this data, we mapped the user journey from a board member's perspective to understand their interaction with the current Approvals design. The table below summarizes our findings.
Interaction | Access OnBoard | View Approvals | Discussion | Cast Vote | Sign and Save |
|---|---|---|---|---|---|
Actions | Login and open actions page to access approvals | navigate to open approval | Click on discussions | Vote on approval | Click save and e-sign |
Identified Pain Points | Lack of sorting options to filter actions | Approval states are unclear to users | Discussion feature is not readily accessible | It is difficult to assess the voting results | No confirmation status for performed actions |
Proposed Redesign | categorize actions into groups | improve the clarity of approval states | Enable direct access to the discussion feature | Improve the visibility of voting data | Create option to save and submit responses |
Sketching
To address the problems identified from our research, we designed low-fidelity sketches of conceptual redesign ideas.
Key Features
-
approval state tags
-
advanced filter options
-
data visualization features
-
horizontal widgets
Final Designs
Our final solution features high-fidelity mockups that effectively tackle the issues we identified during our research process. Each page has been curated to elevate clarity by displaying information more efficiently and allowing for greater scannability.
Approval Details Page
.png)
Allows for quicker scanning. Approval states have been renamed to be more intuitive.
Actions Main Page
Actions are displayed in order of urgency, and the statuses are clearly marked by colored tags.
Voting Results Page
Features enhanced information visualization. Can be integrated as an overlay for greater flexibility.
Usability Testing
To assess the impact of our redesigns on the user experience of approvals, we conducted user testing with student board members. Our evaluation compared task-completion efficiency for both the existing approvals system and the redesigned approval screens.
Findings
-
Redesign is clearer and more informative
-
Improved visibility of buttons and tools helped participants locate important features more quickly
-
Noticeable reduction in time and clicks taken for tasks
Next Steps
Moving forward, our next steps involve iterating on current designs and implementing changes to approvals in related OnBoard features, such as Meetings and Agendas, using the ideas from our proposed redesign.
Iteration
Meetings & Agendas
Reflection
This marked my second collaboration within Purdue’s Experience Studio, and I’ve had an exciting learning journey with the team at OnBoard. Because our project was primarily UI-focused, I had the opportunity to hone my skills in visual design and practice different methods of evaluation. Most importantly however, this project has taught me the significance of blending aesthetics with informed design. This experience has deepened my comprehension of the steps required for crafting a well-balanced and informed design. I look forward to applying my learnings from this course to future projects!