Bubbly

Overview

With my team, we spent 10 weeks using multiple research methods with our design focus of creating an interconnected method of communication between the different teams and departments of Procurify in mind. All the research we conducted enabled us to find the design opportunities to eventually come up with Bubbly and refine it over the following four weeks.

The first 10 weeks informed us that they have many inefficient meetings and their office layout limits communication between those two teams. Consequently, Bubbly was designed to help facilitate communication between customer-facing and development teams.

We designed Bubbly so there are two versions. A desktop version allows employees to only view and manage their own team’s project bubble. A Team Board, on the other hand, would show the announcements and all project bubbles. Individuals can also log in to comment on announcements. The separation of the two versions ideally encourage employees to have to approach the Team Board to view announcements and project bubbles and talk to others they normally would not speak to.

Contributions

My contributions include writing content for posters and planning the activities for Procurify employees to complete. For the first four weeks, we observed how the company worked and conducted informal interviews. I helped write and proofread the content for the posters that presented our findings in those weeks. After that, there were two major sets of activities that I helped plan for employees to complete, which helped us discover any design opportunities.

One of the design opportunities allowed for Bubbly, which I helped ideate the concept of Bubbly to make it more suitable for Procurify’s situation. Once we had a concept, I also helped build the prototype using HTML, CSS, and JavaScript within a flat-file content management system (CMS) known as Grav. A flat-file CMS manages text files used to display webpages and the data used is also stored onto text files instead of a database.

Challenge

A major challenge I encountered was with the building of the prototype. I was not able to program the functionality so bubbles can be created using the Grav CMS. We used a plugin called “Add Page By Form”, which would create pages that could later be iterated through to be displayed as bubbles on the homepage. Unfortunately, I was unfamiliar with how the YAML frontmatter in those pages communicated with the rest of the CMS. The YAML frontmatter, which is also known as headers, is the block of code that is processed by Grav to configure the page. This code must be correctly configured the page for the iterator to find the appropriate pages to display on the homepage.

            title: 'Add Announcement'
template: form
pageconfig:
    parent: page.parent
    include_username: true
    overwrite_mode: true
pagefrontmatter:
    visible: true
    template: announcement
    title: 'Create New Announcement'
    taxonomy:
        type: announcement
form:
    name: addpage.announcement
    fields:
        -
            name: 'title'
            type: text
            id: title
            placeholder: 'Enter announcement here. (50 character limit)'
            validate:
                min: 1
                max: 50
    buttons:
        -
            type: submit
            value: Add
    process:
        -
            addpage: null
        -
            redirect: /

I was able to get through this problem by analyzing how the frontmatter worked in the Grav documentation and playing around with the variables to understand how they worked. In the end, I was able to configure the form’s frontmatter so that it was created in the appropriate folder and it had the appropriate attributes for the iterator to find either the announcements or the projects.

Reflection

Bubbly was successful in that the research we gathered in those four months supported the final design. It addressed the problems we discovered regarding their frequent inefficient meetings and where different departments did not know what each other was working on.

As for the YAML frontmatter problem, it has really reinforced the importance and usefulness of documentation. I should continue to keep reading it to solve any future problems that I have. It has also demonstrated me how useful YAML can be to create templates that can be helpful to reduce the amount of work necessary.