Board Agenda

BOARD AGENDA

MY ROLE: UI/UX DESIGNER

DESIGN DURATION: 6 MONTHS

TOOLS: SKETCH APP, ZEPLIN

BACKGROUND

Board Agenda has been a platform used by 26 boards under Florida’s Department of Health(DOH) since 2015-2016. Since its inception, many software advancements and vetted practices have made it more clear that the current platform has outgrown its architecture.

PROBLEM

Users are required to use two programs (i-Builder and Web-iViewer) in order to create, review, and publish agendas. The feature/functions on these applications are outdated due to process changes. Additionally, switching between two applications for creating, managing, and collaborating on agendas created unnecessary complexity.

SOLUTION

The board agenda solution supports preparing, reviewing, and publishing agenda items and meeting materials required for the board meetings. Board staff can collaboratively prepare the agenda by creating a hierarchical list of agenda items and attaching meeting materials. The meeting materials include PDF documents, Audio, Video, or Medical Imaging files, which are imported into the system from various sources. The administrator or owner of the agenda can publish the reviewed and completed agenda. The published agenda is used by the board members to prepare and conduct the actual board meetings.

RESEARCH PROCESS

CURRENT FLOW | LIMITATION

CURRENT FLOW & PAINPOINT

The previous workflow required users to navigate between two separate platforms:

iBuilder: Used for creating agendas and managing files.
iViewer: Used for viewing agendas and facilitating collaboration.

Users were required to switch back and forth between applications to complete their tasks, disrupting workflow continuity.

Additionally, all the action buttons were fixed at the top during the process. A new user would spend some time getting familiar with the interface and the whole process. With limited landscaping, user didn't have enough view panels if it was a small screen. In addition to the "user-unfriendly" design, neither of these two applications was responsive.

DESIGN PROCESS

SPRINT | HI-FI MOCKUP | ITERATION | PROTOTYPE

SPRINT

During each sprint epic, I focused on simplifying user flows and incorporating accessibility features into the designs. My goal was to approach solutions from a user-centered design perspective. Once the decision was finalized, I delivered the high-fidelity mockup with a sleek and modern design aesthetic. I also circle back with the team to determine if the solution aligned with our business objective instead of over-designing the project.

Meanwhile, I started to work on the library for ImageAPI. Previously, there was no consistent style or branding across the company. Once I set up the style guide, I started to provide high-fidelity design after each sprint.

(Below are some screenshots showcasing the style guide, sketches, user flows, and low-fidelity mockups created during the design sprints.)

HI-FIDELITY PROTOTYPE & ITERATION

Integrating two applications into one is much like decluttering a house - it requires careful consideration of the user's existing behaviors and workflows while shaping the new experience. I began by reorganizing the navigation menu and creating a clear hierarchy for each functionality to achieve a more efficient user experience.

(Below is a clip showcasing a portion of the high-fidelity prototype.)

Iteration is an integral part of the design process. Below are examples of improvements made at various stages.

1. Users often import files from Axiom Pro(another digital file management application) when working on an agenda. In the original design, clicking the "Global Import" button triggered a modal pop-up. However, the feedback revealed that here is not enough landscape when browsing the files. I replaced the entire TOC view with "Global Import". Users now can have more landscape to browse, filter, and preview documents. Meanwhile, it keeps the consistent layout as the TOC view to ensure a seamless user experience.

2. In the initial version, agenda owners assigned tasks by entering the assignee's name directly into a column, which featured an auto-complete dropdown menu for filtering names. However, due to the technical constraints, I added an action menu if user left-clicks on the name instead.

3. I redesigned the thumbnail view due to the limited UI of third-party plugin for PDF viewer.

CHALLENGE AND CONCLUSION

Board Agenda was the first project since I joined ImageAPI, I set up a general library to keep the style consistent for all the applications across the company while I was on a tight schedule of the design sprints.
During the presentation in our first demo with DOH, the stakeholders and clients gave a high compliment to the new application.
I got involved in most stages of this project, from the first planning to UAT.
Once the site was deployed, we got a very positive feedback from the client.