Tips & tricks on how to make a good website

1. 20th GBG Dhaka Meet-up
How to Make a Good Website
Sunday, November 3, 2013
In partnership with:

2. GBG Managers – Nash Islam, Riyad Husain & Salman Hossain
Building a Custom Site: How We Made Propertyinbd.com (10 min)
Ashaque Ul-Haque, Co-Founder, PropertyinBD
Use of Natural Language in Web Development (10 min)
Shafkat Alam, CTO, BlueScheme
Website Visitor’s Experience – Don’t Make Them Think! (10 min)
Masrur Hannan, UX Consultant & Founder, Bonolota Designs
The Importance of User Interface Design & Its Measurable Impact on
the Bottom Line (10 min)
Saddam Azad, Founder & CEO, DugDugi
Designing a Useful Site (10 min)
Milon Nazimaudduala, Chief Product Officer, G&R Ad Network
People & Pixels: Managing Web Projects (10 min)
Razin Mustafiz, Product Manager, Newscred
A Word from BlueScheme (5 min)
Rameez Hoque, CEO, BlueScheme
Closing Note & Next Steps
T O D A Y’ S A G E N D A
Welcome Note (5 min)

3. Welcome Note
GBG Managers:
Nash Islam
Riyad Husain
Salman Hossain

4. Our Objectives
Increase
adop%on
of
internet
technologies
amongst
Bangladeshi
organiza3ons.
Plan
events
that
appeal
to
a
wide
variety
of
key
audience
segments
–
e-­‐commerce,
marketers,
students,
women,
mappers
&
more
Build
a
community
that
gets
to
know
each
other
by
hos3ng
atleast
1
live
event
per
month

5. GBG
Managers
Advisor
Our Team
Head
Intern

6. Google’s Objective with GBG
Build
a
non-­‐technical
community
run
by
local
volunteers
to
share
knowledge
and
best
prac3ces
for
Google
web
technologies.
The
GBG
is
an
experimental
ini3a3ve
started
in
2012,
and
is
based
on
the
success
of
the
Google
Developer
Groups
worldwide,
where
developers
meet
to
discuss
building
applica3ons
with
Google
products.
See
detailed
informa3on
on
GBG
on
Google’s
official
GBG
page

7. GBGs Worldwide
100+
GBGs
worldwide
30+ GBGs in
South & Southeast Asia
Nearby GBGs include Pakistan, India, Sri Lanka,
Thailand, Indonesia, Malaysia, Cambodia,
Vietnam & Philippines

8. Our Events
We’ve organized 20 successful events so far, reaching more
than 1500 local digital professionals, entrepreneurs &
changemakers. We are a community of technology thought
leaders
See
pictures
and
presenta3ons
on
our
Blog,
Google+
&
Facebook
page.

9. GBG Dhaka 2013 Event Roadmap
• Jan
6
–
E-­‐Commerce
Hour
&
Startup
Weekend
Mini
Bootcamp
• Feb
1
–
Building
Brands
with
Digital
• Feb
16
–
Educa3on
&
Collabora3on
Online
• Mar
29
–
Mapping
Bangladesh
• April
25
–
GBG
@
PMO
Innova3on
Adda
• May
10
–
Mapping
Experts
Meetup
• May
21
–
Empowering
Project
Management
with
Web
Tools
• June
1
–
Women
on
the
Web
Workshop
#1
• June
30
–
Student
Leaders
Workshop

10. GBG Dhaka 2013 Event Roadmap
• Sep
7
–
Mapping
Banani
#1
• Sep
8
–
Dhaka’s
Tech
Communi3es
• Sep
14
–
Mapping
Banani
#2
• Nov
3
–
How
to
Build
a
Good
Website
• Nov
10
–
Latest
in
E-­‐Commerce
• AND
LOTS
MORE!
Share
YOUR
IDEAS
for
events
with
us!

15. Full-Control! Embed Stuff & More

16. Building a Custom Site:
How We Made
PropertyinBD.com
Ahsan Ul-Haque
Co-Founder
PropertyinBD

17. “Innovation distinguishes
between a leader and a
follower.”

18. BUILDING A
CUSTOM SITE
HOW WE MADE
PROPERTYINBD.COM
Date: 3rd October; Sunday

19. Introducing Myself
Ashaque-ul haque
Co-Founder
Propertyinbd
Profession: Art Director

