BoardSpace
Meeting management app that helps people who are volunteering as a Board of Directors and overcome the daunting task of looking after hundreds of documents, attending lots of meetings, preparing agendas, approving minutes, and keeping on top of to-do lists to get their work done more efficiently and in less time.
My Role
UX/UI Designer
Technology
Cloud Based Web Application and a Browser-Based Mobile Version
Duration
May - June 2023
Tools
Figma
FgJam
Google Form
Zoom
UX Process
Five stages of the Design Thinking approach in Agile
Epathy
1
Define
2
Ideate
3
Prototype
4
5
Test
Background
BoardSpace is a robust board management software that streamlines and automates board tasks. Used by condos, HOAs, associations, nonprofits, and charities, it boosts productivity, transparency, and efficiency in organizing documents, managing agendas and minutes, and tracking to-do lists, projects, and events.
Our managed board services assist with onboarding, governance, and expert guidance.
BoardSpace aims to redesign the mobile browser experience, focusing on agenda and meeting features, to keep users connected, informed about meeting details, and prepared for upcoming meetings.
Problem Space
Managing documentation during meetings is often confusing and inefficient. Users struggle with organizing, accessing, and keeping track of agendas, minutes, and other essential documents, leading to decreased productivity and increased frustration. This disorganized approach hampers effective communication and decision-making during meetings.
Confusion managing documentation in meetings
Empathy Phase
Existing Wireflow
At the beginning of the design process in understanding the potential confusion where it comes from in the existing user experience of the current flow for return users who navigate to meeting-related information by using the BoardSpace companion mobile app, our design team built the existing BoardSpace wireflow by using screenshots of existing user interface screens and connecting them between each other. Here is an example of wireflow:
So, the current flow for return users who navigate to meeting-related information on the Boardspace companion mobile app is:
-
Click the URL below to log in: https://app.boardspace.co
-
Login to BoardSpace by providing your credentials: e-mail address and password;
-
Click on Overview Tab in the button navigation area
-
Click on the meeting that you will attend
-
Users will be redirected to the screen with minutes information under the "Minutes" tab
-
Under the "Minutes" tab, on the screen user can view:
-
Title of the meeting
-
Meeting Location
-
Date
-
Time
-
Present
-
Recording Secretary
-
Regrets
-
Call to Order
-
Adjournments
-
-
Users can see the comments to call to action by clicking on the “bubble comment” icon
-
See Attachments by clicking on the “pdf file” icon in the right top corner under the “Agenda/Attachments” tab
-
The back button brings to the e-mail letter “Your account has been created” which contains Boardspace URL info from the date of creating the account.
Existing User Interface Analysis
Next, our design team made the conclusion to analyze the existing user interface by using Nielsen Norman Group Usability Heuristics, Universal Principles of Design, and ADA Accessibility Standards.
Here are some examples of user interface analysis.
.png)
1. Based on one of the Nielson Norman Group Usability Heuristics, “User Control and Freedom”, its navigation menu under the hamburger icon has confusion with the content, there is offered only administrative options.
2. Based on ADA Accessibility Standards, there are accessibility problems with the medium orange on medium blue where icons are hard to decipher - size and color.
3. The Nielsen Norman Group's Usability Heuristics, particularly the principle of "User Control and Freedom," indicates that the message icons are a source of confusion for users.
4. According to Hick's Law, a principle from the Universal Principles of Design, "The more options available, the longer it takes to make a decision." This lead to confusion with the bottom navigation menu:
a. Users might not realize they need to scroll to the right to view all 8 tabs, as this action is not intuitive.
b. Additionally, some users may perceive that certain words on the bottom navigation tabs are truncated.
Existing Site Map
After building the existing BoardSpace wireflow and analyzing the existing user interface our design team understood that the main confusion in using the existing BoardSpace companion mobile app belongs to the confusion with navigation to the content of the meeting-related information and documentation.
To understand better the whole picture of the navigation of the companion mobile app our design team decided to recreate an existing site map.
Here is an example of the existing sitemap:
After reviewing the existing sitemap by our design team, we discovered duplicate paths that lead to the same meeting-related information on both the "Meeting" and "Actions" tabs. Additionally, we found that the "Notifications," "Polls," and "Planner" tabs in the bottom navigation menu are not frequently used and do not contain relevant information for each meeting. In an effort to simplify navigation and reduce the number of tabs in the bottom navigation menu and hamburger icon menu.
Recomended Site Map
Our design team has made changes to the existing sitemap. Specifically, we have moved the "Actions," "Meetings," "Planner," "Notifications," and "Polls" tabs from the bottom navigation menu to the left navigation menu under the hamburger icon. We have also relocated the "Settings" and "Log Of" tabs from the top navigation menu to the bottom left. Please see the new sitemap as an example:
Define Phase
Goal
The main goal is to iterate the existing product so the solutions implemented are reducing the confusion of users in meetings.
Redesign the mobile browser experience, with a focus on agenda and meeting features, in a way that allows users to feel connected to the organization, informed on all meeting details (past or present), and prepared for the upcoming meeting.
HMW (How Might We)
How Might We reduce the time for the user to navigate to necessary information related to the meeting?
How Might We improve readability?
Solution Statement
-
Make recommendations to optimize the look and feel of the brand(design system, etc) by creating a new style guide:
-
Colors
-
Icons
-
Visual hierarchy
-
Alignment
-
Visual Distinction
-
-
Optimize the main navigation and present a prototype of it
-
Minutes
-
View Attendees
-
Agenda
-
Documents
-
Success Factor for Design Team
Decreasing time in finding necessary information related to the meeting
Reduce confusion in finding relative information by navigating to the necessary information and documentation.
Persona
BoardSpace is the product that was designed for people who are volunteering as a Board of Directors and overcome the daunting task of looking after hundreds of documents, attending lots of meetings, preparing agendas, approving minutes, and keeping on top of to-do lists by using BoardSpace tools on web application and on companion mobile app to get their work done more efficiently and in less time. However, my persona, Anna, represents group Directors who confused by using BoardSpace companion mobile app when she tried to navigate to the meeting's relative information.
Here is an example of a persona below:
User Stories
Our design team was working on user stories for the next release of the minimum valuable product of BoardSpace. Here is an example of the user story that I was working on:
As a part of a committee as a Board Director, I want to navigate within the meeting-related information So I could feel connected to the organization, informed on all meeting details (past or present), and prepared for the upcoming meeting.
Ideation Phase. Round 1
Design Recommendations
After analyzing the existing user interface and user experience of BoardSpace our team provided the following recommendations to reduce confusion with navigation to relative information and documentation for the meeting here are some examples of our suggestions :
Bottom Navigation Menu
-
Reduce the number of tabs in the bottom navigation area from 8 to 3 and keep tabs such as: “Overview”, “Board Info”, and “Documents”
-
Rename the “Overview” tab to the “Home” tab
Navigation Menu under the hamburger icon
-
Move from the bottom navigation area 5 navigation tabs: ”Actions”, “Meetings”, “Planner”, “Notifications”, and “Polls” to the left navigation menu under the Hamburger icon;
-
Move to the bottom of the left navigation menu “Settings” and “Log Of” tabs
-
Include icons next to each navigation tab under the Hamburger icon
User Control and Exit
-
Insert a back button function for selected flows
-
Ensure the user can go back and/or exit anytime during the experience
Text Alignment and Hierarchy
-
Define text alignment and hierarchy standards
-
Create a cohesive feel throughout the mobile experience
-
Reduce text and apply a minimal layout
Visual Distinction
-
Create a visual distinction between meeting tabs
-
Create clear, clickable defined areas for sections
-
Reword descriptions within sections
Low Fidelity Wireframes
At the internal meeting between our design team and our client, the CEO of BoardSpace, were discussed design recommendations and showed low-fidelity wireframes with possible changes to the existing user interface for the navigation bottom menu, navigation menu under the hamburger icon, and the most important pages: Home (Overview screen), Minutes, and Agenda.
Here is an example of all low-fidelity wireframes:
.png)
Testing Phase. Round 1
Testing session with client
Our design team decided to conduct usability testing of low-fidelity wireframes with the CEO of BoardSpace and collect feedback about the first changes.
Findings
The new design of the user interface for the BoardSpace was accepted by our client. However, during the testing session with the CEO of BoardSpace, our design team found some confusion with the new design based on which our design team made some changes. Here are examples of screens with findings and changes:
Screen 3. Findings
Screen 3. Changes
Finding 1. Comment bubbles do not need to be located to the title of the topic as it located on the existing view of the Minutes page.
Change 1. It could be just one comment bubble on the top of the top right side of the page.
Finding 2. There could be more than one attachment to the meeting and the Documentation tab meaning general documentation for the company.
Change 2. Attachments were moved to the main bottom navigation area and placed in the center of the bottom navigation area instead documentation icon.
Ideation Phase. Round 2
Style Guide
Board Space did not have a design system or style guide but the CEO of the company had some suggestions for the colors, font style, and icon type that should be included in the design of high-fidelity screens. The main suggestion was to follow the design style of the desktop application.
Colors and Accessibility Design Recommendations
After collecting all colors from the existing web application of BoardSpace and analyzing them on meeting web accessibility standards we found that existing green and orange colors do not meet web accessibility standards. And here are the recommendations for new orange and green colors:
Existing Color
Recommended Color
Here is the style guide that was created for BoardSpace companion mobile app with colors that meet web accessibility standards:
High-Fidelity Wireframes
The next step was to prepare high-fidelity wireframes. Here are examples of high-fidelity screens:
Testing Phase. Round 2
Usability Testing
For this round of usability testing, our design team conducted 5 moderated, remote tests. Participants were recruited based on being a target user and platform skill and familiarity level. The group completed recruitment by asking family, friends, and related networks.
The major goals were to validate the app product, have users easily navigate through all tasks, understand the overall concept, find value in the content, and have an overall delightful user experience. The process is part of the larger objective to help the user find all related meeting information in real-time.
Here is the list of tasks that each test participant went through:
-
Find the Next Meeting;
-
Go to Meeting Minutes
-
Find meeting attendees
-
Find the Meeting Agenda
-
Click attachments to find Meeting minutes and Agenda PDFs.
-
Return to the Home page.
Findings
During the usability testing session with 5 new participants, our design team found some confusion with the new design:
Here are examples of screens with findings and changes:
Screen 4. Findings
Screen 4. Changes
Finding 1. It is visibly hard to recognize that user on the Minutes page.
Change 1. The active tab has a light blue background with white bold font and a dark blue line on the bottom and the font size is 20 px;
Finding 2. It is visibly hard to recognize that the Agenda page is not active.
Change 2. A not active Action tab has a light grey background with dark grey font and Drop Shadow with blur 4 on the bottom and the font size is 20 px.
Screen 3. Findings
Screen 3. Changes
Finding 1. It was hard to understand that the meeting section is clickable.
Change 1. Show that each group of information is clickable by adding a shadow.
Screen 8. Findings
Finding 1. The Board Info tab was misleading.
Change 1. Change the Label Name for the Board Info tab to, for example, “Members”.
Screen 8. Changes
Prototype Phase
Final High-Fidelity Wireframes
The final step was to create a high-fidelity prototype. Here are examples of the final screens:
Conclusion
This project taught me how to apply design thinking to enhance existing solutions. Moving forward, I would conduct user testing before beginning the design process to better understand current users' pain points with the BoardSpace mobile app.
I am satisfied with the new user interface and improved navigation. It was rewarding to find that, after usability testing, some users favored the mobile app over the desktop version.
Feedback
I received favorable feedback from the founder and CEO of BoardSpace.
