Slide 1

MidTerm
Presentation

Team members:

Chew Siew Chin

Lau Shu Neng

Lim Wen Rong Ryan

Ong Zhen Guang

Yong Qian Hwee

Zou Mei

Shopaholic Midterm Presentation
AY1213 Term1

1

Team Roles

Team member

Roles

Jasmine Chew
Siew

Chin

Project Manager

Lau Shu Neng

Business

Analyst

Ryan Lim Wen Rong

Developer

Ong

Zhen

Guang

Developer

Yong Qian Hwee

UX

Designer

Zou

Mei

Secretary

Shopaholic Midterm Presentation AY1213
Term1

2

Content Page


Team & Roles


Introduction to Sprees


Our Proposed Functions


Goals & Measure of
Success


Supported Sites as of 7 October 2012


Demonstration


Project Environment


Business Considerations


Our Plugin


Our Portal


Project Management


Reflections

Shopaholic Midterm Presentation AY1213
Term1

3

What is a Spree?


Consolidation

of

a

mass

order

for

an

online

merchant
,

usually

by

an

individual

who

wishes

to

purchase

some

items

from

a

particular

merchant,

and

hopes

to

reduce

the

cost

of

shipping

by

spreading

the

cost

over

more

items
.


Shopaholic Midterm Presentation AY1213
Term1

4

Spree Platforms in Singapore

Shopaholic Midterm Presentation AY1213
Term1

5

Current Spree Process

Spree Organizer’s Process Flow






Spree Participant’s Process Flow


Shopaholic Midterm Presentation AY1213
Term1

6

Register
as Spree
Organiser

Create
Spree

Verify
Payment

Close
Spree

Place
Order

Distribute
Goods

Find Spree
Organiser

Fill up Order
Form

Make
Payment

Wait for
Verification

Receive
Parcel

What We Proposed…


Redefine the Spree Experience


Purchasing through sprees will now have the
same experience as shopping at an online
store


2 Main Components


‘Tag & Bag’ Plugin [
X
-
Factor
]


D2T9 Portal


Spree Management tools for Spree
Organizers


Easy checkout process for Spree
Participants


Shopaholic Midterm Presentation AY1213
Term1

7

Goals

Measure of Success

Reduced time taken to
capture order

Task completion time reduced
from 5min to 30 seconds

Eliminate calculation error

No calculation error

Ease payment and fund
collection process

Multiple payees to one payee


Ease order consolidation

One click view

Support multiple browsers

Chrome, Firefox,

Safari ,
IE9&above

Robust plugin framework

Support new site within 24 hours

Accuracy of Plugin

Tested on 10 sites

Shopaholic Midterm Presentation AY1213
Term1

8

Supported Sites as of 7 Oct 2012

Shopaholic Midterm Presentation AY1213
Term1

9

Demonstration

Shopaholic Midterm Presentation
AY1213 Term1

10

X
-
factor Showcase

Support a new website before
the end of our presentation

Shopaholic Midterm Presentation AY1213
Term1

11

Project
Environment

Shopaholic Midterm Presentation
AY1213 Term1

12

Project Environment


Ruby on Rails for the web portal


Javascript

for ‘Tag & Bag’ plugin


HAML, HTML5, CSS3 and SCSS for webpages


GitHub

for code repository


Shopaholic Midterm Presentation AY1213
Term1

13

Why Ruby on Rails?


Fast and efficient for web deployment
purposes


Ready to go gems (Ruby equivalent to .jar for
Java)


Team members interested in learning


Highly valued skillset for current industry

Shopaholic Midterm Presentation AY1213
Term1

14

Ruby Gems


simple_form


Cocoon


carmen


bootstrap
-
sass


Devise


cancan


role_model


state_machine


audited
-
activerecord


Shopaholic Midterm Presentation AY1213
Term1

15

HAML & Sassy CSS


Hypertext Abstraction Markup
Language(HAML) addresses many flaws in
traditional
templating

engines


