The document summarizes a student's analysis of the design of the website Twitlonger.com. It includes the following key points: 1) The student reviewed the various pages of Twitlonger.com, including the login, home, tweet posting, and account pages. 2) They conducted a survey of Twitlonger and Twitter users to understand problems faced and ease of navigation. 3) In their analysis, the student found that while navigation was clear, the design lacked visual appeal and consistency across pages. They felt the site did not effectively convey the fun nature of Twitter.

1. Improvising the Design
Twitlonger.com
By Kamiyah (Kimmy)
102005
Design for Interactivity, Year 2
Republic Polytechnic
Ps: Please view this file in slideshow mode,
since there are certain animations for each slide.
Thank you.

2. What is Twitlonger.com?
• It is a website that is ‘associated’ with Twitter.com
• Because Twitter.com has a tweet limit of 140
characters, Twitlonger.com was created to cater to
twitter users who wants to tweet longer than 140
characters.
• Twitlonger.com ’s tagline, ‘For when you talk too
much for twitter’ clearly shows that it was created
for tweeting tweets longer than 140 characters.

3. PART 1:
Understanding and Evaluating
the current interface of
Twitlonger.com

4. Twitlonger.com
http://www.twitlonger.com/index.php/main_new
-Log In Page-
Header
Banner
This is how the Log In Page looks like.
Plain and simple, isnt it?
The constant things kept throughout the
whole website, is the HEADER, the BANNER,
and the FOOTER.
Footer

5. Twitlonger.com
-Log In Page-
Header.
Remains the
Hidden same in every
button. Click page of the
it and it will website.
lead the user
back to this
same page. Link. Leads user Links that lead
to Twitlonger’s users to
Twitter Page. another page.
Acts as a log Links are the
in button. same as those
Users MUST from Header.
have a
Twitter
Account in Clickable links
order to log Click and button will change to ‘ Like’ that lead users
in. with a tick symbol. to other pages.

6. Twitlonger.com
-Log In Page-
Once the ‘Like’ button is clicked, the
button becomes inactive, and then
this will pop up and link users to
their Facebook accounts.

7. Twitlonger.com
http://www.twitlonger.com/index.php/main_new/-Home Page-
This is the Home Page, where users would
mainly be at when they use this website.
It has the same design/look as the log in
page, with the header, banner and footer in
the same place.

8. A profile/account bar is
added to the page. This will Twitlonger.com
be in every page in the
website when the user is -Home Page-
logged in.
Leads user back to Log In Page.
Number automatically
Buttons. ‘write’ Link that leads counting the number of
refreshes the page, user to their characters in the tweet.
while ‘my account’ Twitter Page.
leads user to their Hover over it
account page. and a pop up
will appear.
Button colour changes to a darker
blue once hover over. Leads user to
another page where the posted tweet
is shown.

9. Twitlonger.com
-Tweet Posted Page-
This is the page when a tweet is
posted. The look/design of the page is
very different as compared to the log
in page and the home page.

10. Twitlonger.com
-Tweet Posted Page- Shows the number of
Hidden button. Leads
‘retweets’ and ‘likes’
user back to home
related to this post.
page.
User’s profile
photo, Name
with Twitter
username,
and details of
the post.
Nothing can
be clicked in
this section.
Space for
Clickable links. Colour Advertisements
Section change to black once
where the hovered over.
posted
tweet is
shown.

11. Twitlonger.com
-Error Page-
Hidden button. Leads
user back to home
page.
Section for
Error
disclaimer.
Space for
Advertisements
‘Home’ leads
user back to
Home Page.

12. Twitlonger.com
-‘my account’ Page-
Nothing can be clicked in
this section. Details
separated with bullet
points.
Leads user to another page where
their past posts are shown
Leads user to another page where
they can retrieve their old posts.

13. Twitlonger.com
-Posts from
Page title. Account Page-
Details of
post (date and
day) Tweet posted.
Leads user to
Tweet Posted
Page.
Leads user to
Delete Post Page.
Navigations to other pages of this
part of the website.

14. Twitlonger.com
-Retrieve Old Posts Page-
Nothing can be clicked in this
section. Details separated with
bullet points.

15. Twitlonger.com
-Delete Post Page-
Button colour
changes to a
darker blue
once hover
over. Leads Check box.
user back to
Post from Details of chosen post
Account Page. to be deleted.
‘Message
deleted’ be be
shown.

16. After going through the website,
• I realized that there isn’t any problem with the navigations and the website is
easy to understand because of the simple English language used.
• However, I find that the website looks too simple and perhaps, boring.
• As far as I know, Twitter is a fun website/application where users can tweet
about anything. So, I feel that Twitlonger doesn’t show that fun factor about
Twitter.
• I realized that Twitlonger doesn’t do categorizing that well. For example, the
‘Posts from Account Page’ where each post are separated by lines. I find
that really ugly.
• And I don’t understand why the ‘home page’ and the ‘tweet posted’ page
looks totally different. It gives me a feeling that Twitlonger doesn’t have an
identity.

17. PART 2:
Surveying Twitlonger and Twitter Users,
and People Online about their opinions in
regards to Twitlonger.com’s current
design

18. Survey Qns 1
Gender:
Finding out the gender of the user helps me to have a better understanding of which
gender uses twitlonger more, and it seemed that there are more girls using
twitlonger, based on this result.
If female users are the majority, then perhaps the theme of the website could be slightly
‘girly’ or more suited to the female gender.

