Sage Expenses

 


 

A PRODUCT STORY

INFORMATION ARCHITECTURE

Defining a good Information Architecture and User Experience Architecture was top importance in the design process.

Multiple iterations, researches, user studies were done to define the best user experience and maximum usability with a good attention to details.

The designs were created agile depending on new needs, features, development requirements, user research conclusions.

Sage Expenses

TYPOGRAPHY

The native system font, San Francisco, was used to ensure maximum visibility and readability across all iOS devices, being a font specially designed for Mobile Devices – Small physical size but high resolution.    

Get SF Font

UI DESIGN

Sage Expenses

DATA VIEW

Visualising a lot of data is done with the help of graphs, barcharts, doughnut charts.  Multiple iterations were provided and multiple different views and styles were considered.

Empty State UI

EMPTY STATES

Great deal of attention to detail was paid when discussing empty states, so they add an uplifting moment to the user journey.

The Awesome Illustrations were done by Marina. Check out her works as well.

ICONOGRAPHY

Multiple Icon sets were tested and exploration was done to choose a style that would be globally understood by any user. The final icon set became a Mobile Standard in Sage Mobile Guidelines.

The Icon set was created by Marina, and is still a work in progress as the project evolves.

Sage Expenses Icon Set
Sage Expenses App icon

APP ICON

Designed to work at a global level,to be generally understood by the all the target audience. Many iterations have been done until the icon was reduced to the best and simplest shape possible.

After dozens of hand-drawn options and numerous possibilites explored, the list was reduced to 6 viable options.

THE TEAM


This App is the sum of collaborative efforts of a young, determined rock-star production team.

From UX Researchers and very capable and agile Product Managers and Owners, to a Visionary Design Team and an agile and fast turn-around Development Team.

.