Sass (Syntactically Awesome
Stylesheets
) is a
CSS
metalanguage
, and
SassScript

is the
scripting language


HAML and SCSS helps us create code that is
more efficient and elegant

Shopaholic Midterm Presentation AY1213
Term1

16

Shopaholic Midterm Presentation AY1213
Term1

17

Shopaholic Midterm Presentation AY1213
Term1

18

Why
GitHub
?


Allows for commits and tracking of code
versions even when offline


Encourages more granular changes


Distributed repository ensures more security

Shopaholic Midterm Presentation AY1213
Term1

19

Project
Considerations

Shopaholic Midterm Presentation
AY1213 Term1

20

Process Flow Considerations


No industrial standard to compare to


Based off the inefficient process flow used in
the current market


Need to improve without losing the essence of
a spree process


Needs to be simple and intuitive yet meet all
the requirements


Cannot have a steep learning curve as it adds
barriers to entry


Shopaholic Midterm Presentation AY1213
Term1

21

Portal Design Considerations


Amount of information


Visual appeal


Visual impression


Content flow


Usability


Loading speed


Scalability


Consistency


Browser Compatibility


Shopaholic Midterm Presentation AY1213
Term1

22

Plugin Considerations


Screen space employed


Accuracy of data captured


Multiple product captures


Intuitive usage


Able to adapt to different site designs


Best method of implementation


Compatibility


Shopaholic Midterm Presentation AY1213
Term1

23

Technical Considerations


Subtleties of Ruby on Rails and its inherent
potential is hard to harness without experience


Best practices to learn for HAML, SCSS, and to
keep code DRY


Code elegance even with the complex
calculations required


Database models make sense


Shopaholic Midterm Presentation AY1213
Term1

24

Our Plugin

Shopaholic Midterm Presentation
AY1213 Term1

25

Framework


Research

Discuss/Argue

Paper Proto

User Test

Graphic Proto

User Test

Shopaholic Midterm Presentation AY1213
Term1

26

“Tag & Bag” Design Considerations

Shopaholic Midterm Presentation AY1213
Term1

27

Pinterest

Listly

Nuji

Shopaholic Midterm Presentation AY1213
Term1

28

‘Tag & Bag’

Plugin

Shopaholic Midterm Presentation AY1213
Term1

29

‘Tag & Bag’ Plugin
–

User Feedback


The left and right button are
moved from the top to the
side of the pictures


Relocation of close button


Removal of home button


Change of image size


Addition of tooltips

Our Portal

Shopaholic Midterm Presentation
AY1213 Term1

30

D2T9 Portal

Shopaholic Midterm Presentation AY1213
Term1

31

D2T9 Portal

Shopaholic Midterm Presentation AY1213
Term1

32

Shopaholic Midterm Presentation AY1213
Term1

33

D2T9 Portal

Project
Management

Shopaholic Midterm Presentation
AY1213 Term1

36

Project Management Tools

Shopaholic Midterm Presentation AY1213
Term1

37

Project
Management

Schedule/Bug

Documentations

Communication Channels

Completed

Tasks

Tag and Bag Plugin:



I湦潲浡ni潮

䕸E牡捴i潮



䑲慧D慮搠䑲潰aI浡ge猠晲潭f卩Se

印牥e

䵡湡Me浥湴:



䍲C慴e 印牥e



剥浯Re⁓灲敥



䍬潳攠印牥e



Filte爠O湧潩湧o印牥e



印牥e 却慴畳

U獥爠䵡湡Me浥湴 :




Create Account



Login & Logout



F潲oet 偡獳w潲o



䑥lete A捣潵湴



U灤慴e A捣潵湴 䑥t慩ls

U獥爠I湴e牦慣攠䑥獩g渺



Main Portal



UI Plugin

Cart Management:



View Ite浳



䑥lete Ite浳



A摤⁉te浳 t漠印牥e



䍡C捵c慴i潮映ote洠䍯獴s



Check Out

Shopaholic Midterm Presentation AY1213
Term1