20. About “propertyinbd”
¨
property related classified website.
¤
¨
The best feature of our - “easy search option”
¤
¨
Where people come and get to find their desirable house office shops or any other
commercial space and similarly they can post their salable or rentable property here.
People can search by locality based (ex. Not by full uttara but one can search by sector too).
People can get every kind of property related information
¤
¤
rent
¤
property news
¤
Events
¤
¨
Buy
articles.
Listing property for individual person is totally free and Developers can
showcase their products with a individual website under “propertyinbd” which
is a monthly based paid service.

21. How the Idea Came
•
•
•
Experience is the source of idea!
Thinking of something new, does not exist in market
Property related portal was not present

22. And the opportunities….
¤
¤
¤
The experience of practical life
revolution of internet
future real estate market in Bangladesh
These are the three thing which drives us to make a website like this

23. Then….

24. The Execution
¨
Team making
¤ Analysis
¤ design
¤ Technical
¤ Data
storage
¤ Branding

25. Factors we Considered
¨
Analysis of property portal in Bangladesh
¤
¨
find out the lacking of these website
We also analyzed some world’s popular property portal
¤
zoopla(uk)
¤
iProperty(singapore)
¤
¤
¨
¨
Rumah123(indonasia)
indiaproperty, makaan(india)
Sorting out the unique idea/feature and merging with our unique and helpful idea
which can really
Must be helpful & convenient for users

26. The website: First concept

27. The website : 2nd try

28. The website: Final design

29. The website : Live Website

30. The website : Property listings

31. The website : Property Details

32. The website : Article

33. The website : Developer Listings

34. The website : Developer Home

35. Challenges we faced
¨
Behavioral change of consumers
¨
Creating awareness of our website
¨
Communication
¨
Lack of experience
¨
Required Investment amount

36. Getting more close to People

37. Getting more close to People

38. Getting more close to People

39. Getting more close to People

40. Getting more close to People

41. Getting more close to People

42. Getting more close to People

43. Response from Market
-
-
-
-
-
More than 500 registered members
Increasing number of contributors
25 Thousand visitor
1 lakh 50 thousand page view
Became 2nd position in property portal according to alexa
ratings.
We are planning mass communication for our publicity.

44. Future Plan
¨
Getting enlisted with real estate companies
¨
Enriched with all the information
¨
Contact with architect firms, interior design houses as well as law house
¨
Required initiatives for enabling it as market leader.

45. Thank You

46. Use of Natural Language in
Web Development
Shafkat Alam
CTO
BlueScheme

47. NATURAL LANGUAGE
IN WEB DEVELOPMENT
Shafkat Alam
CTO, Bluescheme
HBSc Computer Science, HBA Economics
University of Toronto, Canada

48. Issues with Language
Web programming is the science of coming up with
increasingly complicated ways of concatenating strings.
Source: Twitter
• Bi-lingual – English, Bangla
• Multicurrency – Taka, Dollar, etc
• Pluralisation
• Gender Selection

49. Typical auto generated messages
• Welcome back Mr/Ms ____, you have 5 new message(s)
• Welcome back Mr/Ms ____, you have 1 new message(s)
• Welcome back Mr/Ms ____, you have 0 new message(s)
• Number of new messages: 5
• Product price: BDT 1,00,000.00
• Product price: USD 1,00,000.00
• There are 8 result(s) in 1 categor(ies)
• Facebook in the early days,
• Person X updated their profile picture

50. Thing to Note
• Standardise plural data with the following keywords
“zero”, “one”, “two”, “few”, “many”, “other”.
• All languages can be roughly mapped to these keywords,
and it is the basis of optimised user messages

51. Optimised Messages
• Welcome back Mr ____, you have 5 new messages
• Welcome back Ms ____, you have 1 new message
• Welcome back Mr ____, you have no new message
• Product price: BDT 1,00,000.00
• Product price: USD 100,000.00
• There are 8 results in 1 category
• Facebook in the early days,
• Person X updated his profile picture

52. Solutions & More Resources
• The UX of Language by Alex Sexton
• http://alexsexton.com/blog/2012/03/the-ux-of-language/
• Gettext (jed)
• ICU MessageFormat

53. Website Visitor’s Experience:
Don’t Make Them Think!
Masrur Hannan
UX Consultant & Co-Founder
Bonolota Designs

54. Website Visitor’s Experience
‘Don’t Make Them Think!’
Masrur Hannan
www.linkedin.com/in/masrurhannan
Content ‘mostly’ based on:
Don’t Make Me
Think, by
Steve Krugg,
Ex- Apple UX
personnel.

