Making time for your self

By | Tech | No Comments

n UX design, few things are more intricate than time and personal time management — only a good arsenal of mobile design patterns and information architecture principles can save you. This is the story of redesigning the UX for a popular calendar tool on Android: Business Calendar. We’ll cover designing systems, interaction design problems, scaling across screens and platforms, research, and big business decisions and their outcomes.

Business Calendar started out as a side project, a one-man show, and is now run by a team of eight in Berlin. The app was very successful right from the time Android entered the mainstream market, and it now has an active user base of 2 million. But instead of modernizing the design and usability regularly, the developers focused on implementing user requests and customization options. Outdated design and new features stuffed in had made the app heavy and complex — full of features, hard to maintain for the team, hardly accessible for new users.

Knowing they needed a redesign but having few resources themselves, the team approached Opoloo to get design and interaction on the same level as the development. For the task, we delineated goals to attract new users and keep the existing user base satisfied:

  • Improve user experience
    Strip down and reorganize the user interface to revive the simple, fast, efficient work process of a productivity tool.
  • Improve accessibility
    Keep old users happy, lower the barriers for new ones.
  • Incorporate task management
    Integrate tools that users need every day to create more value.
  • Apply modern design standards
    Address the main criticism: “Could be prettier.”
  • Extensive tablet support
    Improve the tablet experience as a first step to ubiquity.

The hardest part of any mobile calendar’s interface is the density of information, with each little piece fighting for attention: grids, events, time indicators, text labels, colors and other elements to interact with, manipulate and customize. Finding the right balance is what makes for an accessible calendar UI. Below are a few tricks we pulled with the presentation of data (i.e. how pieces of information are consumed, searched for and compared).

Although an iconic and heavily used feature of Business Calendar, the favorite bar was barely accessible: It became too small and too crowded to use as the number of calendars grew. Our solution was to use Android’s black system bar as an optical trick: The favorite bar now feels much taller and easier to tap, due to the black-in-black design. Additionally, we improved touch targets, made visible and invisible states clearer, and implemented a scrolling pattern to house more calendars.

Retrograde (Finn Pilly Edit)

By | Tech | No Comments

This is the future of architecture. Or, at least, it’s one of the many provocative glimpses Marc Kushner, co-founder of design studio HWKN and the well-known architecture website Architizer, offers up in his new book The Future of Architecture In 100 Buildings.

A hundred buildings! Why not just make it 200 or 1,000? The truth is, Kushner easily could have gone higher. More than ever, today’s architecture is fueled by an acceleration of technology, material science and down-to-try-it attitude. As Kushner argued in a recent post in Medium, just like the ‘70s had Brutalism and the ‘90s Deconstructivism, today might very well be the age of experimentalism in architecture.

Prototype Animations In Keynote

By | Tech | One Comment

Traditionally, designers have had to learn complex animation tools from scratch to produce even the simplest of motion graphics. In recent years, a slew of software has come out vying for the attention of prototypers and motion designers, such as Framer, Origami andPixate, not to mention the old classics such as Adobe After Effects.

However, I found them all to be a bit of overkill for what I was trying to achieve. As a UI designer, I needed a rapid, easy-to-learn, familiar tool to animate my static designs. I needed to produce animations quickly, since my team was iterating quickly on a product we were working on. I also didn’t want to learn an entirely new software paradigm. A bonus would be a tool that integrates nicely in my existing static design workflow (I generally use Sketch and Photoshop).

In my quest to find a tool that is more suitable to these needs, I stumbled upon one that has been on my computer all along — Apple’s Keynote.

Most people know Apple’s Keynote as the PowerPoint equivalent on Mac OS X — presentation software. That is true, but it can also be used to produce surprisingly high-fidelity animations and prototypes. In fact, many employees at companies such as Google and Apple use Keynote on a daily basis for UI design, animation and prototyping.

Last year, Andrew Haskin, interaction designer at Frog, showed us just how powerful Keynote could be when he recreated Google’s material design animations entirely in Keynote.

Keynote is fairly easy to pick up, because most people have used some sort of presentation software in their life. It is very much like PowerPoint if you’re familiar with it, so the interface is recognizable and you will immediately understand how to create and edit slides.

One of my favorite aspects of animating in Keynote is that it is straight to the point — there is no code, complicated timelines with keyframes or unnecessary functionality for designers.

The major legwork of the animation is done with Keynote’s “Magic Move” transition effect. With Magic Move, all you need is a beginning and end slide, and you can edit any number of properties between them (scale, position, rotation, etc). Keynote takes care of the rest by intelligently filling in the gaps, creating a seamless transition from one slide to the next.