Overview
FileMaker Pro is a cross-platform database software from Claris International, a subsidiary of Apple Inc., that allows users to easily create custom apps for iPad, iPhone, Windows, and Mac. FileMaker Pro helps organize data into screens, layouts, or forms and manage contacts and projects ; allowing businesses of all sizes to successfully participate in the digital evolution without needing to require complex coding skills. Today, we are in the most exciting time for software - the digital transformation era. This era is powered by data and AI, and FileMaker has been an incredibly powerful tool for data heavy business where they need to retrieve, store, and coerce different custom data sets quickly. I helped FileMaker Pro shape their new features and user experience for release 18 and 19.
URL: https://www.claris.com
Services:
-
UX Design
-
Interface Design
-
Visual Design
Sector:
-
Development software
-
Database
My Role:
-
Mockup, Prototype, Visual and UI design
-
Maintain a consistent, cohesive design system
-
Create a fresh look and feel for outdated dialogs and stay updated with the latest design trends
-
Familiarize with Xcode to create asset catalogs and fix UI changes on XIB
-
Maintain consistency and ensure efficient design before handover to Developer
Design process:
-
Empathize and define the problem
-
Perform user research and understand user's needs, goals, data, context, and requirements
-
Brainstorm and generate ideas for design to address the problem and finalize on scope and timelines
-
Prototype and turn ideas into concrete examples. Present mockup/ prototype to the team (QA, PM, Dev, Designers)
-
Perform internal user test and evaluation of design
-
Analyze what went wrong during the process: i.e. technical issues like files on code, server and Xcode crashes, assets compatibility issues between Mac vs. Windows
-
Different features/ functionalities required separate approaches
-
Gather feedback and reiterate accordingly
The featured patterns and interactions you see below are areas I led and contributed in defining and building out the final deliverable.
Import Interface for 17
Import Interface for 18
New user interface for importing data
More easily map imported source data to FileMaker fields using the new Import Field Mapping dialog box. Use type ahead instead of drag and drop for greater efficiency. And specify custom delimiters when importing certain file types.
I learned that not everything fits in one size. Some dialogs had different use cases and needed to be catered to. For example, Mac and Windows use different files and sizes.
FileMaker 19
Starting with the Mojave release, macOS introduced support for dark mode. FileMaker Pro 19 will be adapting the dark-themed UI to reduce eye strain yet support visual clarity and also staying consistent with the Human Interface Guidelines of Apple. Creating the new look and feel of Filemaker 19 is my primary responsibilities. The initial design decision must be appropriate to the product’s purpose, the particular situation, and its audience. Such approach requires a careful, up-front evaluation of design direction.
Challenges:
I faced with a number of challenges when we start designing to transform FileMaker to the “dark side.” All kinds of usability issues come into play, mostly related to scannability, readability, and contrast. The main aspect to consider is sufficient contrast between text, icons and background. The context and the environment must also be considered, as well as the device on which the UI is likely to be viewed.
To help me with this task, I started become familiar with Xcode and learn how to navigate between and use basic project components. Xcode helps me create and manage user interface elements for FileMaker 19. Xcode provides tools to manage my entire workflow—from creating new Ui, to testing and optimizing.
A dark theme uses dark gray, rather than black, as the primary surface color for components. Dark gray surfaces can express a wider range of color, elevation, and depth, because it’s easier to see shadows on gray (instead of black).
