21
Introduction
TUDU Productivity Website I developed a welcoming and fun brand idea and identity system to unify TUDU’s productivity and urgent characteristics.
and creates a ‘to-do’ list. The result is a prioritized ‘to-do’ list with gentle reminders and simple attainable scheduling goals for the user.
Background The TUDU Productivity Website is the brain-child of four USC Viterbi School engineers who wanted to create a website that helped the user prioritize and complete their ‘to-do’ list. What sets this website apart from iCal, Google Calendar, and other productivity calendar websites is its ability to prioritze tasks based on the amount time it takes to complete them, the due date, and the importance of the task. TUDU takes these factors into account
Challenge TUDU needed an identity and branding system that emphasized urgency without being overwhelming and organization without rigidness. The main concern was that the website would not stand out to users as ‘the productivity website’ of choice as well as overwhelm users so much so that they would not use the website regularly once they installed it. I was asked to create a brand idea, and identity system to unify TUDU’s multifaceted
1
Introduction
of a productivity website with the organization of a to-do list. The website layout and features are clean, easy to understand, and subtle. By using calming whites and greys with pops of orange, I created a website that looks fresh and not overwhelmingly busy or urgent. The identity feels calm yet calls the viewer’s attention to the task at hand. I also created a bubbly, welcoming font and wrote the company name TUDU. The TUDU identity stands out from other productivity websites, and the initial response has been extremely positive.
personality while allowing each property to develop an individual personality appropriate to its experience and target audience. To best capture the productivity function and to-do list prioritizing feature I started with the brand idea TUDU: The Prioritizer of Productivity. Solution For the identity, I looked to color for inspiration. Red tends to be associated with urgency and emergency, whereas yellow is calming and warm. Together they make orange, which combines the intensity of red with the optimism of yellow. Similar to the color orange, the TUDU website combines the immediacy
2
TUDU Logo Study
3
TUDU Logo Study
4
TUDU Logo Study
5
TUDU Logo Study
6
TUDU Logo
Logo H. 190 pt
Space 5.5 pt
Letter H. 68 pt
Letter H. 47 pt
Spacing 4.7 pt
Letter W. 40 pt
7
TUDU Logo
Full Logo
Site Logo
Icon Logo
shown on a which background and must be 133 px by 57 px. It must site 82 px from the left. The TUDU icon logo is only the TUDU check. It is to be used exclusively for the taskbar icon or application icon. This must be shown on a white background no smaller than 30 pt.
TUDU has three official logos. The main logo is the TUDU check combine with the TUDU name underneath. It is important that this logo is only shown on a white background and is no smaller than 30 pt on the smallest side. The TUDU site logo is only the TUDU name. This can only be
8
TUDU Primary Color Palette
TUDU Orange F37124
Gray D DDDEE0
White FFFFFF
produce a clean, modern effect and guarantees a consistent brand presence throughout the website interface. The secondary colors shown on the opposite page are comprised of 3 orange shades These are used in secondary website elements like time blocks and calendar days.
Our corporate colors are TUDU Orange, Gray D and White. These primary colors form the basis of every design and dominate the TUDU identity. TUDU Orange is reserved for the logo only. Gray D adds an underlying, organizational structure to the website. White is widely used in page layouts to
9
TUDU Secondary Color Palette
F18021
F38C22
10
F2B220
TUDU Primary Type Colors
Orange F
Gray 9
ADD TASK name HOME
Gray E
due date DD MONTH priority
+
reminder DD MONTH
11
TUDU Primary Type Colors
Gray 9 9B9DA0
Gray E E3E4E5
The two swatches above are approved in the TUDU Identity for using color with type. Gray 9 is used for headlines and navigation bar buttons. Gray E is used for body copy and sub-headlines.
Orange F F37124
Orange F is used for button icons and highlighted navigation bar buttons. In addition, White is used for copy on buttons and scheduling blocks on week and month views.
12
TUDU Typography
13
TUDU Typography
Logo
Headline
Body Copy
TUDU Sans
Arial Bold
Arial Regular
ABCDEFGH IJKLMNOPQ RSTUVWXY Zabcdefghi jklmnopqrs tuvwxyz123 4567890
ABCDEFGH IJKLMNOPQ RSTUVWXY Zabcdefghi jklmno pqrs tuvwxyz123 4567890
Our corporate typefaces are Arial Bold and Regular. Arial was chosen because it is a web safe font. TUDU Sans is a special typeface that was created specifically for the TUDU logo. TUDU Sans can only be used for the TUDU logo.
14
TUDU Icons
15
TUDU Buttons
TUDU buttons must word in the center with equal spacing around the borders.
16
TUDU Website Layout
www.tudu.com
Home
Calendar
Tasks
Settings
February 2014
ADD TASK name HOME
due date DD MONTH priority
+
reminder DD MONTH NOTES
9:00am
10:00am
11:00am
12:00pm
TASKS
NOTES
Design Homepage
At 10:00am theTudu Homepage must be designed for the meeting with Alex. Afterwards be sure to call Mom to let her know that Professor M is allowing you to skip her class on Friday.
Meet with Alex Call Mom Email Professor
17
1:00pm
+
TUDU Website Layout
www.tudu.com
Home
Calendar
Tasks
Settings
February 2014
ADD TASK name HOME
due date DD MONTH
8:00 am
priority
9:00 am
+
10:00 am
reminder DD MONTH
11:00 am
TROY CAMP
TROY CAMP GYM 100
GYM 100
NOTES
12:00 am
1:00 pm
2:00 pm
WORK
+
WORK
WORK
3:00 pm
WRIT 340
WRIT 340
18
TUDU Website Layout
www.tudu.com
Home
Calendar
Tasks
Settings
February 2014
ADD TASK name
Thursday Febuary 6, 2014
HOME
due date DD MONTH
TASKS
priority
Design Homepage
+
Meet with Alex Call Mom
reminder DD MONTH
Email Professor Add Task
NOTES
NOTES TES Notes on no Nt no otes on notes on notes. So many no otes! Look at the es se notes!
+ WRIT 340
WRIT 340
19
21