BoardSpace Project
A Mobile Meeting Application
Deliverables
Project Plan
High Fidelity Wireframes
Clickable Prototype
Design System
My Role
UX Designer
Usability Tester
Project Context
4 Weeks to hand off deliverables.
Company Introduction
BoardSpace is a company that provides meeting software for boards of directors and committees. Their goal is to help volunteer-led boards of directors do a better job and be more effective to the communities they serve.
The Project Brief
BoardSpace was seeking a redesign of their mobile experience. They want to provide easy and accessible support for users who do not want or are not able to carry a laptop to meetings. The focus of this project was the Meeting, Minutes, and Agenda areas of the mobile site along with changes to site navigation.
Getting to Know BoardSpace
With no documentation available I had to explore the product to get an idea of it’s functionality. I was granted Director level access which was the role the project focused on. As part of this process I created a Wireflow outlining the current structure of relevant features within the mobile application. View Full Wireflow.
Snapshot of Wireflow
 Snapshot of Wireflow |
|---|
Weekly Check In Meetings
The Design Team had regular check-in meetings with the client. Collaboratively we created slide decks that we presented each week, showcasing our work and keeping the client informed on our progress.
I was solely responsible for all communication between the client and the Design Team between meetings.
UX Audit
Next, I started on the Audit. This involved reviewing the relevant features in the wire flow and assessing them using Universal Principles of Design, Nielsen Norman Group Usability Heuristics, and checking colors for accessibility with the WebAIM Contrast checker.
 Snapshot of UX Audit |
|---|
High Level Design Recommendations
After consolidating the audit data clear themes arose showing areas where improvements to BoardSpace could be made.
Navigation Menu
Accessibility
Reduce main menu options. Reconfigure remaining content into hamburger menu. Rename selected areas.
Ensure all new color combinations are compliant with web accessibility standards.
User Control
Insert a back button function for selected flows. Ensure the user can exit anytime during the experience.
Text Alignment and Hierarchy
Define text alignment and hierarchy standards. Add font sizes to improve hierarchy.
Visual Distinction
Create a visual distinction between meeting tabs. Create clear clickable defined areas for sections. Reword descriptions within sections.
Design in Low Fidelity
With actionable improvements decided upon the design team went to work creating Low Fidelity wireframes. I was responsible for the redesign of the home page. See iterations below.
 Home Page Iterations |
|---|
Design in High Fidelity
With this project, the only major difference between the low and high-fidelity design were some choice uses of color. Since that was the case a high fidelity prototype was created next.
Once High Fidelity designs were made I used the WebAIM contrast checker to test our colors for accesibility.
Some of the BoardSpace colors did not pass. I recommended some slightly darker colors to my team so that we could meet web AA accessibility standards.
 Home Page Color Adjustment |  Minutes Page Color Adjustment |
|---|
Test Script
I consolidated user tasks within the features of focus for the redesign effort and wrote test scenarios accordingly.
View full Test Script.
Usability Testing
I conducted two of the team’s five usability tests. All tests were recorded so that team members could view every test and make their own observations. All tests were conducted via moderated remote testing and used the same test script.
Significant Findings
There were four main issues uncovered in usability testing outlined in the graph below.
 Usability Testing Results Graph |
|---|
Biggest Issue: The Minutes Page
Four out of five users hesitated or struggled with the Minutes Page. When they arrived there they seemed disoriented.
Users repeatedly navigated to the minutes page and either didn’t know where they were or expressed uncertainty that it was in fact the minutes page.
My Assessment
In looking at the data it was clear to me that a disconnect was happening between the user clicking on the ‘Next Meeting’ item and landing on the Minutes Page.
Users just didn’t expect to be taken to the Minutes page after clicking ‘Next meeting’ on the home page.
My Recommendation
To fix this issue I designed a landing page for Meeting information.
The user would be taken to this page after clicking ‘Next Meeting’ on the home page.
This would serve as a place from which the user could navigate to view additional meeting related pages including Minutes, Agenda, and Attendees.
 Meeting Landing Page |
|---|
Final High Fidelity Frames
 Home Page | Meeting Landing Page |
|---|---|
 Minutes Page |  Agenda Page |
 Attachments Page |  Contacts Page |
Prototype Video
In Conclusion
BoardSpace was looking to redesign their mobile experience. In focusing effort on the restructuring of navigation and improving the most used areas of the site BoardSpace was given clear and actionable ways to improve overall usability.
The biggest challenge with this project was diving headfirst into it with two team mates I did not know. However through learning to work together we were able to offer this small company valuable insights. We get to leave the project as friends and colleagues.