Introducing our new user interface

We’re unveiling a major change to the visual style of PocketSmith, as well as a series of upgrades.

We have redesigned the UI to deliver you a much better user experience across all areas of the application. The improvements are much more than skin-deep; we’ve also refined many of the small interactions to make tasks simpler and more enjoyable.

This update also comes with a brand refresh - a new logo and colour that we’re excited to share with you.

Read on to get a glimpse into the thinking behind our look and feel, the reasons for change, as well as what’s new.

When our adventure began

To understand how we got here, it’ll help to understand where we came from.

The origins of PocketSmith’s design are rooted in a period of time when cloud applications were still relatively new, interfaces were rich, and the web was rife with experimentation.

2007 was the year of the original iPhone, which introduced touch interfaces in a big way. With this came skeuomorphic design: on-screen elements that mimicked real-world objects, textures and behaviour of light.

Boilerplate two-dimensional elements gave way to richer colour, shadows and reflections, lending an element of realism to on-screen displays.

The reason for this was that touch-screens were new, and designers wanted to evoke a feeling of familiarity, providing users with guidance on how to interact with elements beneath a sheet of glass. Beyond that, the joy of seeing realistic objects digitally represented in the palm of your hand was still apparent.

Apple’s new standard in user interface design inspired web designers too, including ourselves.

The first version of PocketSmith, which we debuted in 2008, adopted similar design principles wholeheartedly. We wanted to offer a personal finance app with a distinctive atmosphere, so we experimented with visual styles that we thought would delight our users.

2008

PocketSmith's alpha release, 3 months after we were founded

We drew inspiration from the art deco era, looking into retrofuturism to capture some of the excitement and anticipation of things to come. Our user interface then resembled an intrepid traveller’s desk, with rich, textured controls and quirky graphical feedback. It imbued cardboard dossiers and leather stitching, maps and compasses. We hoped to capture some of the adventure in exploring one’s personal finances.

Our audience took to it well, and this ambition would define the design language for PocketSmith for years to come.

2009

v1 - First public release

Growing out of style

PocketSmith began as a forecasting tool first and foremost. But as we continued to develop the product, it became increasingly apparent to us that a premium-grade PFM (personal finance manager) wasn’t going to be a ‘one size fits all’ solution, much less a simple one.

Financial projections require history for context, so we implemented transactions. Uploading transactions is a pain, so we implemented Live Bank Feeds. Not all assets and liabilities are tracked using feeds, so we implemented a Net Worth feature. Assets and accounts may exist in different currencies, so we implemented multi-currency. And the list goes on.

As PocketSmith grew more comprehensive to meet demand, its interface began to struggle under the load of complexity.

The sepia tone and textures that once set a mood made it increasingly difficult for brighter colours to be used. Animations that were once whimsical now instead felt slow and inefficient. New user interfaces for accompanying features required the development of new design conventions, which were costly and made consistency a challenge.

2011

v2 - Transition from fixed to full-width layout

Through all this, skeuomorphic design fell increasingly out of favour as we moved further away from 2012. Tablets were now widely available and touch interfaces more common, so fewer users required explicit depictions of interfaces in order to understand how to operate them.

Designers responded in kind, and once again, mobile interfaces led the change which would be adopted by desktop and web applications.

Today, rich interfaces are eschewed in favour of simplicity as a nod to users’ increasing sophistication, and value is now placed on the omission of decorative elements to avoid distraction. This is sometimes described as ‘flat design’.

2013

v2.5 - Revised design, with continued iterative updates

A return to basics

We began the process of redesigning of PocketSmith about a year ago, with a number of key outcomes in mind:

  • The application becomes more intuitive to navigate and simpler to use
  • Information takes precedence over style
  • Better contrast of visual elements, and better readability
  • Better accessibility on tablet devices
  • Room to evolve
  • Simpler to maintain

A number of mainstream products had since transitioned to flat design, Metro being the first major debut, introduced with Windows 8 in 2011. This was followed by iOS 7 in 2013. Neither moved us, as although we understood their motives, we perceived their execution unappealing and incomplete.

While we considered, we started implementing our new features with ‘flat’ principles in mind. The rebuild of the Transactions page and its search menu was one example of this. The improved graphing system was another.

When Google announced Material Design in June 2014, we knew we’d found our new design language.

We find Material Design to be an elegant UI framework that encompasses everything we want to deliver in PocketSmith. It’s consistent, pleasing to the eye, well-documented, and works across all form factors and devices - which means that we’re well set up for mobile too.

Most importantly, it provides us a solid foundation on which we can begin again.

The new stuff

These are some of the highlights you’ll see in the new PocketSmith.

Brand and colour

We’ve refreshed our brand with a new logo and colour. In its simplest interpretation, our logo is a pocket with an upward trending graph, symbolising our commitment to helping our users improve their financial situation. The pocket can also be seen as a shield, which symbolises security. And the graph can be seen as a lightning bolt, which symbolises awesome.

Purple is the successor to the sepia we once wore, as it’s still distinctive and memorable. It carries positive meanings associated with finances: good judgement, wealth, and luxury. As a colour, it uplifts and calms. Functionally, it is also compatible with many other colours on the wheel.

