Summary Report

Gourmet Fuel


MSc Negotiated Learning
Research Practicum Summer 2014














Start time: 23th May 2014
Major change: 30 July 2014
End time: 22th August 2014
Team member:
Dongyun Nie
Jiedong Ding
Qishan Yang
Wei Wang
Catalog
About Our Team............................................................................................................... 1

About Our Sponsor .......................................................................................................... 2

Project Target ................................................................................................................... 2

Sponsor Meeting & Requirement ................................................................................. 4

Road Map of This Project: .............................................................................................. 5

User Interview .................................................................................................................. 6
Interview Questions ............................................................................................................................................. 6
People We Have Interviewed ............................................................................................................................. 7

Website Prototype Design& User Feedback ............................................................. 10
Prototype Initialization( Version I ): ............................................................................................................... 10
Prototype Version II VS Refined Prototype: Version III .............................................................................. 13

How We Work Together ............................................................................................... 19

The Website We Have Build (Till end of July) ........................................................... 21

Major Changes ............................................................................................................... 26

New Life ........................................................................................................................... 28

Launch Event ................................................................................................................ 32



1

About Our Team


Figure: P1_1

Personal skills(left to right):
Wei Wang: iOS/Android, J2SE, MySQL/Oracle, HTML
Qishan Yang: IOS, Android, Java, SQL, PHP
Dongyun Nie: HTML, CSSSQL, Java
Jiedong Ding: PHP, iOS/Android, MySQL
Personal interest:
Wei Wang: Mobile application developing
Qishan Yang: iOS, PHP
Dongyun Nie: Web front-end design
Jiedong Ding: PHP, iOS/Android, PM
2

About Our Sponsor


Gourmet Fuel Products and Services
Body | Nutrition | Lifestyle
GourmetFuel provides a series of ready-to-eat meal packages through its
FuelMatrix with durations varying from 1 to 12 weeks.
True health requires looking after your Body. Get body fuel from good Nutrition
continuously, you will enjoy the ideal healthy Lifestyle.
The packages include two snack options, breakfast, lunch, dinner and
supplementary meal options, juices, water and other ancillary products. All
products are sold as a combined daily package.


Project Target


To build an online shopping and service website for Gourmet Fuel company. In
this platform, Gourmet Fuel will provide an e-Commerce website to customers.
They can buy meals directly or buy a food package in advance. It also provides
customised services, which allows people build personal food and sport plans
according to their basic information (i.e. height, weight, age, gender, activity level
etc..). The mian function of this system can be divided into 8 parts, which have
been listed below.

1. Register Account and User
Users need to register their account and personal information in a secure
environment. After users fill in their information, the system will calculate a menu
programme and healthy suggestion for them.


3

2. Choose Meals
Users will get a pre-population menu programme for weeks after registering.
They can change a meal, cancel a meal in the programme along with the daily
menu information comparing with the healthy suggestion they get.

3. Submit Programme
After users choose the meals they will have for the week or weeks, they can
submit the programme for paying.

4. Payment
They can choose to pay the whole programme (normally will have discount by
length) or pay by every delivery (fee calculate in Payment Requirement Section)

5. Manage Account and User
Users can change, reset their passwords and modify theirs users information or
add another user.

6. Manage Address Book
Users can change or add address

7. Manage Programme
Users can see the list of the programme they have submitted and go into
programme page to change or cancel the meal which is not been prepared for
delivery later.

8. Check Payment History
Users can check all the payment history.






4

Sponsor Meeting & Requirement


Gourmet Fuel will give
customer fresh food which
contains all nutrition that
body needs to acheive a
healthy lifestyle.
There will be customized
food plan for specific
customer (diet, losing weight,
gaining muscle, maintain).
There will be a special
system to help athletes to
build their customized food programme.
Target user groups (two main parts): general individual (hope to involve all
age range of customers) and professional athlete (nutritionists to give them
advice).
Website gets priority.
Meals must conform to given standards of calories, protein, carbohydrate,
fat, and micro nutrition etc.
Build user profiles like food facebook allowing users to share information
and form a healthy social network.
Users can give authority to admins to track or edit profiles of them.
Provide programs with different periods (1 week, 3 weeks, 2 months, etc.)
Fitness programs with different purpose (endurance / power)
Bar code is applied to track delivery info
Build customers plan by their age, gender, height, weight, exercise time /
intensity
Mobile Monitoring App (FuelGage) + Food Info System (FuelMatrix)
App should provide functions as reminders and monitors (remind to
hydrate, monitor sleep).
Figure: P4_1
5

Give comparison on monitor results with/without using Gourmet Fuel to
show effects of our food.
At moment, there is only one delivery centre, add delivery centres table
into database would be discussed in order for future requirement.
The preferential foods of customers should be saved in database in order to
recommend foods and save time.
The preferential foods tend to be dishes rather than ingredients.
Pay some attention on ERP system.

