Case Study: Time.gov Redesign

Background

Time.gov displays the U.S official time ran by the NIST and USNO. I was first introduced to this site while in college when my Calculus professor suggested that everyone visit time.gov to synchronize their watches in recognition of daylight saving time. That was back in 2011. With the recent introduction of the U.S. Web standards, I thought it would be an excellent exercise to use the design system to update the style and bring a bit more usefulness to the web app.  

Even though I do not have any accurate statistics on device
type, user agents and quantity of people using time.gove,
I’ve made the assumption that this site if used today, would
mainly be viewed on a mobile device more than desktop. I
believe this is a safe assumption because there is a higher
percentage of people that browse the web on a mobile device.

The Design principles listed in the U.S. Web standards
mention designing for flexibility. Scaling up from mobile to
a responsive site will achieve this.

Feature parity with the current features of time.gov are
maintained.

  • Present time at any time zone Hours: Mins: Secs
  • Ability to see Global timezones in UTC
  • Day and night indication on the Globe24 hour and 12-hour clock
  • American Time Zones
  • Links to information about time.gov.

The color blue was chosen mainly because of the
psychologically, it is known as a color of trust. Source Sans
Pro appears to address the typographic concerns I had for
surfacing many numbers at once while maintaining a good
scanning order. Notice, the night indicator, and universal
time zone along with American timezone.

The styling and the colors used are not accessible in the
current version of time.gov due to the low level of contrast
used for the hyperlinks, controls, and copy.

While checking the contrast ratio, I was able to find some
specific information on the site that is unreadable. For
instance, there are two links on the bottom that point out to
the user there is an alternate flash page as well as a link
to the about page of the site.

The map shows which timezone is in day or night. I believe it would be a bit more useful if the day and night indication could be more specific to the timezone.

 

Design

I will use the U.S. Web Design Standards in order to bring consistency and clarity to time.gov.

Even though I do not have any accurate statistics on device type, user agents and quantity of people using time.gove, I’ve made the assumption that this site if used today, would mainly be viewed on a mobile device more than desktop. I believe this is a safe assumption because there is a higher percentage of people that browse the web on a mobile device.   The Design principles listed in the U.S. Web standards mention designing for flexibility. Scaling up from mobile to a responsive site will achieve this.

I’ve kept feature parity with the current features of time.gov. They are listed below:

  • Present time at any time zone Hours: Mins: Secs
  • Ability to see Global timezones in UTC
  • Day and night indication on the Globe
  • 24 hour and 12-hour clock
  • American Time Zones
  • Links to information about  time.gov.

The color blue was chosen mainly because of the psychologically, it is known as a color of trust. Source Sans Pro appears to address the typographic concerns I had for surfacing many numbers at once while maintaining a good scanning order. Notice, the night indicator, and universal time zone along with American timezone.

Instead of using a general world map to display the day and night line. Icons were used to express the time of day for any particular timezone.  This solution provides more context and specificity.

The challenges I’ve faced with using the U.S design system stemmed from some patterns not available such as iconography, numeric models, and mobile. My next goal is to contribute to the U.S Web Standards Repo help style choices I’ve found during the course project.  Overall, the U.S. Web Standards is a helpful document especially there design principles, which I have now incorporated as part of my standards.

FollowDribb.Lin.Tw.
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!