55. Discussion Topics
• What is User Experience (UX)?
[2 minutes, 2 Slides]
• How to Design User’s Experience
[3 minutes, 3 Slides]
• Website Visitor’s Experience
[5 minutes, 11 Slides]

56. What is User Experience (UX)?

57. User Experience (UX) in daily life

58. What is User Experience Design?

59. How to design User’s Experience
Bonolota Designs’ methodologies in User Experience
Design:
1. Initial RESEARCH
2. Prototyping
3. User Testing of prototypes
4. Iterative design and development with USER TESTING
5. Post-launch performance measuring

60. User Experience (UX) Design objective

61. User’s Experience Design and Websites
Website Visitor’s Experience - ‘Don’t Make Them Think!’
Any Web Page, should be:
1. Self-evident
2. Obvious
3. Self-explanatory
Visitors should be able to “get it”,
and with no Squinting :)

62. Website Visitor’s Experience Design
When creating a site, the most important job is to get rid
of Visitor’s question marks!

63. Website Visitor’s Experience Design

64. Website Visitor’s Experience Design
Things that make us think
Links and buttons that aren’t obviously clickable.
· Where am I?
· Where should I begin?
· Where did they put _____?
· What are the most important things on this page?
· Why did they call it that?

65. Website Visitor’s Experience Design
We don’t read pages. We scan them.

66. Website Visitor’s Experience Design

67. Website Visitor’s Experience Design
Glancing around, a website visitor should be able to
point at the different areas of the page and say:
“Things I can do on this site!”
“Links to today’s top stories!”
“Products this company sells!”
“Things they’re eager to sell me!”
“Navigation to get to the rest of the site!”

68. Website Visitor’s Experience Design
Designing the Home
picture'.
Page: 'conveying the big
• Site identity and mission
• Site hierarchy
• Search
• Timely content
• Deals
• Shortcuts

69. Website Visitor’s Experience Design
Designing the Home
message across:
Page, getting the
1. The tagline – precise, NOT vague
2. The Welcome blurb – Not ‘mission statement’
3. Don’t use any more space than necessary.

70. Website Visitor’s Experience Design
Things that can diminish goodwill:
1. Hiding information that visitors want
2. Punishing visitors for not doing things your way!
3. Asking visitors for information site don’t really
need
4. Putting sizzle in my way
5. Amateurish looking sites

71. Website Visitor’s Experience Design
Things that can increase goodwill:
1. Save visitors steps wherever you can
2. Know what questions I’m likely to have, and
answer them
3. Keep website pages up to date
4. When in doubt, apologize
5. Make it easy to recover from errors

72. Thanks! …
Sorry, perhaps NO time for Q&A?
URLs: www.bonolota.com (coming soon)
www.fb.com/bonolotadesigns
Email: contact@bonolota.com
Masrur Hannan: mh@bonolota.com
SlideShare: http://slideshare.net/mhannan
Linked In: www.linkedin.com/in/masrurhannan
Thanks again,
Masrur Hannan.

73. The Importance of User
Interface Design &
its Measurable Impact
on the Bottom Line
Saddam Azad
Founder & CEO
DugDugi

74. UI/UX DESIGN
AND ITS IMPACT ON
BUSINESS BOTTOM LINE

75. CALL TO ACTION
• Think
of
the
user
as
a
people
with
needs
• Provide
an
incen3ve
to
the
user
• Communicate
the
USP
–
using
text,
graphics
and
even
video.

76. Simple, yet effective

77. Appealing, instills a sense of curiosity

78. Solve a problem

79. OBAMA FOR AMERICA
CAMPAIGN DONATIONS
• A/B
tes3ng
of
– Call
to
Ac3on
– Contrast
– Visibility
– Focus

81. $200 MILLION
IN ADDITIONAL REVENUE

82. Thank you.

83. Designing a Useful Site
Milon
Chief Product Officer
G&R Ad Network

84. Muhammad Nazimuddaula
•
•
•
Started career as an Animator
2003
Worked in Advertising for 2 years
Working with websites since 2005

85. Drawings in 30 seconds

86. after adding some colors
on
30 seconds drawings

87. good design is good plan

89. it starts with paper
and pencil
(pen, photoshop etc also allowed)

97. its never too late to ‘do
the right thing’

100. thanks J

101. People & Pixels:
Managing Web Projects
Razin Mustafiz
Product Manager
NewsCred

119. A Word from BlueScheme
Rameez Hoque
CEO
BlueScheme

120. THANK YOU !!
Please follow us on Google+ & Facebook to
keep up to date on our latest activities