Rich Data Visualisation
We wanted to make a users account more understandable and bring it to life through data-visualisation. My process involved sketch-based prototypes (using POP), wireframes and then animations to document interactions.
An example of this is the billing section, shown below. The design involved an intearctive pie-chart and a dual tabular/pie-chart view.
Turkish phone packages can be quite complex as you have multiple sets of allowances for Calls, SMS and Data. For example, you might have 30 minutes of landline calls, 15 minutes of calls to Turkcell members and 10 minutes of calls to other networks.
I wanted a quick way for users to see all their different ‘allowances’. So I designed an interaction whereby as the user scrolls left or right, the view zooms out. This ‘zoomed-out’ view gives users a high-level picture of their allowances. What’s more, as the user scrolls, the view moves at a faster speed so that they can see everything in one gesture.
Another area where I wanted to add a ‘signature experience’ was the store locator. I thought we could use a similar interaction pattern to the bill, where there is a dual list and map view. As the user scrolls a small map highlights each store on the map. This avoids the standard back-and-forth of map and list views.