NCARB / Product Design Tracking Time of Architecture Interns

Product Design
Information Architecture
Interaction Design
Visual Design
Design Language
Year & Duration
2013, 3 months
Share This

EightShapes designed an iPhone app for architecture interns to track their progress with NCARB, the organization that administers professional certification.

Guillermo Ortiz, VP of Development, sought to encourage interns to enter time on the go, between meetings, and commuting to the job site. He wanted to reduce their dependency on the desktop application.

Learning from Interns

We talked to 6 interns to learn more about their approach and attitude toward tracking hours.


Intern profile

Interns aren’t all the same. Some have worked for a while, others are still in school. Technology adoption varies. Some use their phones for everything like many other professionals. Others don’t.

Time-tracking behaviors

Some interns enter data at their desk at the end of the quarter when reports are due. Others record weekly, diligently using a spreadsheet transferred later to NCARB.

All about one number

Interns don’t care how much they’ve done, only about how much is left. They track how close they are to success.

Designing the Flow

Together with NCARB, we brainstormed the app structure.

Visualization of NCARB Application Architecture
This architecture guided our design process.

Picking tasks

Interns pick a task before entering time. The whole list doesn’t fit on one screen, so we nested them in categories.

Screen: Task List
Seventeen tasks in four categories

Entering time

Entering time is different from entering a phone number or a dollar value. Therefore, we designed a custom interface to minimize taps.

Screen: Time Entry
Custom form controls simplify time entry

Seeing progress

The app answers “How much do I have left?” in two ways: a dashboard summarizes time remaining for each category; and individual tasks show progress meters when swiped.

Screen: Overview

Screen: Task List Swiped

Two ways to see progress

Submitting for approval

For the minimum product, we left out extensive interaction with the intern’s manager. Instead, they can trigger the process for approval, which happens offline.

Screen: report with button to submit to manager
Interns submit their hours once a quarter

Difficult design decisions

The team passionately debated how to handle edits. Ultimately, we determined that overwriting the entry was the least confusing. When users typed the new value, they would see that reflected, and we didn’t have to burden the UI with communicating how the hours would be summed.

Visualizing the Editing Hours flow
Distinguishing adding an entry from updating an entry

Normalizing the Design Language

Designed by EightShapes in 2013, the home page implemented a new visual language and paved the way for the site’s responsive design. With this app, NCARB extended their brand identity beyond their web site.

Looking to the future

When we started this project, EightShapes prepared two distinct style tiles: one based on existing online apps, and the other based on the newer home page design. NCARB chose the latter, which represents NCARB’s visual language for the future.

Elements for native apps

We extended the design language to incorporate additional elements specific to native apps, including form fields, labels, and data displays.

Screens Worth Sharing

The striking data visualizations inspired interns to do something unexpected: they posted screenshots of the “hours completed” view on social media. The time-tracking tool became a way to celebrate career achievement.