Design Proposal
##Table of Contents
- Response to Brief
- Proposed solution
- Technical
- Prototype
- Work Breakdown
- Total Costs for Development Labour
- Risk Analysis
- Reference
##Response to Brief
###Client Brief (Requirements)
Our Client Locatrix requires us to design a Tabata exercise application for IOS.. The main goal of the application is to serve as a timer for Tabata training. Tabata is a high intensity workout that targets both aerobic and anaerobic systems. It entails a short time of hard workout and rest periods. Usually Tabata training lasts between 4 to 20 minutes with 20 seconds workout and 10 second rest intervals.
For main goals the Client wants the user to specify the exercise and rest intervals as well as the amount of cycles. This information also needs to be displayed in an efficient and aesthetically pleasing way. Whilst the app is running it should also use audio feedback to let the user know when to switch between rest and exercise intervals.
For additional goals the client wants the app to each gps tracking for each activity specifying and adding different activities. The app must also sync activities with a server using facebook log in to log on. Activities and historic data must be displayed in a graph format. There could also be a iPad app getting data from the server only showcasing graphs and statistics.
###Main Goals
- Allow the user to choose work/rest intervals.
- Display the work/rest cycle to the user.
- Play audio feedback when changing between work/rest cycles.
- Additional goals
- Add GPS tracking for each activity.
- Add activity tracking.
- Sync these activities with a server.
- Facebook login to allow activity syncing.
- Graphs and statistics for all activities. A universal app with all the stats/graphs visible on the iPad, but no activity tracking.
##Proposed solution
###General description
The client was very specific on the platform he wanted us to work on. So we are going to design and implement the app on IOS to be used for iPhones. Thus we will seek inspiration and adhere to common design standards used by other IOS applications. Some of these design standards include:
- How an element should look to be easily identified and used by the user.
- Placing and position of elements.
- Colour schemes and combinations to provide an aesthetic experience to the user.
- Designing elements keeping user input in mind ( swiping, tapping and other gestures).
- Designing elements to keep screen size in mind.
- Animations and Sound to improve user experience.
- Keeping in mind the constraints of IOS and the policies of Apple.
- Keeping in mind hardware constraints as well as making the app as efficient as possible.
First of all the app needs to serve its main purpose as effectively as possible. We believe that functionality and design is equally important. Effective design communicates information to the user in an aesthetic and meaningful way. Functionality is equally as important as without the app would serve no purpose. Our app will get user input on the exercise as well as rest time and the amount of intervals. When the timer starts a countdown begins, after a 10 second countdown it will alert the user through the use of visual elements as well as sound that exercise time starts. After exercise time is completed the user is alerted again and rest time starts. This cycle of exercise and rest time will continue the amount of times specified by the user.
If there is time left we will look at some advance features that we want to implement including a database that syncs the users exercise history. We will also consider syncing that data to a facebook login so that the user can access his data on a range of devices. We also want to add additional small features like saving favourite exercise settings and notifications to remind the user ie. when he/she has not exercised after a 3 day period.
Above is a brief explanation refer to the bottom annotations for a detailed discussion of the interface and technical functionality.
##Technical
We will be designing the App using Apple’s app IDE called XCode. In Xcode we are primarily be using HTML5 and Swift programming languages. For server based storage we have not decided completely, but we are strongly considering a MySql server.
To showcase and motivate that we can and should use these languages as well that it is possible we implemented some functionality already. Keep in mind that the interface is minimalistic in the implementation at the moment. Refer to the interface and design subsection for our initial interface designs
##Prototype
###Implementation
At this stage of the project, our team created a prototype, which had implemented limited functionalities from the actual objectives. The new features will be added and code will be optimized in future as the team moving on to a next stage of the project.
Currently, the prototype has a splash screen with a logo and the name of the App (Fig. 1). As it is called splash screen, it appears only when the App is launched and stays on a screen until the app is fully loaded.
Fig. 1 Splash Screen of the prototype
Once the App is fully loaded the main screen appears (Fig 2). On the main controller screen, three major components exists so far: UIButton, UIDatePicker and ProgressBar. UIButton [1] and UIDatePicker [2] are built-in classes provided on Xcode IDE. Besides two users interfaces, there is a gray circular bar surrounding UIDatePicker. This is CircleProgressView provided by Cardinal Solutions as an open source API on Github [3].
A user can pick a time using DatePicker user interface in a counting down timer mode. Then, if the start button is pressed, counting down starts with a selected time. The progress bar will be filled as the timer gets close to zero (Fig. 3). A time label is also a built-in user interface on Xcode [4].
Fig 2 The main controller screen of the prototype.
Fig. 3 A state of the timer after it is started
###Bugs
Currently, there are few bugs in the implementation. Since the start button exists all the time, if a user presses the button multiple times, it creates multiple counting down timers (Fig. 4).
Moreover, when the timer reaches zero, it re-creates DatePicker again. However, it will be re-created on the top-left corner of the screen, instead of center of the progress bar (Fig. 5).
Fig. 4 Multiple labels Bug
Fig. 5 Wrong Position DatePicker Re-creation Bug
##Interface and design
###1st Design
Description
This design has a consistent form shape of circles in flat and two dimensional as shown in (Fig. 6). The size of the timer is larger than the set size of circles because timer is the main feature of the application. As for secondary feature which is the eight circles of set and the number inside the circles is to indicate which set is the user working on currently. The eight circles are divided into two horizontal lines which makes it equal weight on each sides and this maintain the balance of the whole design. In addition, this design has a whole screen as the button where one tap on the screen to pause the timer and double tap on the screen to reset the timer. The primary colors of this design is yellow, green and red. Yellow color is to indicate that it is in preparation state. Green color is to indicate that it is in working state and for red color is to indicate that it is in rest period. (Fig. 7)
Fig. 6 Sketch of Design 1 Fig. 7 Digital Mock-up based on Sketch of Design 1
###2nd Design
Description
This design is basically similar to the 1st Design, the only difference of the design is the working set design which change into a bigger circle from eight same size circles. This design has two constant form shape of circles in flat and two dimensional as shown in (Fig. 8). The size of the timer is a little bigger than the set size of circle because timer is the main feature of the application. The secondary feature changes from 8 small circles into a big circle in order not to confuse the user. The number inside the circle will change based on which set user is working on. In addition, this design has a whole screen as the button where one tap on the screen to pause the timer and double tap on the screen to reset the timer. The primary colors of this design is yellow, green and red. Yellow color is to indicate that it is in preparation state. Green color is to indicate that it is in working state and for red color is to indicate that it is in rest period. The colors is applied on the set circle as well (Fig. 9)
Fig. 8 Sketch of Design 2
Fig. 9 Digital Mock-up based on Design 2
###3rd Design
Description
This design focuses more on the visual aspects and is more stylish and colourful and the other two designs. The animations of this design serves as a visual indicator for how many sets are left. (Fig. 10)
Fig. 10 Digital Mock-up Design 3
Problem
While using tabata timers for workout, the users will not be holding the devices in their hands, it will either be placed on the floor/table tops nearby. Users are at a further distance from their devices than they usually are, making some elements difficult to be seen. It was also observed that it is difficult to select buttons on the screen of the device while the user is working out ( for example : think of a person stretching his hand forward to reach the device resting on the table-top to select Start or Pause ). Difficult to distinguish between resting and work periods.
Solution
Make the numbers/icons large so it can be seen easily from a distance. whole screen as a button ( stop/start/reset just by tapping anywhere on the screen ). standard tabata colours ( red, yellow, green ). This is a basic minimalist design which follow the current design of built-in iOS applications. Our key concepts here are:
- large numbers/icons ( makes it easier to see from a distance )
- whole screen as a button ( stop/start/reset just by tapping anywhere on the screen )
- standard tabata colours ( red, yellow, green )
This design is meant to make the application as easy to use as possible. All three core concepts to improve user experience is applied in this design
Database outline
So far the currently proposed product would require three tables in its database: one to keep track of the user’s details, one to remember favourite exercise settings of that user, and one to keep a log of the dates and length the user has spent doing that exercise.
##Work Breakdown and Development Costs
###Roles & Task Distribution
| Role | Task | Cost per hour | Cost per week | Cost per annum |
|---|---|---|---|---|
| Scrum Master | Ensures everyone finishes the task assigned and protects them from distractions | $43.45 | $1,651.17 | $85,860 |
| Back-end Programmer | Programs server software that records user’s exercise history | $44.08 | $1,674.90 | $87,095 |
| iOS Programmer | Programs the app on iOS platform | $30.47 | $1,157.79 | $60,205 |
| iOS Programmer #2 | Programs the app on iOS platform | $30.47 | $1,157.79 | $60,205 |
| Graphic Designer | Designs the user interface and how data is presented | $24.60 | $934.62 | $48,600 |
| Graphic Designer #2 | Designs the user interface and how data is presented | $24.60 | $934.62 | $48,600 |
##Methodology
We have adopted the agile method to manage this project which allows frequent feedback from our customer and therefore minimise error in interpreting the project’s requirements. We followed the basic structure of an agile project framework called the scrum method; in that there is a scrum master who manages a scrum board detailing tasks, assigned person and current status of tasks. The project is divided into a number of 3-week long sprints with immediate goals in each sprint. The first three sprints would be dedicated into developing a prototype as well as the design document of the final product.
With regards to the prototype, we have selected a few core features to develop and also focused on the design of the interface as our client demanded for ‘slick’ and ‘polished’ design. The speed which we have been developing the prototype at is used to forecast the cost of development of the final product and time required to deliver the product to the market.
The aforementioned core features are as follows:
- Allow the user to choose work/rest intervals.
- Display the work/rest cycle to the user.
- Play audio feedback when changing between work/rest cycles.
- Add activity tracking.
- Sync these activities with a server
##Work Breakdown ###Sprint 0
| Task | Assigned Person | Expected Duration |
|---|---|---|
| Design Logo | Graphic Designer #1 | 2 hours |
| Early sketches of main screen | Graphic Designer #1 | 3 hours |
| Digital mock-ups based on sketches | Graphic Designer #2 | 4 hours |
| Write basic code of iOS app | iOS Programmer #1 | 2 hours |
| Build Timer | iOS Programmer #2 | 2 hours |
| Write Quote | All team members | 10 hours |
###Sprint 1
| Task | Assigned Person | Expected Duration |
|---|---|---|
| Improve sketches and mock-ups based on client’s feedback | Graphic Designers #1, Graphic Designers #2 | 3 hours |
| Sketch other screens based on agreed design language | Graphic Designers #1, Graphic Designers #2 | 5 hours |
| Set work/rest intervals | iOS Programmer #1 | 3 hours |
| Add Audio Feedback | iOS Programmer #1 | 1 hour |
| Display work/rest cycle | iOS Programmer #1 | 3 hours |
| Design and setup server database | Backend Programmer | 10 hours |
| Main screen graphic programming with animations | iOS Programmer #2 | 6 hours |
| Usability testing #1,Graphic Designer #2, | iOS Programmer #2 | 2 hours |
###Sprint 2
| Task | Assigned Person | Expected Duration |
|---|---|---|
| Draw digital mock-ups of the rest of the screens | Graphic Designers #1, Graphic Designers #2 | 10 hours |
| Write server-side software which will record user activities | Backend programmer | 18 hours |
| Write server APIs | iOS Programmer #1 | 8 hours |
| Ability to record user activities to server | iOS Programmer #1, iOS Programmer #2 | 5 hours |
| Usability testing #2 with external users | iOS Programmer #1, iOS Programmer #2, Graphic Designers #1, Graphic Designers #2 | 4 hours |
| Write Final Design Document | All team members | 18 hours |
###Sprint 3
| Task | Assigned Person | Expected Duration |
|---|---|---|
| Start writing unit tests | iOS Programmer #1, iOS Programmer #2, Backend Programmer | 10 hours |
| Draw graphic elements to be used in app | Graphic Designers #1, Graphic Designers #2 | 12 hours |
| Tidy up prototype code for real development with proper comments included | iOS Programmer #1, iOS Programmer #2 | 4 hours |
| Add GPS Tracking | iOS Programmer #2 | 5 hours |
| Facebook Login | iOS Programmer #2 | 5 hours |
###Sprint 4
| Task | Assigned Person | Expected Duration |
|---|---|---|
| Graph and Statistics in app | iOS Programmer #1, iOS Programmer #2 | 10 hours |
| Animations mock-up in HTML and Javascript | Graphic Designers #1, Graphic Designers #2 | 12 hours |
| Graphics programming in app | iOS Programmer #1, iOS Programmer #2 | 6 hours |
| Security Test | Backend programmer | 7 hours |
| Overall Internal Testing #1 | iOS Programmer (x2), Backend programmer | 2 hours |
| Usability testing #3 with external users | iOS Programmer (x2), Graphic Designers #1,Graphic Designers #2 | 4 hours |
###Sprint 5
| Task | Assigned Person | Expected Duration |
|---|---|---|
| Graphics programming in app | iOS Programmer #1, iOS Programmer #2 | 6 hours |
| Security Test | Backend programmer | 4 hours |
| Overall Internal Testing #2 | iOS Programmer #1, iOS Programmer #2, Backend Programmer | 2 hours |
| Write Documentation | All team members | 18 hours |
##Total Costs for Development Labour
| Role | Total hours | Costs |
|---|---|---|
| Scrum Master | 119 | $5,170.55 |
| Graphic Designer #1 | 101 | $2,484.60 |
| Graphic Designer #2 | 102 | $2,509.20 |
| iOS Designer #1 | 116 | $3,534.52 |
| iOS Designer #2 | 119 | $3,625.93 |
| Backend Programmer | 99 | $4363.92 |
| Total: $21,688.72 |
###Supplementary Costs
| Categories | Costs |
|---|---|
Hardwares
|
|
Software requirements
|
|
Development
|
|
Marketing
|
|
App Maintenance
|
|
##Risk Analysis
##Reference
[1] Apple Inc (2013 Sept.). UIButton [Online] Available: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIButton_Class/
[2] Apple Inc (2010 Oct.). UIDatePicker [Online] Available: https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIDatePicker_Class/index.html
[3] Cardinal Solutions (2014 Oct.). iOS CircleProgressView Control [Online] Available: http://www.cardinalsolutions.com/blog/2014/10/ios_circleprogressvi
[4] Apple Inc (2015 Mar.). UILabel [Online] Available: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/
[5] Payscale. ‘Researching a job that is not my own’. Payscale.com, 2015.[Online] Available:http://www.payscale.com/