back

System plan

Name: Judi Wilkinson
Student Number: 81299888

Introduction

Attitude to Burn is a growing personal training and outdoor fitness training business based in the Northern Suburbs of Wollongong. The business has recently changed ownership and is being re-branded as a result. The business website is currently under utilised and out-of-date, with the owner opting instead to conduct most communication via email or Facebook. The goal of this project is to create a fresh new site with revitalised content, design and new interactive elements which will assist in communicating with existing clients and draw new business through improved SEO.

Project scope

The scope of this project will involve creation of;

A Q&A or forum discussion tool has also been identified as a potential site feature but is currently out of scope for this initial project.

Target audience

Given the localised nature of this business, the target audience is within the geographical region of the Northern Illawarra local government region. With a range of training options offered by this business, the demographics of potential site users is broad and includes;

The user profiles below focus on four of the most typical potential client types and site users.

User profiles

Sarah - committed to a goal

sarah picture

Reason for visiting the site: Sarah is interested in gaining entry to the fire service and will be required to pass a rigorous fitness test. She is looking for some group fitness classes to keep her motivated, as well as individual personal training tailored to meet her specific fitness goals.

Use scenario: After a quick view of the site, Sarah has found group classes that are nearby and at a convenient time before and after work. She is able see group class costs on the site but wishes to discuss her particular plans and perhaps negotiate a three month PT plan. She completes an online contact form.


Leonie - wants to make friends

leonie picture

Reason for visiting the site: With her two children both in primary school, Leonie has a bit of time to focus on herself. She would like to lose a few kilos, improve her fitness and make some friends. Her goal is to be able to run the 3km course in the Sydney Running Festival in 6 months time with her kids.

Use scenario: Group classes during school hours are a priority for Leonie who has been able to find these on the timetable. She has also noticed special kids training programs in the school holidays and that the Facebook feed shows they are an actively social group. She decides to call the trainer.


Steve - needs motivation to run

steve picture

Reason for visiting the site: Steve would like to support his wife Leonie in her goals to lose weight and get fit. He has good strength fitness but wishes to improve his cardio fitness, specifically his running ability. He is looking to join a running group and compete in the Sydney Running Festival half marathon.

Use scenario: The Wednesday and Saturday running group training are of interest to Steve. He has asked his wife Leonie to call the trainer on his behalf. He has also signed in to look at the design a workout tool and hopes to try a few workouts that focus on cardio and running before his first running group class.


Helen - health scare & needs help

helen

Reason for visiting the site: At 53 Helen has recently had a major health scare and has been advised that she needs to lose 15 kilograms. She is extremely hesitant to join an exercise group as she is embarrassed that she won't be able to do the exercises or that everyone else will be much fitter than she is. She is interested in some exercises to do at home, and some motivation from a caring personal trainer.

Use scenario: The at home workouts on the site are a key attraction for Helen. She'd like to try some of these before she contacts the trainer to discuss her situation - just to be certain she is capable of the exercises. She checks the trainers are fully qualified to work with older clients as she does not want to be injured. She is also interested in the images on the Facebook feed as they show women of all ages and sizes in the classes.


Information architecture sitemap

Sitemap explained

As the site is primarily a single page design, the sitemap has been presented in a vertical rather than the traditional horizontal hierarchical style design.

The orange 'sticky menu' is available from any page on the site and will include links to all of the major page divisions in the single page design (introduction, timetable, location, pricing etc). Likewise the 'Contact us' link will stick to each page and enable a pop-up form when selected.

Content linked to the training options section (group training, personal training, special event) will be also appear in a small pop-up window that temporarily overlays original content when selected. An example is shown in the screen shots below.

Content to the right of the diagram (member login, sign up, workout design etc) is primarly contained in dynamic forms connecting with a database.

Screen shot examples

Screenshot example - main single page design

Screen shot example - 'more information' pop-up window

Wireframes

Mobile wireframe

mobile

Tablet wireframe

tablet_mini

Full screen wireframe

screen

Design a workout form

workout form

Custom workout - html page generated from design a workout form

custom workout

Sign in or sign up form

sign in form

Contact form

contact us form

Technologies

The majority of work for this project will involve client side development to produce:

In addition a small amount of server side development is required to produce:

A full discussion on technology choices has been provided in the separate Technology Analysis documentation.

System architecture

The folllowing diagram demonstrates the relationship between technologies that will be deployed to complete this project, and their location in the overall website system architecture.

 

Site build schedule

Task description

Deliver by

Minimum viable product

Complete scope

System plan & database design

29 April

  • Personas
  • Wireframes
  • Architecture
  • Database table structure draft

Finalise design & commence build

6 May

  • Responsive framework design
  • HTML pages & forms
  • Theme developed for Wordpress

Complete build - HTML & CSS

13 May

  • HTML content pages
  • Contact forms
  • Links
  • Pop-ups
  • Sticky menu
  • Sticky contact button

Include interactive elements - JavaScript & jQuery

20 May

  • Google maps
  • Facebook feed (plug in)
  • Calendar tool
  • Facebook feed (coded)
  • SEO tools
  • Analytics

Database connections & testing - PHP & MySQL

27 May

  • DB insert data scripts
  • DB query & retrieve data scripts

Final tweaks & validation

3 June

  • Validation HTML5
  • Validation CSS3

Project delivery

10 June

  • Basic website
  • JS interactive elements
  • Forms submitting to DB
  • Dynamic website
  • Managed in WordPress
  • CSS3 interactive elements
  • SEO & analytics
  • Forms query & output from DB

References

Brown, D. 2010, Communicating Design: Developing Web Site Documentation for Design and Planning, 2nd edn, Peachpit, San Francisco, USA.

U.S. Department of Health & Human Services 2014, What & Why of Usability - Personas, Washington DC, USA, viewed 30 April 2014 <http://www.usability.gov/how-to-and-tools/methods/personas.html >

Balsamiq Studios, LLC, 2014, Balsamic. Rapid, effective and fun wireframing software, Sacramento, USA, viewed 23 April 2014 <http://balsamiq.com/ >

Gliffy, Inc (US), 2014, Online Diagram Software and Flowchart Software - Gliffy, San Francisco, USA, viewed 23 April 2014 <https://www.gliffy.com >