Keep track of all the latest news and events on developer tools and technologies you care about
by Gemma Darracott
We recently embarked on a proof of concept project to create a business web application using some of the latest technologies such as Windows Azure and HTML5 and see if we could combine these technologies with great design to produce an awesome experience for the end user. You can see the application itself, MicroFinance, at our web site at http://labs.mandogroup.com
The design phase of the MicroFinance application began with looking at what we already had in place – which was a basic working application - and then thinking about how we could enhance and build on this to create an informative and responsive financial application.
The MicroFinance application allows a bank employee on the road to access client data and statistics from both their mobile phone and other devices, including iPad and PC/Mac frontends. Key user experience goals to achieve are:
We already knew the application was for use across multiple devices, so to create a rich interactive interface we concentrated on the tablet device, which would have the highest level of enhancement and then looked to scale this down for the other future devices.
Here is the original application we were given as a starting point.
Core functionality of some pages had been developed, we wanted to include this work but not be led by it, and so we started back at the drawing board sketching down our ideas and wire-framing the layouts for each page. We sketched a user journey to understand how the application would be used, what information would need to be displayed and the best way to display it. From this it was clear there needed to be two main sections, plus an overview of the information to allow easy access to each section.
The three core templates we created are:
Dashboard - The central hub of the financial application, this area gives a clear overview of each section, allowing direct access to the content, as well as being a communications tool to get oversight of latest changes made by customers and easy contact with customers.
Customer Profile - A management portal for the bank employee to see current financial status/career credentials of their customers. Also shows past or present scheduled tasks/ meetings assigned to the customer.
Financial Intelligence - The main area showing the financial data of each customer.
Before work began on the visual concepts the MicroFinance brand needed to be created. The brief was to design an attractive and confident brand that would be a pleasure to use, easy to understand and didn't resemble other financial software packages, which often look dated and tired. The Windows Metro guidelines was going to be our guiding influence, all visual cues and styling was to come from these.
When crafting the look and feel of the brand, we first had to understand how it would work in harmony alongside the content. So we began gathering inspiration to fit in with our two main areas. The customer profile needed to achieve a strong, trusted connection between bank employee and customers. For a fully interactive experience it made sense to lose any static photos and stream videos, allowing the perception of direct contact with the customer.
In the Financial Intelligence section, the challenge was how do we display lots of potentially, dry content in a highly engaging and friendly way? Info-graphs are perfect for financial applications as they allow us to create a simplified visual representation of vast amounts of complex data, making it easy to understand at a glance.
To ensure we didn’t over-clutter and confuse the layout while addressing all the above challenges we decided to go with the theme of light, with lots of transparency and layers. Green was used for its calming tones and links with safety, helping reinforce values of trust and confidence.
We opted for a simple and stylized typographic approach for the identity, to work in balance, not to overpower, the content. It reflected the ease of use of the application and kept in line with current Metro guidelines.
With an identity and visual style in place the concepts where ready to be crafted. From the wireframes we created the concepts and then layered the interaction on top, as we went along. Changes where still made during the concept stage as we discovered more intuitive ways to present the information, plus using HTML5 allowed a greater flexibility to hide content and reveal it when it was required.
…also known as the central hub, is the first port of call once the user has logged in. This page shows all the main functions within the application.
Taking you through each element on the page we have…
User Profile – A Minimised area displaying the main user information and alerts. New messages, tasks or meetings will appear here as they are created, and this gives important updates for the user, it will remain a consistent feature throughout the application.
World Map - Dynamic content is pulled through showing live data of other users who are currently online, giving you the ability to contact them directly.
Customer Videos Panel – These will display the last conversation you had with your customer, or show a recorded message they have sent to you. There is the ability to speak to the customer while remaining on the dashboard or go straight through to their profile page. Multiple customers can be shown and scrolled through by touch and drag or by the arrows (which only display on non-touchscreen devices).
Intelligence Panel – Gives you the option to see an overview or one graph at a time for quick reference, or flick through and then link through to all available graphs.
…is a management portal, consolidating each customer’s financial information and career experience. It gives the user direct access to track their customer’s finances and set-up meeting or tasks to help guide them to better financial health. We wanted to keep all information on the one page, so we have used a lot of HTML5 interaction elements to allow seamless transitions to occur without having to go to a different section or page and lose your place.
The profile is divided into three sections:
Customer experience and information - gives an overview of the customer’s career, allowing the user to understand their customer’s background and depth of knowledge. This is a scrollable area depending on the level of experience. The customer video means the user can call the customer directly and also see any outstanding tasks or unanswered messages.
Loans, Maps, Contact – a tabbed section which shows a high level breakdown of the current loans the customer, which can be clicked through for more details. Main contact details link in with the map so show where the customer is primarily based.
Calendar – This is where new meetings and tasks can be sent to the customer, as well as having sight of current meetings scheduled. By using icons for meetings/tasks it shows a quick glance view as to whether it is a meeting or phone call. This allows for more space and doesn’t overload the user with information which can be gained by simply clicking on the icon. The ability to create a new task within the calendar means the user can check availability when creating the task with ease. It is then added to the calendar and the customer is sent a message.
…is the most important area, as it is where the main data is displayed. Here we went down the route of fully interactive info-graphics to bring the data to life, making it more digestible for both the user and customer.
Horizontal graphs span the width of the browser to allow for large amounts of information to be displayed.
Pop-ups show additional informational on ‘PROFIT’ ‘REVENUE’ ‘CAPTITAL EXPENDITURE’ remains fixed on the page, and once clicked shows key figures relating to the graph as a whole.
A ghosted graph on the right hand side would display the predicted forecast, where the dotted white line shows you the actual figures. By moving the line you can compare against the two.
Selector shows the range of graphs available; by clicking on Forecast Chart 2012 we are shown an interactive pie chart displaying a different level of information. Here we can see the transparency of the design working to full effect. Since this graph uses more browser space, we can still fully use the graph and interact with the graph selector. However, the selector tab can also be clicked; meaning the carousel of graphs can also be closed.
Circular forecast chart can be dragged round and the values will re-populated, depending on which section lands on the triangular dial.
Delight to the user and doesn’t tire
Useful and trustworthy communications
Direct customer connection
To delight a user - we really need to get them engaged with the content. This has been achieved through the real-time features like the world map on the dashboard and the mini user profile showing updated messages. Allowing the user to have clear oversight and instance access to what is happening.
Strong brand aesthetics - allows the user to feel confident when using the application. A defined colour palette taken the Metro brand means the style is recognized and trusted. Layering of graphics and transparent effects helps to highlight the key information without overcrowding, while bringing a joyful and exploratory experience to seeking out information. Emails and instant messages can be misinterpreted, whereas videos allow quicker and easier source of clear, concise communication.
Overall we have answered the goals above to a degree; however there is definitely lots of room for improvement, and potential to expand the application and build on our ideas.
Windows Metro guidelines
www.mandogroup.com Head of Design at Mando Group, a leading digital agency specialising in creative enterprise websites and RIAs. Gemma’s work mainly focuses on stimulating creative design which engages the user, delivering a beautiful user experience across all digital platforms. You can find her on twitter @gemmadarracott.