Step for Planning a Website Design, Development & Build

2,076 views

Published on

Case study of the design and build process of the IAmInfusion.com.au website presented at Harvard for the Joomla World Conference 2013.

This presentation looks at all the steps that you may take in regards to planning for a website project, website design or website development project.

Some of the steps covered in this presentation have been learnt over the years of making mistakes in the industry and learning the hard way.

Hopefully these steps will help you adapt, change and learn just how to plan for a website and avoid the mistakes that we have made in the past.

Presented by Peter Bui from PB Web Development

Published in: Technology, Business
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
2,076
On SlideShare
0
From Embeds
0
Number of Embeds
339
Actions
Shares
0
Downloads
161
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Step for Planning a Website Design, Development & Build

  1. 1. Steps for Planning a Website A Case Study of Build of IAmInfusion.Com.Au Tuesday, 19 November 13
  2. 2. What are we talking about The steps, the process and mistakes Photo credits: Flickr - Jayel Aheram Tuesday, 19 November 13
  3. 3. About Me Started in 2006 and based in Sydney. Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  4. 4. We Love Joomla Who doesn’t! Photo credits: UltraLynx & PB Web Development Tuesday, 19 November 13
  5. 5. Small team Myself = Site architect and co-director, Martina = creative director and co-director Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  6. 6. Lucky to have a growing team It’s awesome working with other passionates Photo credits: Flickr - notahipster Tuesday, 19 November 13
  7. 7. Why are we talking about this It’s awesome working with other passionates Photo credits: Flickr - BamCorp Tuesday, 19 November 13
  8. 8. In the past... Made mistakes, learnt the hard way Photo credits: Flickr - Rav560 Tuesday, 19 November 13
  9. 9. Are you a designer? What is this? Photo credits: Flickr - salforduniversity Tuesday, 19 November 13
  10. 10. Lost weeks of productivity and lots of money Photo credits: Flickr - gorbould Tuesday, 19 November 13
  11. 11. Lets avoid these situations Little bit of planning goes a long way Photo credits: Flickr - rhysasplundh Tuesday, 19 November 13
  12. 12. Case study: IAmInfusion.com.au Little bit of planning goes a long way Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  13. 13. The dream Two years of product development... Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  14. 14. The process... Well sort of a process... Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  15. 15. 5 Easy Steps Lets get to it. Photo credits: Flickr - tolomea Tuesday, 19 November 13
  16. 16. Get this right If the girl friend is happy then everything else is just fine Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  17. 17. 1. Information gathering It’s a process, get as much information as possible Photo credits: Flickr - wy_jackrabbit Tuesday, 19 November 13
  18. 18. Check list Get everything you can Photo credits: Flickr - puuikibeach Tuesday, 19 November 13
  19. 19. Design information gathering Target devices Similar sites (competition) ✤ ✤ Business company philosophy / mission statement ✤ ✤ ✤ Design Inspiration Logos ✤ Branding ✤ Corporate identities ✤ Target demographics ✤ Target market Tuesday, 19 November 13
  20. 20. Marketing & SEO planning ✤ Content strategy ✤ Email marketing ✤ Keywords ✤ Pay per click advertising ✤ Social media ✤ Offline marketing Tuesday, 19 November 13
  21. 21. Functionality and build ✤ Functional requirements ✤ Server bandwidth ✤ Administrator abilities ✤ Server resources (RAM, CPU, HDD space) ✤ Test cases ✤ User testing / UAT Tuesday, 19 November 13
  22. 22. 2. Wireframing Sketch out your website, draft plans Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  23. 23. Ability to communicate Quickly and easily Photo credits: Flickr - davidkjelkerud Tuesday, 19 November 13
  24. 24. Engages the client Client involvement in planning phase Photo credits: Flickr - Philip Taylor PT Tuesday, 19 November 13
  25. 25. Tools: Balsamiq Quick and easy wireframes and drafts Photo credits: Balsqmiq.com Tuesday, 19 November 13
  26. 26. Tools: iPad ver. for collaboration Quick and easy wireframes and drafts Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  27. 27. Tools: Paper and pencil Best tool and easiest tool to use... Photo credits: Flickr - Tonx Tuesday, 19 November 13
  28. 28. 3. Site architecture Quick and easy wireframes and drafts Photo credits: Flickr - ND Tuesday, 19 November 13
  29. 29. Type of content Products, blog articles, company information Photo credits: Flickr - cuppyuppycake Tuesday, 19 November 13
  30. 30. Card sorting Great way to engage with the clients Photo credits: PB Web Development Tuesday, 19 November 13
  31. 31. 4. Know your extensions Investigate what you can use according to requirements Photo credits: Joomla.org Tuesday, 19 November 13
  32. 32. Create a list of extensions you can use Check those extensions, ratings, reviews, compatibility Photo credits: Joomla.org Tuesday, 19 November 13
  33. 33. 5. Plan your build Match requirements with extensions Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  34. 34. Prototypes Easy to build multiple Joomla sites with different extension solutions Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  35. 35. Custom development When 7000+ extensions just doesn’t cut it Photo credits: Flickr - ronnyandre Tuesday, 19 November 13
  36. 36. I Am Infusions requirements Functionality and limitations Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  37. 37. I Am Infusions requirements ✤ Low cost ✤ Low resource usage, ✤ Flexible coupon code logic ✤ Inventory control ✤ Cheap payment options (PayPal) ✤ Fast implementation Tuesday, 19 November 13
  38. 38. I Am Infusions requirements ✤ Basically need everything ✤ With no budget ✤ Tea canisters to take over the office Tuesday, 19 November 13
  39. 39. Lots of tea Being surrounded Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  40. 40. Execution Putting it all into action Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  41. 41. Test Prototypes User testing on prototypes to determine issues Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  42. 42. Tested cart extensions ✤ Tested, MijoShop, VirtueMart, Magento and RedShop ✤ Martina tested out functionality and use ✤ Redshop didn’t missing functionality ✤ Virtuemart didn’t feel user friendly ✤ Magento to resource intensive ✤ Mijoshop fit the build Tuesday, 19 November 13
  43. 43. Results so far Since launch this year Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  44. 44. Current position ✤ Strong and growing online sales from offline event promotion ✤ Engagement with wholesalers around Australia and the world ✤ Strong fan base via Instragram / social media ✤ Growth of new product range Tuesday, 19 November 13
  45. 45. What next? Plan the next stage Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  46. 46. A website is never done Always more to do improve and grow Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  47. 47. Start planning the next phases Always more to do improve and grow Photo credits: IAmInfusion.com.au Tuesday, 19 November 13
  48. 48. Next for I Am Infusion ✤ Mobile / Responsive website ✤ Additional online payment options ✤ Usability changes and improvements ✤ More product and sales information ✤ Wholesaler and distributor database Tuesday, 19 November 13
  49. 49. Learning resources ✤ List of other resources ✤ Planning for a website project: http://fivepaths.com/resources/planning-website-project ✤ 45 useful checklists - http://www.smashingmagazine.com/2009/06/29/45-incredibly-usefulweb-design-checklists-and-questionnaires/ ✤ Comprehensive planning guide - http://www.smashingmagazine.com/2011/06/09/acomprehensive-website-planning-guide/ ✤ Website planning & developing your website blue print -http://www.1stwebdesigner.com/ design/part-1-website-planning-developing-your-website-blueprint/ Tuesday, 19 November 13
  50. 50. Thanks everyone ✤ http://www.iaminfusion.com.au ✤ http://pbwebdev.com ✤ Twitter: @astroboysoup ✤ Oh I have a podcast: Joomla Beat Podcast - joomlabe.at Episode 30 - 5 steps to planning a website - http://joomlabe.at/ep30 Tuesday, 19 November 13

×