In week two we discussed how businesses can go about designing and implementing a website. We look at a website brief, choosing and CMS and website design.

1. Decoding Digital
Week Two: Design & Implementation
1www.symphony3.com

2. How to engage with us by webinar
We want you to get the most out of the program by asking questions, giving
your feedback, telling us your stories and participating in opinion polls.
• Questions box
• Polls
• Twitter
– We will be answering questions during the session on Twitter. Contact us directly at
@Symphony3Think and/or use the hashtag #DigitalVic
www.symphony3.com 2

3. LinkedIn Group
www.symphony3.com 3

4. Webinar Schedule
www.symphony3.com 4
Week 1: Developing a digital strategy (Tuesday 3rd Feb)
Hangout: LinkedIn (Thursday 5th)
Week 2: Design & implementation (Tuesday 10th Feb)
Hangout: Facebook (Thursday 12th Feb)
Week 3: Launching and marketing the business (Tuesday 17th Feb)
Hangout: Twitter (Thursday 19th Feb)
Week 4: Evaluation and continuous improvement (Tuesday 24th Feb)
Hangout: Google Analytics (Thursday 26th Feb)

5. Last Week
• We looked at Oz Crafters’ business model and how it may be affected by digital
• We completed a SWOT analysis and their point of difference
• We developed customer personas for two of the business’s key target markets
• We mapped out the customer journey for each of these personas
• We highlighted our digital weaknesses with the digital diagnostic
• We created a one page plan with the digital actions that need to take place in the
next 6 months:
– Develop a fully functional eCommerce website
– Build a search presence through SEO activities
– Take manual processes online to reduce costs
– Promote brand awareness with digital marketing techniques
www.symphony3.com 5

6. This Week
• This week we will focus on the design and implementation of a responsive,
eCommerce website for OzCrafters.
• Topics covered will include:
– Writing a website brief to outline the functional and design requirements (for internal use or
external use by a developer)
– Developing an online brand
– Choosing the most appropriate Content Management System for your business (CMS)
– The key features your website should include and key things to consider
– How to manage the design and development process
• We have create a live site for OzCrafters on Business Catalyst, which we will use
to show you how some of the functionality can be managed
www.symphony3.com 6

7. OzCrafters’ Finished Product
www.symphony3.com 7

8. The Website Brief
Things to include:
• Introduction/overview
– Provide an introduction to your business and the project – what is your vision?
• Business requirements
– What are the business outcomes your hoping to achieve by building this website? E.g. Online
sales, greater brand awareness, Ebook downloads?
• Target Market
– Who are the audiences you want to attract to the website? Use your customer personas
developed in week one.
• Design requirements
– Do you have an existing logo, colour palate, style guide?
– What do you envisage the website to look and feel like?
– Site layout and structure
www.symphony3.com 8

9. The Website Brief
• Functional Requirements (Functional Spec)
– What are the functional tasks the website needs to be able to complete?
– What CMS will the site be built on?
– Will the site require eCommerce?
– What actions will users need to complete? (Go back to your customer journeys!)
• Timeline
– When is the website due to launch?
– What are the key milestones on the lead up to launch?
www.symphony3.com 9

10. Project Plan
www.symphony3.com 10

11. Choosing an agency
Things to consider & look for:
• Understanding of your business requirements
• Use of software that is not proprietary
• Social proof
• The right fit of expertise for your business
• Cost
• Location
• Accountability & support
• ‘Have a beer’ test – is it someone you can partner with?
www.symphony3.com 11

12. Choosing an agency
www.symphony3.com 12

13. Creating a Sitemap
• A sitemap outlines the structure of your website
• One way to think of this will be to imagine the main menu navigation of your site
• Don’t over-complicate your site map, keep it simple where possible
• Try using post-it notes, and refine your site map until you have a structure that is
efficient and makes sense.
• Seek an independent opinion.
www.symphony3.com 13

