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.

Sketch prototype of the billing section.

screen name

Early stage animation for the interactive pie-chart.

screen name

Animation to document the scrolling interaction through the tabular/pie-chart view.

Bill visual design

Final visual design. Credit to Simone Cucchi.

Instant Overviews

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.

screen name

Animation to document the interaction for viewing remaining allowances.

Remaining allowance animation

Final visual design. Credit to Simone Cucchi.

Meaningful maps

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.

Store locator wireframes

Wireframe-flow for the store locator.

screen name

Animation to document the scrolling interaction through the store locator.

Remaining allowance animation

Final visual design. Credit to Simone Cucchi.