Custom Business App Builder

I redesigned the FileMaker Pro Advanced edit layout mode to improve our customers' business productivity, promote ease of use, and drive user adoption of the FileMaker platform for creating low code custom business apps on macOS, iOS, Windows, and web. From design and feature planning to final visuals and icon production, I led the entire UX and interaction design including user testing and interactive prototype development.

Apple (Claris) | Lead Designer | 2018

Website

I redesigned the FileMaker Pro Advanced edit layout mode to improve our customers' business productivity, promote ease of use, and drive user adoption of the FileMaker platform for creating low code custom business apps on macOS, iOS, Windows, and web. From design and feature planning to final visuals and icon production, I led the entire UX and interaction design including user testing and interactive prototype development.

Apple (Claris) | Product Design

Website

I redesigned the FileMaker Pro Advanced edit layout mode to improve our customers' business productivity, promote ease of use, and drive user adoption of the FileMaker platform for creating low code custom business apps on macOS, iOS, Windows, and web. From design and feature planning to final visuals and icon production, I led the entire UX and interaction design including user testing and interactive prototype development.

Apple (Claris) | Lead Designer | 2018

Website

See me use the new layout tools to create a custom database app for documenting usability findings of the new layout mode...

A redesigned layout mode.

Must look good on both
macOS and Windows.

A redesigned
layout mode.

Must look good on both
macOS and Windows.

A redesigned
layout mode.

Must look good on both
macOS and Windows.

Provide a more streamlined environment for creating custom app layouts. The Inspector, Fields and Objects tabs are more usable, less intimidating, and discoverable through convenient panes inside the document window. Hide or show panes individually to create a flexible workspace.

In years past, designers hurried on Windows esthetics, but Windows customers are human and need love too! Our customer base is 60% on Windows and we must make it look as good as it does on macOS, even if we work for Apple.

macOS visual guidelines

Windows visual guidelines

Field-Picker-Final-VIsuals-Specs-Windows-popovers-search

Iconography

Problems we solved.

From previous versions of Field Picker, Layout Objects, Document Workspace.

Problems we solved.

From previous versions of Field Picker, Layout Objects, Document Workspace.

Problems we solved.

From previous versions of Field Picker, Layout Objects, Document Workspace.

Problems we solved.

From previous versions of Field Picker, Layout Objects, Document Workspace.

I interviewed FileMaker customers and based on their experiences and product requirements, here were some of the problems from previous releases of FileMaker Pro and Pro Advanced that were solved with the new release of FileMaker Pro Advanced 17 (launched in May 2018).

The document workspace moves to different positions between browse mode and edit layout mode, creating a bit of disorientation and requiring the customer to move it to a more desired position. In the new design, the position of the document stays in a constant position in the middle as tools and side panes open on the sides during edit layout mode.
Customers complain of palettes overlapping their documents and having to move them out of the way everytime they enter edit layout mode. Plus, the Inspector is not scrollable so customers with small screens cannot use it. In the new design, it is easy to show or hide the side panes that are anchored to the document window and the document always stays front and center. The inspector can be teared out to be floating as needed or anchored and scrollable.
The palettes used to be shown only in the active document window, which means they don't show on other [inactive] document windows. With the Fields palette, customers wished they could compare or easily copy fields from one document to another. In the new design, the panes are anchored to the sides of each document, active or inactive, making it easy to copy or compare fields from one to another and boosting customer productivity.
One of the biggest issues that plagued the customer experience, spanning the past 5 releases starting with FileMaker Pro 12 in 2013, was that for some customers who have poor eyesight and have turned on the high contrast accessibility feature on their mac, they could not see their fields because the field names display in a black text on a black or dark gray background. I learned this by scouring the FileMaker Community forums and saw all the bugs reported. I'm happy to say that this issue is finally resolved in release 17 with dark text on a light background.
In the old design, customers who have long filenames were not able to see the entire field names making it hard to choose the right field to use in their document. In the new design, the fields pane on the left can be dragged to extend its width.
Because the Fields palette used to be hard to use, customers resort to using the Manage Database dialog which is effective but it looks intimidating and less intuitive and it's a modal dialog so it's even harder to copy fields from one document to another document.

The document workspace moves to different positions between browse mode and edit layout mode, creating a bit of disorientation and requiring the customer to move it to a more desired position. In the new design, the position of the document stays in a constant position in the middle as tools and side panes open on the sides during edit layout mode.
Customers complain of palettes overlapping their documents and having to move them out of the way everytime they enter edit layout mode. Plus, the Inspector is not scrollable so customers with small screens cannot use it. In the new design, it is easy to show or hide the side panes that are anchored to the document window and the document always stays front and center. The inspector can be teared out to be floating as needed or anchored and scrollable.
The palettes used to be shown only in the active document window, which means they don't show on other [inactive] document windows. With the Fields palette, customers wished they could compare or easily copy fields from one document to another. In the new design, the panes are anchored to the sides of each document, active or inactive, making it easy to copy or compare fields from one to another and boosting customer productivity.
One of the biggest issues that plagued the customer experience, spanning the past 5 releases starting with FileMaker Pro 12 in 2013, was that for some customers who have poor eyesight and have turned on the high contrast accessibility feature on their mac, they could not see their fields because the field names display in a black text on a black or dark gray background. I learned this by scouring the FileMaker Community forums and saw all the bugs reported. I'm happy to say that this issue is finally resolved in release 17 with dark text on a light background.
In the old design, customers who have long filenames were not able to see the entire field names making it hard to choose the right field to use in their document. In the new design, the fields pane on the left can be dragged to extend its width.
Because the Fields palette used to be hard to use, customers resort to using the Manage Database dialog which is effective but it looks intimidating and less intuitive and it's a modal dialog so it's even harder to copy fields from one document to another document.

Custom App Builder

Intuitive layout mode for
increased business productivity.

Custom App Builder

Intuitive layout mode for
increased business productivity.

Custom App Builder

Intuitive layout mode for increased business productivity.

Custom App Builder

Intuitive layout mode for
increased business productivity.

Custom App Builder

Intuitive layout mode for
increased business productivity.