Derek Lakin

DESIGN: “Ephelis” - A Client App for Freckle

PrimaryTileFreckle is an awesome service that takes the friction out of tracking your time and is great for freelancers, consultants and small teams. At Pixel Lab we use it for our timesheet system and it works great for permanent employees and per-project contractors.

As a long time Windows Phone user, the first thing I wanted was an app to use with this service, but there isn’t one. There’s a third-party app for iOS and I believe they’re working on an official client, but there’s nothing for Windows Phone. So, as a Windows Phone developer, I set myself the challenge of creating one.

Key Requirements

Freckle.PopupFor me, the most important thing about this app is tracking time spent against projects. This might sound obvious, but it’s easy to over-implement in apps and I think that’s a mistake. Freckle provides charts, reports, administration and a host of other features besides actually entering the time you spend against a project. This helps make Freckle as awesome as it is, but they do it really well on their website and I see no need to replicate that (at least in v1). They have a web-based timer pop-up that does exactly that, it focuses solely on tracking time and this was my inspiration; I wanted my app to be at least as simple and easy to use as this pop-up. So, while I could easily have set about designing a panorama-based home page with charts, reports, and widgets all over the place, I went down a simpler, single page path.

Three Screens and Some Icons

The application consists of three main screens: Sign In, Time tracking, and Time Entry, plus a fourth for providing access to Settings. There’s also the ever important tile and pinned variations.

Single Image

Take a look at the above picture at full size to see the design for each screen. You can find the same image over on Forrst.

Sign In

The Sign In screen is the user’s first introduction to the application (after the tile, which I’ll come to) because there is no splash screen. This is a conscious decision for two reasons:

  1. The application can start quicker without it and speed is of the essence.
  2. It can contradict the design when being theme-friendly.

If you’re application loads quickly enough, then you don’t need to present a splash screen, and in fact, it will load quicker if you don’t. In order to help the user focus on the key task, the faster the application launches, the better.

I decided from the outset that I wanted the application to be theme-friendly. I don’t just mean that I wanted to use the user’s accent colour, I mean that I wanted it to heed the user’s choice of light or dark theme, too. I believe that this gives the user a greater sense of ownership of the application and will ultimately help them work better and faster. Because the splash screen is a fixed JPEG file, it is impossible to incorporate the theme and accent colours into it, so to have used a splash screen would have immediately contradicted the rest of the application design (apart from the rare chance when the colours I choose match the user’s choices).

So, the Sign In screen introduces the user to the application’s branding: we see the application logo (repeated from the tile) and the accent-coloured background texture, which takes it’s inspiration from the official Freckle logo. Both the logo and the logo are bold enough to be seen, but not so bold that they get in the way of the task at hand.

The Sign In screen also clearly provides the user with a way to create an account if they don’t already have one.

One final noteworthy point in the design at this stage is that I’ve included the System Tray. Users repeatedly complain or are confused about the disappearance of the System Tray when using various apps. When you’re using a battery hungry smartphone and on the move then signal strength, WiFi status, and battery level are always important, whichever app you’re using, so I also made a conscious decision to ensure that the application design worked with the System Tray available at all times.

Time Tracking

On this (and all other screens) the logo and background texture are less prominent. The user has been introduced to the branding, but now we need to ensure that nothing else detracts from the primary function of each screen, so the opacity is reduced.

This screen is about two things:

  1. Enabling the user to start/stop projects quickly and easily.
  2. Showing how long the current project has been active.

So, the time on the current project is shown clearly at the top of the screen, and the projects are listed below. The current project is always moved to the top of the list and there is sufficient spacing around all touch elements to prevent mis-hits.

The common play/pause symbols are used for starting and stopping activity on a project, and the “tick” symbol shows when a project has an activity that can be submitted.

Freckle automatically assigns a colour to each project that you create (though this can be edited), and so this is shown as an underline to each project for faster project identification for user’s that make use of this feature.

The context menu for each project enables the user to pin that project to the Start screen to make it even easier for the user to work with common projects.

Time Entry

When submitting a time entry for a project, the user is presented with the relevant information already filled out, though the time can be edited. Freckle uses a per-project time rounding system, which is honoured at this stage, too.

Instead of managing tasks as separate entities, Freckle uses an account-wide tagging system. Ephelis presents the users with a list of the tags that have already been used on this project in a checkbox-based layout that is easy to interact with by simply tapping the relevant tags. Selected tags are shown in the user’s accent colour, making it easier to see which tags have been selected. The user can also type directly into the textbox, which uses auto-complete on all tags.

Start Screen and Tiles

As the designer of an application, we should never underestimate the importance of the application’s tile. In the Marketplace this is the first thing the user will see for your application; it is what separate’s it from similar applications in the app list and is prominent on the Start screen when pinned.

Sticking with the ownership theme mentioned before, I opted for an accent friendly icon using the same shapes as the logo within the application. The main tile includes the application name in the custom font to help identify it. For projects that can be pinned to the Start screen the application’s name will not be shown at the bottom of the tile, so I thought it was important to include the name somewhere and this served the purpose well.

For pinned projects, the colour matches the project’s custom colour (auto-assigned by Freckle) and shows the full project name on the front and back of the tile. The front of the tile also includes either a play or pause icon depending on whether the project is active.

Award Winning

OK, “award winning” might be a bit of a stretch (but journalists use over-sensationalised headlines all the time, so why can’t I?), but the design for Ephelis was recently announced as a Finalist in the Core77 Fast Track to the Mobile App design challenge. I’m hoping to become a “Notable Finalist” by getting the app developed and into the Marketplace as soon as possible.

Future Features

Thanks to some great feedback fro the guys at Freckle, I’ve already extended the design to include the ability to set the date when submitting a time entry, which enables the user to add historic time entries.

The application will also include features such as configurable alerts/reminders for projects that are left running, location-based automatic start/stop of activities, caching of entries when offline, and (eventually) a standalone version that does not require (but can synchronise with) Freckle.

Development has already started on the application, so I’ll be looking for beta testers some time soon; let me know if you’d be interested. I’ll keep you posted on progress.

app competition reminder design ephelis tiles applications