Slide 1

numbergrandioseInternet and Web Development

Feb 5, 2013 (4 years and 8 months ago)

326 views

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