How to Make a Good Website - 20th GBG Dhaka

20th GBG Dhaka Meet-up

How to Make a Good Website

Sunday, November 3, 2013

In partnership with:

Welcome Note (5 min) 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

GBG Managers: Nash Islam

Riyad Husain Salman Hossain

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

Our Team GBG Managers

Advisor Head Intern

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

GBGs Worldwide

100+ GBGs worldwide

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

Our Events

See pictures and presenta3ons on our Blog, Google+ & Facebook page.

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

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

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!

Full-Control! Embed Stuff & More

Building a Custom Site: How We Made

PropertyinBD.com Ahsan Ul-Haque

Co-Founder PropertyinBD

“Innovation distinguishes

between a leader and a

follower.”

BUILDING A CUSTOM SITE HOW WE MADE PROPERTYINBD.COM

Date: 3rd October; Sunday

Introducing Myself

Ashaque-ul haque Co-Founder Propertyinbd Profession: Art Director

About “propertyinbd”

¨  property related classified website. ¤  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.

¨  The best feature of our - “easy search option” ¤  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 ¤  Buy

¤  rent

¤  property news

¤  Events

¤  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.

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

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

Then….

The Execution

¨  Team making ¤ Analysis ¤ design ¤ Technical ¤ Data storage ¤ Branding

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

The website: First concept

The website : 2nd try

The website: Final design

The website : Live Website

The website : Property listings

The website : Property Details

The website : Article

The website : Developer Listings

The website : Developer Home

Challenges we faced

¨  Behavioral change of consumers

¨  Creating awareness of our website

¨  Communication

¨  Lack of experience

¨  Required Investment amount

Getting more close to People

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.

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.

Thank You

Use of Natural Language in Web Development

Shafkat Alam CTO

BlueScheme

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

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

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

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

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

Solutions & More Resources

•  The UX of Language by Alex Sexton •  http://alexsexton.com/blog/2012/03/the-ux-of-language/

•  Gettext (jed) •  ICU MessageFormat

Website Visitor’s Experience: Don’t Make Them Think!

Masrur Hannan UX Consultant & Co-Founder

Bonolota Designs

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.

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]

What is User Experience (UX)?

User Experience (UX) in daily life

What is User Experience Design?

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

User Experience (UX) Design objective

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 :)

Website Visitor’s Experience Design

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


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?


We don’t read pages. We scan them.


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!”


Designing the Home Page: 'conveying the big picture'. •  Site identity and mission

•  Site hierarchy

•  Search

•  Timely content

•  Deals

•  Shortcuts


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


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


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

Thanks! …

Sorry, perhaps NO time for Q&A? URLs: www.bonolota.com (coming soon)

www.fb.com/bonolotadesigns Email: [email protected] Masrur Hannan: [email protected] SlideShare: http://slideshare.net/mhannan Linked In: www.linkedin.com/in/masrurhannan

Thanks again, Masrur Hannan.

The Importance of User Interface Design &

its Measurable Impact on the Bottom Line

Saddam Azad Founder & CEO

DugDugi

UI/UX DESIGN AND ITS IMPACT ON

BUSINESS BOTTOM LINE

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.

Simple, yet effective

Appealing, instills a sense of curiosity

Solve a problem

OBAMA FOR AMERICA CAMPAIGN DONATIONS

•  A/B tes3ng of – Call to Ac3on – Contrast – Visibility – Focus

$200 MILLION IN ADDITIONAL REVENUE

Thank you.

Designing a Useful Site

Milon Chief Product Officer

G&R Ad Network

Muhammad Nazimuddaula •  Started career as an Animator

2003 •  Worked in Advertising for 2 years •  Working with websites since 2005

Drawings in 30 seconds

after adding some colors on

30 seconds drawings

good design is good plan

it starts with paper and pencil

(pen, photoshop etc also allowed)

its never too late to ‘do the right thing’

thanks J

People & Pixels: Managing Web Projects

Razin Mustafiz Product Manager

NewsCred

A Word from BlueScheme

Rameez Hoque CEO

BlueScheme

THANK YOU !!

Please follow us on Google+ & Facebook to keep up to date on our latest activities

How to Make a Good Website - 20th GBG Dhaka

Technology

Transcript of How to Make a Good Website - 20th GBG Dhaka