Road Map of This Project:


Figure: P5_1

Figure: P5_2
6


Figure: P5_3

User Interview


We have interviewed wide range of people. They have a variety of age, which is
from primary school students to middle aged people who also have different
careers. The main interview questions and notes are demonstrated below.

Interview Questions
1. Are you a gym guy?
3. Do you exercise at home?
2. How often do you go to gym?
4. What is your purpose for exercise?
5. What is your diet schedule for your exercise plan?
6. Could you tell me about the details about your diet, such as protein, fat,
carbohydrate and calories?
7

7. Could you want to learn about your meals?

8. If you want to start fitting, which one is more important for you, diet or
exercise?
9. Have you ever tried any web service for nutrition and fitness?
10. Have you ever tried any mobile app that monitors your body situation and
exercise plan?
What are the main features the services brought to you?
What are the weaknesses of the services?
11. What do you want to know from our fitness & nutrition web service?
12. Which kind of service would you prefer, fixed meal plans or meal
recommendations that allow you to choose?
13. What key information should the app monitor?
14. If there is a web service for fitness & nutrition, imagine how would you use
it, and what functionalities would you expect for?

People We Have Interviewed
Name: Lorenzo Barbera
Job: Model, Office staff
What he like: body sculpt
Important points: Food ingredient,
Exercise monitoring
Exercise Time:
Go to gym 4 times per week.
Play football 2 hours/week.
Exercise Purpose: Too much protein
Flexible Plans

Figure: P6_1
8

Name:Chenqian Zhu
Student at University of St Andrews, UK
22 Years Old
She registers gym membership and wants to
lose weight and have some abdominal
muscle.
Reason: she want to go to gym is that she
want to eat more tasty food so she need to
do more exercise to increase consumption of
calorie.
She will motivate herself by buying
something
She likes after she achieves weekly or monthly goals.
She is very interested in the service which can provide healthy food with detailed
nutrition information


Name:Colm Harmon
student, 22 years old
He really care about performance
Defender of a foot team
Pay attention to the input and output calorie
Exercise 4 times per week
Purpose:
Maintain high performance
Endurance training
Power training
Preferred Service:
Can help him to gain high performance
Monitor daily calorie
For food: which really does work, no
matter its delicious or not
Monitor heart rate which effect performance
Nutrition detail of food provided by company

Figure: P6_2
Figure: P6_3
9


Figure: P6_4 Figure: P6_5

Name: Joao
Student of UCD
What he like:
To exercise at gym
To know calories of intake
Gym guy avoids junk foods
Care nutrition of food
Exercise 1.5 hours a day, but
depends on the weather
Purpose: to keep health and fit
Preferred Service:
It will be better to provide
percentage of different kinds of
materials in each meal, the sample
of pie chart is displayed above
Prefers to have a food and
exercise plan
Name: Shane McGarry
Student, Internship staff
What he like:
He is a gym guy, exercise at gym
Protein like egg:
Eats enough food, has no idea of
how much should to eat
Dislike vegetable, because of less
protein in it
Wants to get bigger tends to get
more muscles
Purpose: to gain weight and muscles
Preferred Service:
It will be better to have diagram or
function to summaries the current

10


Name: Stephanie Pratt
Job: Staff of a company
Exercise at home (not planned)
Delicious food
Scheduled plan made for her
Focuses on food ingredients
Does not care about
Protein, fat and carbohydrate
Lack of motivation to follow
exercise & meal plans
Once a week exercise
Figure: P6_6 Purpose: Lose weight
Preferred Service:
Fixed plan - prefer well-designed professional plan
Better to provide input and output calories for daily life
Mobile App - monitors sleep patterns and nutrition intake

Website Prototype Design& User Feedback


Following protptypes are important versions in this project development. Each
version attach with its user testing.
Note: If picture size too small for view, please zoom+ document.

Prototype Initialization( Version I ):
Depends on user interview, each team member designed their own prototype.
After discussing and user testing prototype Version I comes out.

Guide Page (Figure: P7_VerI_1)
Register Page (Figure: P7_VerI_2)
11


Figure: P7_VerI_1 Figure: P7_VerI_2

Home Page(Figure: P7_VerI_3)

Figure: P7_VerI_3

12

More view category in detail
View by Week (Figure: P7_VerI_4)
View by Date (Figure: P7_VerI_5)
View by Meal (Figure: P7_VerI_6)


Figure: P7_VerI_4 Figure: P7_VerI_5


Figure: P7_VerI_6

Main advantages and disadvantages of user feedback on Version I:
Advantage (+):
Easy to edit for a long term
Connect meal into calendar
Easy to connect with fitness
Convenience if user dont mind what food to have
13

