Background

Project Home was an initiative to improve the client and project management experience at Upstatement. It included quick links to conference lines, important files, and a roster of everyone working on the project. As a design apprentice at Upstatement, I worked on feature updates to the project.

In This Case Study

I worked on two features of this product:

1. Edit Mode
2. Budget Reports

Problem

Employees at Upstatement had to go to the Wordpress back-end to edit anything on the page, which was frustrating and time consuming.

Goal

I was tasked with establishing a way to edit a project from the interface itself.

Research

We decided to implement editing section by section, so that we could iterate and use what we were designing before implementing it globally. We started with the Links section.I investigated the WordPress backend and listed out all of the data that needed to be edited or added:

• Link URL (string)
• Link Name (string)
• Link Type (single select)
• Hide from client (checkbox)
• Date
• File upload

I also looked at other products and how they let users edit information. A big point of inspiration was Squarespace.

Explorations

I first experimented with a modal style, but we thought it would be more intuitive and less time consuming if the editing could take place in context. We also decided to simplify and automate this information, which cut the data input down to:

• Link URL (string)
• Link Name (string)
• Hide from client (checkbox)

I then explored creating an “Edit Mode,” that mimics the interface itself and lets you quickly edit in context. The colors invert, letting the user know they are in a different mode. The user can then click on an icon to expand the edit fields, which then automatically save.

The details

I worked to establish patterns such as empty states, indicating saving status, reordering links, and entering edit mode.

Adding more

I worked with the developer on the project to implement this, then worked on applying it to the roster. This added an extra layer of information, since the user needed to be able to add a team, and then add people to that team. To deal with this, I experimented with how to edit the team name, and how to create a hierarchy between adding a team vs adding a person. Editing a person simply followed the patterns that I established with the links section.

In the end

Upstatement Producers can now easily create and edit projects without dealing with frustrating Wordpress forms.

Problem

Clients at Upstatement received weekly updates of how much of their budget has been used, and how much time was left in the project. This email couldn’t visualize any information, and had to be done manually by Upstatement’s studio manager.

Goal

Visualize a project’s budget and time so that clients can easily understand where they currently are at through the project, and can make decisions about how to manage their money and time left.

Research

I interviewed the Studio Manager to understand how the budget worked, and how this process was currently working. Each week, the Studio Manager manually checked the project’s budget through Upstatement’s time tracking system, checked how many weeks through the project they were, and calculated a percentage to demonstrate whether the project was over budget or not. This email would say, for example, “We've completed 10 of 22 weeks (45.45%) and have used 43.23% of the target budget.”

Explorations

I explored many ways to visualize this information, eventually landing on the visualization below. We felt that visualization had the most clarity for the context of checking whether the budget was above or below the current timeline.

Final Product

I implemented a static version of my designs and collaborated with the developer on the project to implement the details of the edge cases such as how it would work responsively, and with different edge cases, such as a large amount of weeks, and going over budget or time. This process is now automated and always available to clients via PM Home.