Web, Tablet, Mobile App - 2017 / 18

TimeSite is a digital product that is used to track time, costings and billings. It’s used by teams, departments, small businesses, governments, and large corporations every day. I’ve been asked to undertake the new branding of the Pro version, new website, and most importantly, redesign of the existing web app with accompanying mobile and tablet app.

See it live

Roles:
Branding, UX Design, UI Design

Logo

It’s the new identity that represents the future of TimeSite products. I choose this font and color to make sure it belongs to the digital world, yet nothing too fancy. Because it’s more of a B2B product than targeting everyday users. That’s why keeping it simple and elegant was the top priority.

Old vs New. Exo font family goes well here.

Colors

TimeSite was already blue. I just made sure that the correct hues that goes well with new designs are used. Accessibility is also an important part of my designs. I choose colors to have at least AA in contrast standards.

Typography

When it comes to web apps, it’s important to choose most digitally optimised font possible. After extensive user tests, Roboto was the winner. Although there are other alternitives where both small and display sizes looks great, combining Roboto with Lato is a very versatile solution.

Web App

As it’s an existing service with thousands of active daily users, I started by analyzing current users and their behaviors. I conducted user research about daily tasks to discover what they find unintuitive or most dificult to perform. That followed with wireframes, mockups, final designs and integration of the new designs. I’m also responsible for the front-end development and work with back-end developers to ensure my designs are executed perfectly. We closely watch user behaviors with tracking tools and revise the designs accordingly.

Timesheets screen - Before

Timesheets screen - Mockup

Timesheets screen. It's one of the most important screens.

Invoice screen - UX / Interaction design example

Timesheet screen layout selector

Button examples

Input examples

Approval screen - Before

Links screen - Before

Approval screen popup - Earlier design

Links Screen - Earlier design

Mobile App

It’s designed to be used with the web app. Giving users the ability to track time and expenses on the go. We opt for a hybrid app that should look good in both Android and iOS.

Add new record

Timesheets screen

Button interaction

Tablet App

In between desktop and mobile app, stands tablet app as mini-timesite. As medium grows in size, so does the functions like more administrative screens available.

Timesheets screen and add new entry popup

Timer popup

Website

To ensure that prospective clients can see features of the Pro version, a temporary Wordpress site was established to demonstrate these features and will be redesigned in the coming months.

Homepage

Navigate

Contact

up
 X