14. Creating a site map
www.symphony3.com 14

15. Creating a site map
www.symphony3.com 15

16. Creating a sitemap – Card Sorting
www.symphony3.com 16
• https://www.youtube.com/watch?v=FTzHeYPB9c8

17. Developing a wireframe
• A wireframe maps the layout of your website home page
• Key things to consider for your home page include:
– Your logo (top left)
– Site navigation
– Search box
– Accessibility
– Contact button and/or phone number
– Large image/slider/video
– Social media integration
– Blog/News
– Key message/brand philosophy
– Product features
– Testimonials
www.symphony3.com 17

18. Wireframe
www.symphony3.com 18

19. Digital Wireframing
www.symphony3.com 19
• We think a whiteboard (or piece of paper) is a good starting point for developing
your wireframe
• However, some people prefer to develop their wireframes digitally.
• Mashable – 10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
• We have also used:
– Google Docs (Images)
– https://wireframe.cc/ (free)
– http://www.mockflow.com/ (paid)

20. Design & Usability Trends
• Design is constantly changing
• Expect your site to need an update at least every 3-4 years
Trends for 2015:
http://www.sitepoint.com/big-web-design-trends-for-2015/
www.symphony3.com 20

21. ‘Make it big’
http://bellroy.com/live-life-outside
www.symphony3.com 21

22. Flat Design & UI
www.symphony3.com 22

23. Tiles
www.symphony3.com 23

24. Map Integration
www.symphony3.com 24

25. Logos & Branding – Freelancing Tools
Design & Logos
• Fiverr https://www.fiverr.com/ (screengrab)
• Freelancer https://www.freelancer.com.au/
• 99 Designs http://99designs.com.au/
Templates
• BC Gurus https://www.bcgurus.com/templates
• Tribevita http://www.tribevita.com/
www.symphony3.com 25

26. Logos & Branding – Freelancing Tools
www.symphony3.com 26

27. Choosing a CMS
• You need to build your website on a content management system that matches
your needs and budget
• For small businesses the following systems are popular:
– >$2000 (Low cost/free): Wordpress, Wix, Weebly, Squarespace, Shopify, Big Commerce
– $3000 - $15,000: Adobe Business Catalyst, Wordpress, Magento, Joomla
– $15000+ For more complex sites: Sitecore, Drupal, DotNetNuke
• http://www.business.vic.gov.au/marketing-sales-and-online/online-business-and-
technology/setting-up-an-online-presence/questions-to-ask-my-web-developer
www.symphony3.com 27

28. Choosing a CMS
Each business is different
• Develop a functional spec for your business
• Trial various CMSs before buying
Should be self-managed:
• Editing of pages
• Ability to create forms
• Ability to sell products
• Blogs
Also consider non-technical issues
• Support community around the product
• Good support people and material?
• Can your provider become a trusted adviser to your business on digital?
www.symphony3.com 28

29. Choosing a CMS
www.symphony3.com 29

30. The Decision Matrix
http://bua-tools.com/decision_matrix/index.php
Use the decision matrix to select your
– CMS
– Developer/Designer/Agency
www.symphony3.com 30

31. Have your say
Tweet your questions with the hashtag: #DigitalVic
Tweet us at @Symphony3Think
Contact us at: https://www.facebook.com/Symphony3
Email us at: decodingdigital@symphony3.com
www.symphony3.com 31

32. Summary
• Map out your website requirements in a website brief
• Choose the right CMS – use the decision matrix
• Choose an agency that will be a strong partner
• Managing your website doesn’t have to be hard!
• Get your content structure right
www.symphony3.com 32

33. Google Hangout: Thursday 12:30pm
• The Google Hangout will take place 12:30pm this Thursday, February 12
• Ask your questions on
– Twitter using #DigitalVic
– Decoding Digital LinkedIn Group
– Email (at least one hour in advance): decodingdigital@symphony3.com
www.symphony3.com 33