Milan Čubić

AMMO Rack, for iPhone and iPad

Document managemant application for iOS from Amphetamobile.

Go to case study

AMMO Rack, 01 of 03

In May, 2011, thanks to Bojan Janjanin, I had an honor of working with the team behind Amphetamobile on their new document management app for iOS.

When Amphetamobile asked for my help, they already had a working prototype of the app and a general idea what they wanted it to become. Together, we took their ideas as a starting point and refined them. As a result, AMMO Rack was featured by Apple in U.S. App Store for over a week.

After initial exploring and reviewing different approaches we decided to go with a rack metaphor. The goal was to create a visual identity that communicates sturdiness. We wanted for the device to become a rack when it is used.

Application is able to store multiple categories of media, PDFs, photos or books, and we wanted to present that data all upfront. By using a rack metaphor where one shelf presents one category we where able to solve that problem.

Switch to use cases

  1. Shelfs

    Every category has its own shelf and browsing is done by swiping left or right. Appearance and behavior of the shelfs communicates that swiping is possible without the need of using any progress bars or any other indicator.

    See how it works

Switch to description

AMMO Rack, 02 of 03

When in Edit mode we can rearrange, add, or even remove entire shelfs, but we still wanted to create a quick and delightful way to "hide" those shelfs that we do not want to show or use.

The guys from Amphetamobile had an idea of collapsable shelfs that I really liked and decided to explore further. We wanted to make sure that the solution would be tap friendly and wouldn't get in a way of main tasks.

In the end, we created a solution that is available only when needed, while the rest of the time it is neatly tucked out of our way.

Switch to use cases

  1. Collapsing shelfs

    Swiping right will reveal Collapse button, and tapping on the arrow will close the shelf. Tapping the row (doors) again will expand the shelf and reveal items on it.

    See how it works

Switch to description

AMMO Rack, 03 of 03

Solutions we designed for reading books, PDFs or viewing photos is something I am particularly proud off.

I am a big believer in following the conventions of platforms we design for. Once we truly understand all of the rules, only than we can start bending that rules, shaping them to our needs, build upon them or even brake them. And that is exactly what we did here.

Building on foundation of "one shelf equals one category" we designed a way to swap an item without leaving the current screen, and without the need to go back on the Rack just to select another document.

Switch to use cases

  1. Slide in shelf

    When reading a document we can quickly swap to another for reference, and back again, without ever leaving the screen. Tapping anywhere on the screen will call UI elements, together with all the documents on the current shelf.

    See how it works

  2. Selecting another item

    In previous case we can notice that while all elements fade in, shelf slides in and reveals the items it contains, which is specially important to help us build the sense that the shelf can be additionally moved. From there sliding and selecting another item is just a tap away.

    See how it works

Switch to description

Webtrekk, for iPhone

Webtrekk, app for Berlin based provider of high-end web analytics and their premium web analytics system Webtrekk Q3.

Go to case study

Play

April 9th, 2011

Webtrekk, 01 of 04

Designing the Webtrekk application was one of the the most ambitious and challenging projects I have worked on at Impaddo. Webtrekk Q3 is an amazing and tremendous web analytics system, with huge range of filters and analysis functions, and bringing it from desktop to iOS was a particularly exciting challenge.

Wrangling the amount of content was no trivial pursuit. It was very important to avoid the problem of potential deep level navigation. Like always, I started by creating wireframes for every screen and state with detailed information architecture and documentation. Sketching the wireframe allowed me to quickly and easily explain the ideas behind the concept.

My favorite part of the app is work done around different ways of showing graphs and tables of data and interactions designed for manipulating them.

Switch to use cases

  1. Viewing different parameters

    While list above graph summarizes the data in observed time, graph itself shows trends in that same time. Tapping on different parameters changes presented data while animation grabs our attention and focuses us back on changed graph.

    See how it works

  2. Details on trends

    Since we were not satisfied by just showing the graphs and not the details in them, and I didn't want to show a bunch of numbers on some other screen, we came up with an elegant way to show them on the current one.

    See how it works

Switch to description

Webtrekk, 02 of 04

Webtrekk is proud on a fact that they offer a way for their clients to tailor their own analysis individually and precisely for any time period they desire. With that in mind we wanted to create the same ability in our application, but also make sure it is shaped for use on mobile devices.

Early in the process we discovered which were the four most-used time periods and offered them right up front, while the rest were put one level deeper for easy find, but still out of the way.

Switch to use cases

  1. Default time periods

    Controls for four most used time periods are placed above the graph for easy access while the rest is available under + icon located on toolbar, bottom right.

    See how it works

  2. Setting Custom time period

    Setting Custom time period is easily achieved by tapping on + icon located on toolbar or even above the graph, in case where there is nothing yet set, like in our example. Notice that once we set our custom period, calendar with + icon above the graph changes in checkmark indicating that we are all set to fetch data for the new period.

    See how it works

Switch to description

Webtrekk, 03 of 04

Presenting the data in tables was another big challenge while designing this app.

It is not uncommon to have tables with more than a dozen columns and multiple rows, and presenting all that data at once on a such a small device like iPhone was not practical. We needed to come up with a solution that was, in the same time, useful and painless to use.

Switch to use cases

  1. Tables

    We studied the idea behind the tables and tried to combine it with the concept of moving panels. In the end, outcome exhibited enough flexibility, no matter the size or device orientation, that we decided to use it throughout the app.

    See how it works

Switch to description

Webtrekk, 04 of 04

Presenting graphs in landscape orientation was a particularly fun detail to work on. We especially wanted to focus on the transitions between the screens and animations that accompanied them.

Switch to use cases

  1. Landscape orientation

    Rotating the device in landscape orientation shows graphs in full, more detailed view.

    See how it works

Switch to description

Spox, for Samsung Bada

Bada application for Spox, "a leading destination for over 1.3 million German sports fans each month."

Go to case study

Play

March 1st, 2011

Spox, 01 of 02

Spox.com, a division of Perform Group PLC, provides sports fans in Germany with coverage for a variety of sports from all the most influential leagues.

Although Spox already had an iPhone and Android version of the application, they gave me the freedom to start from the scratch.

Together we revised their content strategy, simplified flows and ideas behind it, and created altogether a simpler application with focus on content, custom visuals and engaging interactions while still following the brand culture.

Switch to use cases

  1. Custom visual and interaction design

    We took the opportunity to customize every detail of user interface, while still following Bada design guidelines.

    See how it works

Switch to description

Spox, 02 of 02

We wanted to make sure that reading and viewing articles is as enjoyable as it can be, especially on a mobile device, and we think that we succeeded in achieving our goal. Larger font size, full width images or video thumbnails are the details that make the difference, maybe invisible at first but noticeable when missing.

Switch to use cases

  1. Quick browsing through articles

    In attempt to avoid jumping level up and back down just to read another article, we enabled changing them just by swiping left or right. Page indicator above the text indicates which one is currently visible and difference in colors represents read articles from unread.

    See how it works

  2. No distraction while reading

    By putting content first, we removed all UI distractions right from the start, and only after we want to go level up we can call Back button by simply tapping anywhere on text.

    See how it works

Switch to description