top of page

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. 

See prototype

BoardSpace_Woman arms.jpeg

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

5 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:

Existing  WireFlow BoardSpace.png

So, the current flow for return users who navigate to meeting-related information on the Boardspace companion mobile app is:

  1. Click the URL below to log in: https://app.boardspace.co

  2. Login to BoardSpace by providing your credentials: e-mail address and password;

  3. Click on Overview Tab in the button navigation area

  4. Click on the meeting that you will attend

  5. Users will be redirected to the screen with minutes information under the "Minutes" tab

  6. 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

  7. Users can see the comments to call to action by clicking on the “bubble comment” icon

  8. See Attachments by clicking on the “pdf file” icon in the right top corner under the “Agenda/Attachments” tab

  9. 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.

1_ UI Analysis NN Group Usability Heuristics (1).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. Based on one of the Universal Principles of Design,  UX Hick’s Law, “ The more options provided the longer it takes to make a decision”, there is confusion with the bottom navigation menu

  • user may not know to scroll to the right side to see more (all 8 tabs), and scrolling to the right side is not intuitive;

  • users may think that some words on the bottom navigation tab are cut off.

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:

Existing IA BoardSpace Sitemap.png

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:

New BoardSpace SiteMap.png

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:

Persona Anna. BoardSpace.png

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.

User Stories

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.png

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

Navigation Menu Humburger icon.png

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 meetings 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:

Low Fidelity Wireframes (1).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 Minutes Before.png

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.

Old Pages

IMG_3671 2.png
Group 1.png

Screen 3. Changes

Screen 3 Minutes After.png

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

Color Accessability  Updates.png

Here is the style guide that was created for BoardSpace companion mobile app with colors that meet web accessibility standards:

Style Guide.png

High-Fidelity Wireframes

The next step was to prepare high-fidelity wireframes. Here are examples of high-fidelity screens:

HF Wireframes.png

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:

  1. Find the Next Meeting;

  2. Go to Meeting Minutes

  3. Find meeting attendees 

  4. Find the Meeting Agenda 

  5. Click attachments to find Meeting minutes and Agenda PDFs.

  6. 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:

IDP Bar Graph.png

 Here are examples of screens with findings and changes:

Screen 4. Findings

Home_Minutes_Findings.png

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.

Home_Minutes_Findings_Changes.png

Screen 3. Findings

Screen 3. Changes

Home screen Finding.png

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.

Home screen Changes.png

Screen 8. Findings

Board Info_Findings.png

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

Board Info_Changes.png

Prototype Phase

Final High-Fidelity Wireframes

The final step was to create a high-fidelity prototype. Here are examples of the final screens:

Final HF.png

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.

bottom of page