Easy to pause one meal or one days program if users have their plan on
that day.
Easy to show the menu of whole week.
Dont have to choose every meal for each day, a pre-population will show
up.

Disadvantage (-):
Nutrition detail not clear
Fill confuse without tutor
Ordered meal detail cant direct viewed
Not attractive
There be too much information in this table.
Not direct to change meal.


Prototype Version II VS Refined Prototype: Version III
Home page
vs
Figure: P7_VerII_1 Figure: P7_VerIII_1

Register concept
Register step 1(Figure: P7_VerII_2 VS Figure: P7_VerIII_2 ): Fill user
information.
14

Register step 2(Figure: P7_VerII_3 VS Figure: P7_VerIII_3): Customer food
reference.
Register step 3(Figure: P7_VerII_4 VS Figure: P7_VerIII_4): Goal weight of
user.
Register step 4(Figure: P7_VerII_5 VS Figure: P7_VerIII_5): Activity level of
customer.
vs
Figure: P7_VerII_2 Figure: P7_VerIII_2
vs
Figure: P7_VerII_3 Figure: P7_VerIII_3

vs
Figure: P7_VerII_4 Figure: P7_VerIII_4
15

vs
Figure: P7_VerII_5 Figure: P7_VerIII_5

Programme page (Figure: P7_VerII_6): After register process, our system will give
recommend of customized programme to user.

Figure: P7_VerII_6

Payment page (Figure: P7_VerII_7 VS Figure: P7_VerIII_7)
Shown when success (Figure: P7_VerII_8)
If unsuccessful (Figure: P7_VerII_9)
vs
Figure: P7_VerII_7 Figure: P7_VerIII_6

16


Figure: P7_VerII_8 Figure: P7_VerII_9

Setting Page:
Setting in general (Figure: P7_VerII_10)
Setting in users (Figure: P7_VerII_11)
Setting in programme (Figure: P7_VerII_12)
Setting in address(Figure: P7_VerII_13)
Setting in payment(Figure: P7_VerII_14)

Figure: P7_VerII_10 Figure: P7_VerII_11


Figure: P7_VerII_12 Figure: P7_VerII_13

17


Figure: P7_VerII_14

Instead of one account manage multiple users, customer could control several
users through their account in setting page of Version II, which is sponsors
requirement. Version III is design for one account one user. Because through our
user testing, 70% of general user will use account just for their own. Use user
dashboard will more close to design for minimum input, maximum out put.
Prototype Version III refined prototype with photos, make it more functional.

Programme page (Figure: P7_VerIII_7): Programme page come after register steps
finished. User need to choose their programme length and delivery address here.
Dashboard is looks quit similar of programme page (Figure: P7_VerIII_8), it is
summary of user programme. User could change their information at dashboard,
same like Version IIs setting page. Dashbord will monitor users weight, help user
to approach their goal weight.
18


Figure: P7_VerIII_7 Figure: P7_VerIII_8

19

Main advantages and disadvantages of user feedback on Version II AND Version III:
Advantage (+):
The website looks very attractive
Icons are very cute
Easy to fellow the instruction
Personal info page design looks simple and user-friendly
Price bundles sounds reasonable as well
Dashbord looks clear and reasonable
Website is smooth enough

Disadvantage (-):
No choice for people who dont have any food reference
Feel doubt about if the product useful or not
Every body wants eat healthy, useless question
No explain how the meal will be delivered and served, how the whole
system works
Please be honest" feels like indicating that customers might lie.
Need more attractive and trustworthy aspect.
Worried about payment security

How We Work Together


Team Role:
Wei Wang
Program manager: Built timetable for team, assign tasks for each teammate.
Front-end designer: Responsible Develope UI with Dongyun Nie.

Qishan Yang
Database designer: Responsible for database design and back-end develop
with Jiedong Ding.
Technology provider
20

Help design front-end during first few weeks, when back-end do not has
many work to do.

Dongyun Nie
Project manager,
assign deadline for
each task.
Graphic designer:
Responsible for UI
design with Wang Wei,
embellish UI.
Meeting promoter
Responsible person to get feedback from user and sponsor

Jiedong Ding
Course leader: Guide the process of project, set meeting with sponsor, get
feedback from sponsor.
Share document with teammate
Responsible for back-end design with Qishan Yang.

Gourmet Fuel has supplied us an office. We sit together to work. We had team
meeting every day at the beginning of working.

We use GitHub to share our code, use Google Drive to share our document.

The GitHub repository is: sd7232126/GourmetFuel





Figure: P8_1
21

The Website We Have Build (Till end of July)

