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
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.
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.
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.
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
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
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
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