19. Survey Qns 2
Age:
Finding out the age of the user helps me to have a better understanding of which age
group uses twitlonger more, and it seemed that majority of the users are of ages 18 to 25.
With the age group in mind, perhaps the language of the website could be considered to help
them have better understanding. A complicated website wouldn’t be easy for a young person to
use.

20. Survey Qns 3
When you first used Twitlonger.com, did you face any problems?
Finding out the problems faced by the user helps me to have a better understanding of what
problems Twitlonger will have, or what problems users would encounter when they use
Twitlonger.com.
With that in mind, the interface of the website can be improved and can be better if such problems
were reduced.

21. Survey Qns 4
How easy is it to navigate twitlonger.com?
Finding out the opinions/experience of navigating around the page by the user helps me to
have a better understanding as to whether users have a problem using the website throught
he navigations.
With that in mind, the navigation interface of the website can be improved and it can be better if
such problems were reduced.

22. Survey Qns 5
How visually appealing is twitlonger.com?
Finding out the opinions of the website’s design and look by the user helps me to have a
better understanding as to whether the website is visually appealing and interesting to keep
the users using the website.
With that in mind, the design interface of the website can be improved and it can be better if the
design helps to give the website the ‘fun’ factor of Twitter.

23. Survey Qns 6
What changes do you think would improve the website?
Finding out what the users wants to see changes of in the website would help me
re-design the webpage with their needs in mind.
With that in mind, the whole interface of the website can be improved and it can be
better if such problems were reduced.

24. From the survey results,
• I found out that users, like me, don’t really face any
problem while using the website.
• Many felt that the navigations of the website can be
improved the most.
• Some felt that the website looked alright, though
one said it was visually unappealing.
• So with these users’ comments in mind, I will then
ideate a few ideas that solve the problems faced by
them.

25. PART 3:
Ideation after gathering feedback from
Twitlonger/Twitter users, and people
online about Twitlonger.com

26. Ideation 1
Logout and user profile
buttons at the top
instead of under the
Users can banner.
change the
background to
pictures or
different colours. Archives added to allow user
quick access to their past
posts, instead of having to go
to ‘account’ then ‘manage past
posts’.
Acts as a prompt
to let usrrs know
that their tweet
has been
posted. To view
the tweet, they
will have to click
‘here’.

27. Ideation 2 Logout and user profile
buttons at the top
instead of under the
Users can banner.
change the
background to
pictures or
different colours.
Inspired by the Archives added to allow user
word ‘write’, a quick access to their past
notepad posts, instead of having to go
represents the to ‘account’ then ‘manage past
field where users posts’.
would type their
tweet in before
posting it.

28. Ideation 3
Logout, settings and
user profile buttons at
the top instead of
Users can under the banner.
change the
background to
pictures or
different colours. A talking human with the
speaker to emphasis on
Twitlonger.com’s tagline, ‘for
when you TALK too much for
twitter’.
Acts as a prompt
to let users know
that their tweet
has been posted.
To view the tweet,
they will have to
click ‘view in
page’.

29. Digital Sketches of my Ideas
Design 1 Design 2
Design 3

30. PART 4:
Gathering feedback about my created
designs through a survey, and to see if the
ideas can be improved, in order to choose
the finalized idea.

31. Survey about the Ideas
Question 1
From the results, it can be seen that the design is good in terms of the three
factors stated. However, one said that the visual appearance of Design 1 was
not good. Perhaps the design looked too simple for them.

32. Survey about the Ideas
Question 2
From the results, it can be seen that the design is good in terms of the
three factors stated.

33. Survey about the Ideas
Question 3
From the results, it can be seen that the design is good in terms of the three factors
stated. Design 3 seems like it has a few supporters because it can be seen that some
rated it as Very Good. However, Design 3 was also rated as Not Good as well. So it
shows that there are people who likes this design, and there are people who don’t.

34. Survey about the Ideas
Question 4
Asking this question helped me to see which of the three designs is well
liked and it turns out that Design 1 and Design 3 has equal votes. So
perhaps, I would try to combine these two ideas into one finalized
idea and then start on a Prototype for it.

35. Survey about the Ideas
Question 5

36. Survey about the Ideas
Question 5
From the several responses, I can see that there are many things that can be
improved on in the designs I came up with. A few said that there is no flow in the
design, and some liked the speech bubbles.

37. PART 5:
Finalizing Idea with gathered feedbacks
from previous survey.

38. Sketches for Finalized Idea
Main Page Archives tab
(Main page)
Tweet Posted Page

39. Rationale behind the Finalized Idea
• Combining Design 1 and 3 together.
– Speech Bubbles, Loudhailer, Talking Human
– Tab navigation design
• Interactive
– Users having the ability to change the background to their preferred image.
• Through the design, I want to clearly show the aim of the website; to
tweet more than 140 character. Thus explains the talking human, the
loudhailer and speech bubbles.
• It will look more interesting, and professional at the same time as
well.
• Main color of website is Blue. Twitter’s official color is Blue, so I
would like to keep it that way.

40. Final Prototype for Finalized Idea
Main Page Archives tab
(Main page)
Tweet Posted Page

41. The End.
Thank you.