Overview
This is a self-initiated redesign of DeskTime — a time-tracking and productivity tool. The goal was to modernize the brand's visual identity, and improve user experience. I focused on pages with unique layouts to keep the process more challenging and avoid repetitive work. Instead of covering every page, I selected the ones that offered more design variety and required thoughtful layout decisions. This redesign is not affiliated with the original DeskTime team. It serves as a creative exercise to demonstrate my skills in branding, UI/UX design, and web development.
This is a self-initiated redesign of DeskTime — a time-tracking and productivity tool. The goal was to modernize the brand's visual identity, and improve user experience. I focused on pages with unique layouts to keep the process more challenging and avoid repetitive work. Instead of covering every page, I selected the ones that offered more design variety and required thoughtful layout decisions. This redesign is not affiliated with the original DeskTime team. It serves as a creative exercise to demonstrate my skills in branding, UI/UX design, and web development.
Logo
Old Logo Issues
The original logo featured a literal clock with multiple colors and sharp divisions. The design felt outdated, visually cluttered, and lacked scalability across modern digital platforms.
The original logo featured a literal clock with multiple colors and sharp divisions. The design felt outdated, visually cluttered, and lacked scalability across modern digital platforms.
New Logo Concept
Old logo
New logo
The redesigned logo brings a modern, minimal look that aligns with current design standards. The clock face has been simplified into a clean, abstract representation. The hour and minute hands subtly form the silhouette of a seated person, symbolizing someone working at a desk — tying together both time and productivity.
The redesigned logo brings a modern, minimal look that aligns with current design standards. The clock face has been simplified into a clean, abstract representation. The hour and minute hands subtly form the silhouette of a seated person, symbolizing someone working at a desk — tying together both time and productivity.
Branding
Font
Old Font
Source Sans Pro
New Font
Source Sans 3
Even though the visual differences are minimal, the table below highlights how Source Sans 3 improves on Source Sans Pro in terms of performance and flexibility.
Even though the visual differences are minimal, the table below highlights how Source Sans 3 improves on Source Sans Pro in terms of performance and flexibility.
Feature
Feature
Source Sans Pro
Source Sans Pro
Source Sans 3
Source Sans 3
Year Released
Year Released
2012
2012
2021
2021
Variable Font
Variable Font
No
No
Yes
Yes
Weight Range
Weight Range
Limited (300-700)
Limited (300-700)
Extended (200-900)
Extended (200-900)
Design Quality
Design Quality
Good
Good
Improved spacing & Clarity
Improved spacing & Clarity
Best For
Best For
Print, basic UI
Print, basic UI
Modern UI, responsive use
Modern UI, responsive use
Color
Old primary color
Have contrast ratio of 3.02:1. It should be at least 4.5:1
New primary color
Have contrast ratio of 5.3:1
Website design
Hero section
Feature section
Integration section
This section highlights key integrations with popular tools. Helps users immediately understand compatibility in a single view.
This section highlights key integrations with popular tools. Helps users immediately understand compatibility in a single view.
CTA section
• The new design aligns better with the brand’s visual identity.
• The light green background in the old version made the text hard to read; the updated colors improve readability.
• A subtle scroll animation fades in the two document visuals, making the section feel more dynamic and polished.
• The new design aligns better with the brand’s visual identity.
• The light green background in the old version made the text hard to read; the updated colors improve readability.
• A subtle scroll animation fades in the two document visuals, making the section feel more dynamic and polished.
Result
The redesign led to a major improvement in overall site performance and technical health.
Using Google PageSpeed Insights, here’s a comparison of the scores before and after the redesign:
The redesign led to a major improvement in overall site performance and technical health.
Using Google PageSpeed Insights, here’s a comparison of the scores before and after the redesign:
Desktop (Before → After)
Performance: 58 → 93
Accessibility: 92 → 98
Best Practices: 78 → 100
SEO: 85 → 100
Mobile (Before → After)
Performance: 22 → 62
Accessibility: 92 → 98
Best Practices: 75 → 100
SEO: 85 → 100
These results show clear gains in performance, accessibility, and overall technical quality. The redesigned site is now faster, more compliant with web standards, and better optimized for search engines.
These results show clear gains in performance, accessibility, and overall technical quality. The redesigned site is now faster, more compliant with web standards, and better optimized for search engines.
Need Design or Just a Fresh Perspective?
I work on digital design, UI, and no-code builds. If that’s what you need, let’s talk.
I work on digital design, UI, and no-code builds. If that’s what you need, let’s talk.
I work on digital design, UI, and no-code builds. If that’s what you need, let’s talk.
