At ChartIQ we believe beautiful UI design is not a one-and-done task—it’s constantly changing. After several iterations of Finsemble’s UI, we’ve learned a lot about making a beautiful UI that reinforces a user’s flow state. We’ve folded these lessons into a general overhaul of our UI for Finsemble 4.0. Read Press Release Here.
This post will discuss how we’ve improved Finsemble’s UI with our latest release.
Finsemble Pre-History
Initial designs for Technician Desktop’s toolbar. The toolbar would go on to become the central hub of Finsemble.
If you go back and look at the cave paintings in ChartIQ headquarters, you’ll find a product called Technician Desktop. In a time period where everybody was updating their desktop apps to become web apps, we were going the other direction. Technician Desktop was our attempt to bring the power and flexibility of web technologies like HTML5 and JavaScript to the desktop. All of this nascent work was transformed by rounds of user interviews conducted by our UX team.
By talking to financial professionals, we understood the need for a central control hub–a home base for the user. So we designed a toolbar to act as a launcher and window manager.
We also learned that people wanted favorites on their desktop in the same way they had favorites in their internet browser. Borrowing from this paradigm, users could “pin” their favorite items to the toolbar–create a icon to launch their most-used applications with a click. Eventually, this behavior led to docking windows to the toolbar so that they stayed semi-permanently affixed. Soon, we invented a whole suite of window movement paradigms to provide power steering to users.
All of this functionality was introduced to users and iterated on. These early days of iteration ultimately led us to the design of Finsemble 1.0.
Finsemble 1.0
Finsemble uses web design paradigms to create desktop layouts.
The needs of Finsemble were different than our Technician product. Though also powered by web technologies, Finsemble is a toolbox for developers to design an interoperating smart desktop. We needed to provide powerful tools to developers and end users, both.
CSS makes websites beautiful. It is flexible and well understood by front-end designers. As such, we not only used CSS itself in the rendering of UI elements, we used concepts from this standard for Finsemble’s behaviors themselves.
Since developers were already familiar with CSS for in-page positioning, we leveraged the same notion for positioning apps across the entire desktop. Windows can be launched using common positions such as `top`, `bottom`, `left`, or `right`.
Also, we use CSS to implement our color and theming. Each window in Finsemble can be thought of as its own <div>. The style sheets that drive Finsemble’s theme can be changed easily. Thus, we delivered the ability to white label to our users. A smart desktop can be themed just like a website.
By exposing Finsemble’s use of CSS, developers could build desktop apps using the same tools that they used to build websites, and end users would experience the same modern design standards they’ve come to expect.
Finsemble 4.0: The UI Refresh
With a fresh coat of paint and re-architected informational design, Finsemble 4.0 has the most robust UX of any smart desktop platform.
From Finsemble 1.0 to 4.0, we’ve been polishing the UI. Over time, we learned users wanted the UI to communicate with them more. This realization led to the majority of the work done for the UI refresh.
In general, the UI refresh covered three broad categories.
Modern look: Web design is a constantly evolving field. The UI refresh was important to keep Finsemble’s look sleek and modern. We embraced our dark theme wholecloth and reduced our color palette.
As a side effect, by reducing our color palette, developers can make large changes to the UI more easily. Though they still use CSS, there are fewer variables to change or tweak.
More accessible: Finsemble’s powerful context-sharing componentry used the paradigm of “channels” demarcated by colors. To increase Finsemble’s accessibility, we expanded this paradigm to include both words and colors. The default colors provided were selected to be very distinct from each other as possible to aid in visibility and be discernible even by the color blind. Plus, we gave developers the ability to customize any of these variables.
More affordances: We’ve given the end user new indications about what is usable and how it’s used. Previously, certain features were unintentionally hidden. Now, a robust iconography provides a visual language.
For example, items in a menu can be reordered. Previously, an end user might only stumble on this behavior accidentally (unless they were scrupulous consumers of the documentation). Now, grip icons make it clear that the items can be interacted with.
Because we’re committed to making software for humans, we’ll be continuing to iterate and improve on Finsemble’s UX.
Want to see Finsemble 4.0 in action? Request a demo and assemble a solution that works for you.