Guide Page (Figure: P9_1)
Home Page (Figure: P9_2)
Register Concept one (Figure: P9_3)
Register Concept two (Figure: P9_4)
Register Concept three (Figure: P9_5)
Register Concept four (Figure: P9_6)
Programme Page (Figure: P9_7)
Payment Page (Figure: P9_8)
Dashboard (Figure: P9_9)

Figure: P9_1


Figure: P9_2
22


Figure: P9_3


Figure: P9_4

23


Figure: P9_5


Figure: P9_6
24


Figure: P9_7


Figure: P9_8
25


Figure: P9_9





26

Major Changes


A significant decision was made almost half way of the project, which is that the
team decided to abandon the former system architecture and move to the new
one, Shopify e-commercial framework.

Building the whole e-commercial website from scratch became unsalable huge
workload for the team, though Angular.js with Laravel is one of the most popular
architectures nowadays.

Moreover, from continuous user feedback the team found that most users prefer
the prototype built by Shopify. Another fact is that the sponsors requirement
changed from plan-based to shopping-based architecture, which made Shopify
seem to be more acceptable than former architecture.

Former system architecture:
Front-end: HTML5 + Angular.js + Boostrap

Figure: P10_1
Back-end: Laravel + PHP
Database: MYSQL

Figure: P10_2
Below are the major problems encountered with former architecture.
27

Problems encountered:
Functionalities beyond teams ability:
1) Payment transaction.
2) Personal Information Security.
3) Unscalable huge amount of functionalities.
4) Sponsor requires Content Management System (CMS) to maintain
system without computer programming.
5) Learning curve of Angular.js may become an obstacle for progress.

Solution Proposed:
Shopify e-commercial framework

Figure: P10_3
1) Easy maintenance with CMS for non-programmers.
2) Integrated functionalities dealing with online payment and security
protection.
3) Provides API for website cunstomisation.
4) Provides Liquid as a powerful web UI framework which easily manages
pages dynamically.

However, introducing Shopify also brought some problems need to be handled:
1) CSS theme conflicts with Boostrap
Shopify applies its own CSS style sheets which have name conflicts with
Boostrap. These UI design issues would be solved by defining custom stylesheets.
2) Shortage on file system architecture
The way Shopify manages files has some significant shortages. It does not
allow subfolders and all files must be put in the folders given by Shopify.
3) Not supporting weekly payment
Commonly blamed defect of Shopify. To work around this we have to
introduce Stripe as a 3rd party plugin and build another server on Stripe.
28

New Life

The following pictures are pages screen shot from Shopify shop we have design.
Gourmet Fuel Website (Figure: P11_1)
Assessment (Figure: P11_2)
Collections (Figure: P11_3)
Product (Figure: P11_4)
Recommend (Figure: P11_5)

Figure: P11_1
29


Figure: P11_2

30


Figure: P11_3
31


Figure: P11_4
32


Figure: P11_5

Launch Event


Target User:
The target customer for gourmet fuel is general people who care their body.
Maybe professional athletes in the future.
33

Tools We Use:
We will focus more on social, to improve general people awareness. First step, we
have to let people know what Gourmet Fuel is, what we can do for them. Second
step, we have to convince people to use our product. Final step, after a amazing
experience customer will share with friends, we will have more customers. To
promote our product we used Landing page, Facebook, Twitter, Youtube.
Landing page: www.gourmetfuel.com
Landing page is an explore of Gourmet Fuel. Some food will shown and general
company information. We also support a way let customer sign for interest. The
landing page have already exit. This domain will become our product order
website after August.

Figure: P12_1
34

Launch on Social media
Facebook & Twitter:
As a great social network application, Facebook and Twitter is a great way to
promote our product. As the time our meal ready, we will upload photos on
Facebook and Twitter. Customer will receive information about new product and
exercise advice from Facebook and Twitter. We will also update customers
feedback, users own experience will be more convincing.
Now we just have some photo to interests people.
Follow us:
https://www.facebook.com/gourmetfuel (Facebook)
https://twitter.com/Gourmet_Fuel (Twitter)

YouTube:
On YouTube we will upload Gourmet Fuels advertisement, customer interview
about feedback, some nutritionist report, meal report etc. Those video will be
attractive like meal report, to show have we make food and what does it like, how
it taste.
Some are for drag peoples attention like nutritionist report, to let people care
about their body and also let them trust us.

Use Poster and Leaflet
The leaflet and poster we have design looks similar of landing page. The reason
why we design this is to enhance people awareness of gourmet fuel. Quit similar
design will strength their conscious.
35


Figure: P12_2
36



Figure: P12_3
Maybe the webpage are looks quit rough now, please visit us at Expo. For more
detailed information, please find us at Expo.


More information please visite our blog websit:
http://gourmetfuel.weebly.com/
http://gourmet-fuel.myshopify.com/