Project Overview

What primarily turned me off from other time-management apps was the user experience. There was an overwhelming amount of information, images, etc. presented at once, rather than a step-by-step approach that users can follow. People will close the app if they see too much—it feels confusing, overwhelming, and there’s too much to learn.

The user interface for Focus follows patterns already used by Google and Apple, so users discover an interface they’re already familiar with. When you click on a thumbnail, you get all the content that is in that folder. When you’re done, you close it and open a new one.

Because Focus is also a productivity tool, it allows you to manage your projects, your team, your clients, and your time. You can organize this work in a way that makes the most sense to you, like viewing it by client or according to a calendar, for example. There are also options to further filter this information.

Focus features top navigation in order to maintain consistency. Many productivity tools use a side menu that changes according to the page, which ends up confusing the user. A top menu, on the other hand, follows a design pattern that people expect from a website. It’s also smaller, taking up less space, which gives you more viewing area of the actual page.

The menu bar contains a stopwatch to track the time you’ve spent on a project. This ensures that it doesn’t get lost in another window while you’re working. Timesheets are automatically created based on this time, and additional time can be input manually.

I designed the interface to reflect the functionality of Focus. Productivity tools are what you use to get something done, not something you should spend a lot of time using. The background is nearly invisible, mimicking a wallpaper. I chose a dark interface that is easy on the eyes, and a half-tone pattern overlaid on top of an image for the background. It adds brightness and depth to the page without being ominous or distracting.

Skills

Branding Photography UI/UX Web

Tools

After Effects Illustrator Photoshop