Step for Planning a Website Design, Development & Build

Steps for Planning a Website A Case Study of Build of IAmInfusion.Com.Au

Tuesday, 19 November 13

Photo credits: Flickr - Jayel Aheram

What are we talking aboutThe steps, the process and mistakes


Photo credits: IAmInfusion.com.au

About MeStarted in 2006 and based in Sydney.


Photo credits: UltraLynx & PB Web Development

We Love JoomlaWho doesn’t!



Small teamMyself = Site architect and co-director, Martina = creative director and co-director


Photo credits: Flickr - notahipster

Lucky to have a growing teamIt’s awesome working with other passionates


Photo credits: Flickr - BamCorp

Why are we talking about thisIt’s awesome working with other passionates


Photo credits: Flickr - Rav560

In the past...Made mistakes, learnt the hard way


Photo credits: Flickr - salforduniversity

Are you a designer?What is this?


Photo credits: Flickr - gorbould

Lost weeks of productivityand lots of money


Photo credits: Flickr - rhysasplundh

Lets avoid these situationsLittle bit of planning goes a long way



Case study: IAmInfusion.com.auLittle bit of planning goes a long way



The dreamTwo years of product development...



The process... Well sort of a process...


Photo credits: Flickr - tolomea

5 Easy StepsLets get to it.



Get this rightIf the girl friend is happy then everything else is just fine


Photo credits: Flickr - wy_jackrabbit

1. Information gathering It’s a process, get as much information as possible


Photo credits: Flickr - puuikibeach

Check listGet everything you can


Design information gathering

✤ Business company philosophy / mission statement

✤ Logos

✤ Branding

✤ Corporate identities

✤ Target demographics

✤ Target market

✤ Target devices

✤ Similar sites (competition)

✤ Design Inspiration


Marketing & SEO planning

✤ Content strategy

✤ Email marketing

✤ Keywords

✤ Pay per click advertising

✤ Social media

✤ Offline marketing


Functionality and build

✤ Functional requirements

✤ Server bandwidth

✤ Administrator abilities

✤ Server resources (RAM, CPU, HDD space)

✤ Test cases

✤ User testing / UAT



2. WireframingSketch out your website, draft plans


Photo credits: Flickr - davidkjelkerud

Ability to communicateQuickly and easily


Photo credits: Flickr - Philip Taylor PT

Engages the clientClient involvement in planning phase


Photo credits: Balsqmiq.com

Tools: BalsamiqQuick and easy wireframes and drafts



Tools: iPad ver. for collaborationQuick and easy wireframes and drafts


Photo credits: Flickr - Tonx

Tools: Paper and pencilBest tool and easiest tool to use...


Photo credits: Flickr - ND

3. Site architectureQuick and easy wireframes and drafts


Photo credits: Flickr - cuppyuppycake

Type of contentProducts, blog articles, company information


Photo credits: PB Web Development

Card sortingGreat way to engage with the clients


Photo credits: Joomla.org

4. Know your extensionsInvestigate what you can use according to requirements


Photo credits: Joomla.org

Create a list of extensions you can useCheck those extensions, ratings, reviews, compatibility



5. Plan your buildMatch requirements with extensions



PrototypesEasy to build multiple Joomla sites with different extension solutions


Photo credits: Flickr - ronnyandre

Custom developmentWhen 7000+ extensions just doesn’t cut it



I Am Infusions requirementsFunctionality and limitations


I Am Infusions requirements

✤ Low cost

✤ Low resource usage,

✤ Flexible coupon code logic

✤ Inventory control

✤ Cheap payment options (PayPal)

✤ Fast implementation


I Am Infusions requirements

✤ Basically need everything

✤ With no budget

✤ Tea canisters to take over the office



Lots of teaBeing surrounded



ExecutionPutting it all into action



Test PrototypesUser testing on prototypes to determine issues


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



Results so farSince launch this year


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



What next?Plan the next stage



A website is never doneAlways more to do improve and grow



Start planning the next phasesAlways more to do improve and grow


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


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-useful-web-design-checklists-and-questionnaires/

✤ Comprehensive planning guide - http://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guide/

✤ Website planning & developing your website blue print -http://www.1stwebdesigner.com/design/part-1-website-planning-developing-your-website-blueprint/


http://fivepaths.com/resources/planning-website-project?gclid=CMLg7u-607oCFUyd4Aod0isA3g

http://fivepaths.com/resources/planning-website-project?gclid=CMLg7u-607oCFUyd4Aod0isA3g

http://www.smashingmagazine.com/2009/06/29/45-incredibly-useful-web-design-checklists-and-questionnaires/




http://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guide/




http://www.1stwebdesigner.com/design/part-1-website-planning-developing-your-website-blueprint/




Thanks everyone

✤ http://www.iaminfusion.com.au

✤ http://pbwebdev.com

✤ Twitter: @astroboysoup

✤ Oh I have a podcast: Joomla Beat Podcast - joomlabe.atEpisode 30 - 5 steps to planning a website - http://joomlabe.at/ep30


http://pbwebdev.com

http://pbwebdev.com

Date post:	28-Jan-2015
Category:	Technology
Upload:	peter-bui
View:	104 times
Download:	1 times

Step for Planning a Website Design, Development & Build

Technology