Product Refresh
UI Redesign
The Project
One of the main goals of OmniPlan 4 was to make it easier for new users to learn, and less intimidating for new Project Managers. I designed the version 4 inspectors to become more modern and intuitive.
Idea
I pitched the idea of refreshing the inspectors to the Design Manager and OmniPlan team. While I was working on other general OP 4 changes, I saw that the style and layout of the inspectors could be updated with some fundamental design effort.
Organize
I worked on a layout solution that would feel harmonious within the app, as well as within the context of Mac apps. I focused on making improvements without moving anything out of place for existing customers.
Refinement
After my pitch was approved, I made mock ups for the rest of the inspectors. The Product Manager, Engineers, UX team and I refined and changed decisions that I had made. There were discoveries made within the team that helped us to envision a more modern and sophisticated version of Omniplan, but without making radical changes.
Project Before: Inconsistent
The Project section was crammed with a lot of information. There was not a consistent layout, and some of the sections were confusing.
After: Structured
The top Project section was broken up into sub-sections, which allowed more specific naming. The entire inspector followed the same layout structure, which make it easier to located different fields. Unconventional buttons were changed to conventional buttons so that the interface is more intuitive to new users.
Milestones Before: Confusing
It was unclear in this UI what the possible interactions were. There wasn't any grid layout, so the layout felt messy.
After: Powerful
Everything in this view was changed fit the same layout. Interactions are clarified by some brief text, and a color selection button.
Task Before: Uncomfortable
This section has lots of input field, and some fields appear to be editable but are not. In addition to a confusing layout, some of the information was in an order that didn't feel comfortable. There were several buttons that only used glyphs, without any text description.
After: Organized
The new layout maximized grouping and structure so that the fields and buttons were easier to manage. Fields that were not editable appear in a greyed box to signal that they are calculated results, and not changeable in that location. Buttons that had no label were changed to include a label and glyph.
Resource Before: Dense
The resource section was packed with details, and new customers had a hard time understanding all the different components.
After: Breathable
A new grid layout and separate grouping made this section longer, but more understandable. Information related to the Resource role became clearly labeled and each new section on its own line.
A whole new section for Resource costs was made with greyed boxed for sums that could not be edited.
An odd item that also needed new UI was that the Assignments Task progress number. This number could be changed, but it didn't appear so before. A simple input box around the editable number improved this affordance.
Final Thoughts
This project is an example of how simple design concepts can elevate a product experience. I used elementary design concepts, and the perspective of new customers to make simple and powerful changes to UI. These changes were not radical, so even long time customers who were familiar with the UI would still be able to use the software in the same way they always had.