Application layout

The interface is now much cleaner, in part due to neutral and light background colours without texture, curated display and positioning of elements, and consistent, larger type size.

The tabs previously used for accounts and institutions have been moved to the sidebar which offers better visibility and scalability. Key actions are located at the top of the sidebar. Sections are labelled and collapsible, and the sidebar scrolls to provide you easy access to lower items.

The sidebar automatically collapses at lower widths to provide more room for content, and it can be displayed by clicking on the Sidebar menu icon.

Dashboard

The Dashboard is tidier, owing primarily to a better organisation of widgets (rows rather than columns) and responsiveness (content adjusting to different widths). Each widget has also been upgraded, and here are a couple of examples.

The Recent Activity widget clusters transactions by day, removing the need for a repeating date column.

The Earning/Spending widget and graph is now larger, and allows you to be more specific with the date range.

You can also choose a ‘card view’ option for the Dashboard if you prefer a less intense view of your information, or if you’re on a tablet. This organises your widgets vertically.

The ability to customise your dashboard by adding/removing/sorting widgets is on our roadmap.

Account Summary

This is one of the interfaces that has moved away from an edge-to-edge layout in favour of a card layout. This improves readability because elements aren’t unnecessarily stretched to full width on wide displays. Furthermore, it allows us to make better use of the main content area by displaying additional, contextual information - as described below.

Institutions are now displayed in the sidebar, rather than in tabs. This allows us to render them more clearly, and with larger type.

Live Feed Notifications have been moved from the sidebar into the main content area, making them more noticeable and easier to edit. Feed Statuses - e.g. ‘Queued’, ‘Refreshing’ and ‘Connected’ are clearly denoted by colour.

Account graphs have been brightened and simplified, although more detail can still be seen when you hover over them. Account menus now slide up when clicked and stay until dismissed, making them easier to use.

Transactions

Saved searches and accounts have been moved from tabs to the sidebar where they’re easier to work with.

The transactions table now clusters transactions together when sorted by date, or when searching for duplicates or transfers. Transaction notes and tags are much clearer to see.

Editing is much quicker with our new in-line editing feature (tip: the field you click on will be pre-selected when the form opens).

You can now choose your preferred view density (like in Gmail) from ‘Comfortable’ to ‘Compact’.

The toolbar has been simplified, with editing options only visible when transactions are selected. Pagination controls have also been simplified, with a focus primarily on ‘Back’ and ‘Forward’ buttons to navigate. Specific date ranges can still be determined by performing a search.

Calendar

The Calendar has been making a gradual transition to its new design even prior to the interface update. Lines were reduced and daily balances simplified to improve readability.

Accounts have been moved from tabs to the sidebar. You can choose to select just one, or multiple accounts to be displayed. The scenarios for active accounts are displayed below the account list.

The graph has better use of colours to denote history (green) and forecast (blue). Furthermore, the forecast lines now has daily plot points for 30 days into the future (before defaulting to weekly) for greater accuracy.

The cells have cleaner separation, the budget pop-ups are tidier and employ better use of a brighter colour palette.

Cashflows

The Cashflow Statement now uses a date picker in favour of a slider, which is quicker to use particularly when selecting a default range (e.g. “Last month”, “Last year” or “Last quarter”).

The tables are cleaner and less noisy, using a card style for each area and space (rather than lines) to separate the columns. The sparer use of colour allows deficits to be more clearly visible in red, making them quicker to spot.

Budgets

Budgets are now clustered by type for better visibility (income, expense, and unstarted) and will later on be sortable by a range of other options (e.g. expiring soon, over, under, amount).

The segment displaying each budget has been redesigned for clarity, and now comprises two progress bars. The larger one displays the amount of money left in the budget, and the smaller one displays the amount of time left.

Both reduce in a manner similar to a fuel tank indicator. This is a quick way to see how much money you have left relative to the time available.

The large indicator for an income budget works in reverse, and ‘fills up’ as the time reduces.

The budget bars change colour from green, to orange, to red as they approach 0%.

Unstarted budgets are also clearer, with estimated weekly and monthly totals now displayed as options.

A new beginning for better things to come

We were once fearless with our design because we had little to lose.

Today, with many thousands of users like you in our care, we’re much more cautious as we’re aware that you have invested time in learning how to use PocketSmith well by developing habits and workflows efficient to you.

This is why we’ve been particularly careful with this transition. Though a major change, it’s still an iterative one, and we still have many improvements on our roadmap to implement.

It’s been a team effort, and one that we’re tremendously proud of. More importantly, this change is one that enables us to make your PocketSmith experience increasingly meaningful to you over the coming months and years.

Our commitment to you is stronger than ever, and the sense of adventure in our hearts is still here, even though the dossiers, maps and compasses have been put away. Trust that we’re always working on ways to bring this to you.

Thank you for reading, and we hope you enjoy the new PocketSmith.

6ad1811a45f7d53b3f3b6f26275037eb Jason Leong, Co-founder, August 20 2015