38

Incomplete

Tasks

Mitigation Plan

Tag and Bag Plugin:



Error Reporting


Rescheduled to Iteration 8

Spree

Management:



N潴i晩捡ci潮o偡y浥湴


剥獣桥摵de搠t漠ote牡ri潮o6

Shopaholic Midterm Presentation AY1213
Term1

39

Schedule Metrics

Shopaholic Midterm Presentation AY1213
Term1

40

1.15

1

1.16

1.17

1.54

0
0.2
0.4
0.6
0.8
1
1.2
1.4
1.6
1.8
1
2
3
4
5
Iterations

Metrics Overview

Performance

Index

Mitigation Plan


Extended Iteration for 8 Days


Use the buffer time allocated at the end of
iteration 8


Reason:

Necessary improvements to the process flow
required a major change in back
-
end model
linkages


Decision was made due to the initial User Test 2
feedback

Shopaholic Midterm Presentation AY1213
Term1

41

Bug Metrics

Shopaholic Midterm Presentation AY1213
Term1

42

0

0

2

11

9

0

2

1

7

7

0

0

1

1

0

0
2
4
6
8
10
12
1
2
3
4
5
Bug Count

Bug Count by Severity

Major
Normal
Minor
Iterations

Bug Metrics

0

10

17

56

35

0
10
20
30
40
50
60
1
2
3
4
5
Iterations

Overview of Bug Points

Low

High

Shopaholic Midterm Presentation AY1213
Term1

43

Total Bug
Point

Mitigation Plan

Shopaholic Midterm Presentation AY1213
Term1

44

Deliverables after Midterm

Shopaholic Midterm Presentation AY1213
Term1

45

Upcoming

Tasks (Iteration 6,7,8)

Credit Management:


View Credit

Balance


A摤⽒d浯me⽅硴牡捴 䍲C摩d


却慴e浥湴 潦⁁捣潵湴 (偡獴
T牡湳r捴i潮o)


䉡湫⁁捣潵湴 Ve物ri捡ci潮o

Backend Admin Functions


Audit Trail (Log)


Analytics (Buyers’ Trend)

User Management:


剡te Ot桥爠U獥牳s

(O牧慮aze爠


Buyer)

Social Element


剡ti湧 卹獴em


卯Si慬⁓桡物湧


䕭扥摤i湧 Wi摧整s

印牥e

䵡湡Me浥湴:


N潴i晩捡ci潮猠䍥湴e爠

(偡y浥湴 Ve物ri捡ci潮o


䉡捫
-
e湤nL潧i挠䍯浰潮C湴

T慧a☠䉡B F牡浥r潲欠(灬畧楮u


䕲牯爠剥灯牴i湧

Reflections

Shopaholic Midterm Presentation
AY1213 Term1

46

Reflections

Shopaholic Midterm Presentation AY1213
Term1

47

Issue

What we feel

The value of
User Testing

•
偲潶i摥d

val畡扬e 晥e摢d捫

•
Hel灥搠畳uin 潵爠re獩杮⁣潮 i摥牡ti潮s

•
U獥牳ra扬e⁴ i摥dti晹 what we ten搠t漠潶e牬潯欯k
晡ile搠t漠捯c獩摥d

•
䍡C特 畳u爠te獴 浯牥⁦牥 略ntl礠t漠条ohe爠
晥e摢d捫c☠&浰牯me 潵爠獹rtem

Im灯牴慮捥映
m敥ti湧n

•
Initial 獨潲o 扩
-
wee歬礠浥mtin杳

•
䑩晦f牥nt

view猠潮⁰牯捥獳ss

•
Meetin朠浯牥⁡ 搠havin朠浯牥⁩n 摥dth
摩獣s獳s潮 i浰牯me猠潵爠敦晩捩en捹

X
-
factor Demonstration

Shopaholic Midterm Presentation AY1213
Term1

48

Questions?

Shopaholic Midterm Presentation
AY1213 Term1

49