Digiflare came up with DigiTweet as an open source Twitter client for users who require a great user experience for free. The coolest part is we used non-Microsoft products in combination with Microsoft design and developer tools to make this happen. Most of our interaction was built using Microsoft Expression Blend and Visual Studio, however our design artifacts were created in Adobe suite of products. We were able to utilize the seamless workflow of Expression to import our Adobe artifacts in order to use them in our WPF application.

1. This deck is available at: http://tinyurl.com/xxx
Bu i l d i n g &
De s i g n i n g a
T wi t t e r
Ap p l i c a t i o n :
Di g i T we e t
make web, not war.
Mano Kulasingam
Director, Professional Services
mano@digiflare.com
http://blog.digiflare.com

2. G o a l s f o r T o d a y ’s
Se s s i o n
• Social Networking service: Twitter
• What is Twitter?
• Is there a better User Experience than Twitter.com
• What is User Experience?
• UX across Desktop and Web
• Demo DigiTweet
• Express yourself with Expression Blend
• How to use Adobe artifacts in Expression Blend

3. Po l l t h e
Au d i e n c e
Who uses Twitter on a regular basis?
A. Yes, all the time
B. Sometimes
C. No, not into micro blogging
D. Never heard of it

4. Wh a t i s T wi t t e r ?
Twitter is a free social networking and micro-blogging service,
that allows its users to send and read other users' updates
(otherwise known as tweets), which are text-based posts of up
to 140 characters in length.
Answering one simple question.
What are you doing?

5. Wh o i s u s i n g T w i t t e r ?
• Barack Obama
• Al Gore
• Richard Branson
• Oprah Winfrey
• Shaquille O’Neal
• Coldplay
• Ashton Kutcher
• ...

6. T wi t t e r Cl i e n t s
Twitter.com TweetDeck Tiny Twitter
Twhirl Twitteriffic TwitterBerry

7. Po l l t h e
Au d i e n c e
Who has heard of User Experience (UX)?
A. Yes
B. No

8. Wh a t i s U s e r
E x p e r i e n c e (U X )?
Engage
• Is the screen attractive and well planned?
• Is the information useful, up-to-date and easy to comprehend
• Avoid UI pitfalls – long forms, slow response time, or complex
passwords
Empower
• What does the user want from the visit – Is it to get info, perform
task, or to be entertained
• Does the site deliver what the user wanted?
• Does user actions produce desired results – Use icons and
tool tips
Ease of Use
• Ensure all links are clearly clickable
• Does the user know where a click will take them, and do they know
how to get back?
• Reduce errors and unpleasant surprises

9. UX o n t h e Br o ws e r a n d
De s k t o p

10. Po l l t h e
Au d i e n c e
Who downloads and tests out Open
Source applications on sites like
CodePlex?
A. Yes, all the time
B. Sometimes
C. At least once
D. Never

11. Di g i T we e t
DigiTweet is an open source desktop Twitter client for Windows.
DigiTweet provides Twitter functionalities with rich user interface
through Windows Presentation Foundation (WPF). Project source
code available at Codeplex.

12. dem
L e t ’s s e e w h a t we c a n c r a s h t o d a y
DigiTweet o

13. Di g i T we e t v s
T w i t t e r .c o m
Twitter.com DigiTweet
• Create and view tweets • Twitter.com features ++
• Reply, Retweet, Direct • Interactive dockable pane
Messages and • Share pictures with TwitPic
• User Profile • Friends List
• Favourite • Categorize Contacts with
• Search Colors & Toast Alerts
• Preview Tweet URL

14. Po l l t h e
Au d i e n c e
Did you know that you can use non-
Microsoft design tools to create
artifacts for Silverlight and WPF
application?
A. Yes, way cool with the integration features of
tools like MS Expression Blend
B. No, but I'd like to know more
C. No, design isn’t really my thing

15. Ex p r e s s i o n Bl e n d
Fe a t u r e s
• Design for Desktop and Web
• WYSIWYG Design Surface
• Over 30 Controls and Containers
• Professional Timeline
• Styling and Customization
• Importing Photoshop and Adobe Illustrator files
• Effects
• Design-time annotations
• XAML
• Visual Studio Integration

16. A d o b e F i l e I mp o r t
• Adobe Photoshop files
– Layers with positions
– Bitmap and vector graphics
– Text
– Masks
– Gradient and solid fills
• Adobe Illustrator files
– Equivalent to support in Expression Design
– PDF compatible files

17. dem
o
L e t ’s s e e w h a t we c a n c r a s h t o d a y
Import Adobe design artifacts into Blend 3

18. Q &A
Mano Kulasingam
Director, Professional Services
mano@digiflare.com
http://blog.digiflare.com
http://www.digitweet.com