Windows 8 - Touch Apps
Project Scope and Interaction Design

Wireframing, Interacion specs, UX Consulting

These are a pair of projects where I had the opportunity to work designing touch applications for Win 8, they are an online banking app and a invoicing app.

Project 1: Banking App

A major bank hired us to design the Win 8 touch version of their iOS banking application, we made a deep analysis of their current service and proceeded to make the wireframes before developing.


Global Position

Showing the status of all the client's accounts and the position of the actions bar that is displayed when the user swipes inside from the lower screen border.

Savings account

Displays a chart with the evolution of the client's funds and a list of latest acount movements.

Swiping from the bottom edge brings up the actions possible in this screen, only the search feature is available.

Tapping on the search button brings the search form for the account's movements.

Long pressing on a specific movement selects it, a bottom edge swipe shows the actions that can be applied to the selected items.

Sample graph

Making a money transfer

The transfer money option shows a list with the client's source accounts.

Once the source account is selected the user is presented with a fixed set of options and also the possibility to type their own amount.

After selecting or typing the amount a list of options with the destined acount, with the option to add a new acount number.

Selecting adding a new acount number displays a form where the client can input the new number.

The final step after adding the new acount number is making the money transfer.

Project 2: e-Invoicing App

This application required mostly coming up with the new interface for a web application, I wrote the project briefing, the design goals and defined the methodology to be used. Most of the work was doing visual design by another team member, so my role was less designing the interaction or the project management and more of defining the information architecture, the navigation and some low level wireframes.

In these pages from out final delivery can be seen part of my contribution defining the goals and methodology.

Screenflow map

This map served us to define the general information architecture, navigation, interaction model while serving as a map for all the talks with the client: