1
Introduction
Tudu Productivity Website I developed a welcoming and fun brand idea, brandline, and identity system to unify Tudu’s productivity and urgent characteristics.
The result is a prioritized ‘to-do’ list with gentle reminders and simple attainable scheduling goals for the user. Challenge Tudu needed an identity and branding system that emphasized urgency without being overwhleming and organization without ridgedness. 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 personality while allowing each
Background The Tudu Productivity Website is the brainchild 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 that this one takes into account the amount of time, the importance, and the due date of each individual task and then creates a ‘to-do’ list based on its findings.
2
Introduction
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.
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.
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 oranger, which combines the intensity of red with the optimism of yellow. Similar to the color orange, the Tudu website combines the immediacy of a productivity website with the
3
TUDU Logo Study
4
TUDU Logo Study
5
TUDU Logo Study
6
TUDU Logo Study
7
TUDU Logo
Logo H. 190 pt
Space 5.5 pt
Letter H. 68 pt
Letter H. 47 pt
Spacing 4.7pt
Letter W. 40 pt
8
TUDU Logo
Full Logo
Site Logo
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 30pt on the smallest side. The TUDU site logo is only the TUDU name. This can only be
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 30pts.
9
TUDU Primary Color Palette
TUDU Orange F37124
Gray D DDDEE0
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
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 seconday website elements like time blocks and calendar days.
10
TUDU Secondary Color Palette
F18021
F38C22
11
F2B220
TUDU Primary Type Colors
Orange F
Gray 9
ADD TASK name HOME
Gray E
due date DD MONTH priority
+
reminder DD MONTH
12
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 butttons. Gray E is used for body copy and subheadlines.
Orange F F37124
Orange F is used for button icons and highlighted navigation bar butttons. In addition, White is used for copy on buttons and scheduling blocks on week and month views.
13
TUDU Typography
14
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 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.
15
TUDU Icons
16
TUDU Buttons
TUDU Buttons must word in the center with equal spacing around the borders.
17
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
18
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
19
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
20
TUDU Website Layout
www.tudu.com
Home
TASKS
DUE DATE
Calendar
IMPORTANCE
Design Homepage
February 10
Meet with Alex
February 11
Call Mom
Everyday
Email Professor
February 12
Tasks
Settings
NOTES Today is a super busy day. I have to call my mom or else she’ll kill me. More Notes Here. And Here. And Here too!
REMINDER Sunday, Feb 9 9:30pm
ADD TASK name HOME
due date DD MONTH priority
+
reminder DD MONTH share
sort
delete NOTES
Grocery Shopping
TASKS COMPLETED
Turn in WRIT-340 Paper
21
+
22