Kim Kyounghee
UI/UX Desinger, HTML, Wordpress
- Reply rate:
- -
- Availability:
- Full-time (40 hrs/wk)
- Location:
- Gayang, Seoul, Korea, Republic of
- Experience:
- 15 years
Stroybord
Accessory Webshop
Front Storyboard
Date / Version
23/11/2017 V 0.5
Prepared by
김경희 Kim Kyounghee
담당
확인
1
책임
USECASE FRONT
User (= Dealer)
web
User’1
Search products
PROMTION
Promotion packs
order
LOGIN
ㄴ고정 ID/PW
LOGOUT
Web catalogue
Supplier
Upload
Send Product
s Order info
mation
Backend System
AMOS , EDOS
Order Status
FRONT I.A
ID
1depts
2 depts
Design
HTML
property
0.0
LOGIN
O
O
page
1.0
Promotion
O
O
page
Web Catalog
O
O
page
2.0
Order
2.1.1
2.1.2
Category
X
O
page
2.1.3
Results
X
O
page
O
O
page
X
O
page
O
O
link
X
O
page
X
O
page
X
O
page
2.2.1
Promotion Packs
2.2.2
2.3.1
Pack details
Supplier
2.3.4
2.4.2
Results
Upload
2.4.1
3.0
Results
협의 필요
Status
3.1.1
Cart
O
O
page
3.2.1
MY order
-
O
page
4.0
Notice
X
O
popup
5 row
5.0
Send Enquiry
X
O
popup
협의 필요
X
O
pa
6.0
Detailed view
7.0
Search
X
O
page
8.0
help
X
△
Link or page
형식 미정
*관련문서: AI분석표.xlsx
Project /Doc.
FRONT _ Story Board
location
Title
Frame Define
Version
Depth
ID/file name
Frame Define
Notice
GNB (Global Navigation Bar)
Kyounghee
1.0
(1)
Help
Logout
Page Description
GNB(Global Navigation Bar)
LOGO
Promotion
Order
Status
TOP navigation ( personal area)
MAIN navigation ( MENU)
Recently Promotions
Upcoming
<
IMG
IMG
U-mount adapter
U-mount adapter
Styling
Styling
€ 20
€ 50
cart
€ 20
Valid-
€ 50
>
cart
Valid-
Contents area
All Promotions
Category
▼
Order
Type
Apply
qty
ㅁ Category
Part Name ▼
Part No ▼
Date ▼
ㅁ Exterior
L ED Türprojektion
9965E00H
-~-
8
1
66,39
1,3%
ㅁ styling
Sichetsset, Branding
99Z06018
-~-
8
1
12,52
1,3%
MSRP
DC %
€ Price ▼
40.30
50,-,46
Action
cart
cart
V
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] > >>
000 copy
Add cart
Footer
4
LOGIN
Project /Doc.
location
FRONT _ Story Board
Title
Welcom Web shop
Version
Depth
ID/file name
Login
0.0
Page Description
#user 구분
1.
2.
부여된 고정 아이디와 패스워드
문구 확정 필요
LOGIN
1
Username
Username ....
Submit
Password
Password ....
2 000 Accessory Webshop System
계속 Continue
6
1.0 PROMOTION
Project /Doc.
FRONT _ Story Board
location
login> Promotion
Title
MAIN
Version
Depth
ID/file name
SSO
Notice
GNB (Global Navigation
Bar)
14
LOGO
5
Promotion
Order
12
1.0
1Kyounghee
(1)
Help
2
3
Status
Logout
4
1. User name (ID)
2. Product Quantity on Status
3. Link PDF file or Html files
4. go to link Login page
5. MAIN navigation area
6. Product Search bar
*Search Option : Parts name or Part
No.
6
Search entire Parts name or Part No.
Recently Promotions
7
Upcoming
IMG
<
7. Product image , title,category,
price,promotion price,
Promotion period , Upcoming Mark (
optional)
IMG
U-mount adapter…
U-mount adapter…
Styling
Styling
€ 20
€ 50
€ 20
Valid-
Page Description
>
About 6~8 columns
€ 50
8 . Select Category
9. Sort by promotion start data
10. cheacked all products send to status
Valid-
11. Doumlaod file
12. NEXT page
13. date search
All Promotions
8
13
Category
Date ddmmyyyy
▼
Order
Type
Apply
qty
~
ddmmyyyy
ㅁ Category
Part Name ▼ 14
Part No ▼
ㅁ Exterior
L ED Türprojektion
9965E00H
-~-
8
1
66,39
1,3%
ㅁ styling
Sichetsset, Branding
99Z06018
-~-
8
1
12,52
1,3%
V
9 Date ▼
MSRP
DC %
€ Price ▼
40.30
50,-,46
Apply
Show Calendar
11
Action
14. Suplier // SSO HMD Extranet
cart
cart
About 15 rows
Default Sort by a “parts No.”
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] > >>
10
Add cart
Hyundai Motor
8
2.0 Order
2.1.1. Web Catalogue
* Possible to hide the Supplier Code
Project /Doc.
location
FRONT _ Story Board
Title
Web Catalogue
Version
Home(Promotion) > order > Web Catalogue
ID/file name
Notice
GNB (Global Navigation Bar)
Promotion
Web Catalogue
1
Depth
Order
footer
(1)
Help
Logout
Page Description
1. Show layer order’s
2depts menu
Status
Promotion packs
Kyounghee
Upload
10
Project /Doc.
location
FRONT _ Story Board
Title
Web Catalogue
Version
Home(Promotion) > order > Web Catalogue
Depth
ID/file name
GNB (Global Navigation Bar)
3
Page Description
• Pictures are only for
prsentation purpose
Web Catalogue
Home > order > Web Catalogue
#공통
HMD 에서 이미지 요청
참고:
https://konfigurator.hyundai.de/
1
카테고리별 나눔 ,
움직이는 썸네일 로
구현 ???
2 MODEL NAME 01 ▶
MODEL NAME 02 ▶
1.
2.
3.
footer
Open the Model name list Layer
Click view : Next page
페이지 타이틀
11
Project /Doc.
location
FRONT _ Story Board
Title
Web Catalogue
Version
Home(Promotion) > order > Web Catalogue
Depth
ID/file name
GNB (Global Navigation Bar)
Page Description
Home > order > Web Catalogue
3
• Pictures are only for
prsentation purpose
Web Catalogue
#공통
HMD 에서 이미지 요청
참고:
https://konfigurator.hyundai.de/
카테고리별 나눔 ,
움직이는 썸네일 로
구현 ???
1.
2.
3.
footer
Open the Model name list Layer
Click view : Next page
페이지 타이틀
12
Project /Doc.
FRONT _ Story Board
Title
Version
Depth
Order → Web Catalogue → MODEL NAME 01 _ View Gallery type
location
ID/file name
GNB (Global Navigation Bar)
Web Catalogue
Page Description
HOME> Order >Web Catalogue > MODEL NAME 01
Category
1
Exterior
Interior
Safety
• Choose Category
• Then, Results appear
• This
3 view is only for
presentation purpose
Transport
• All information is NOT
included here
1
Infotainment
Rims
Comfort
Products
2
Sport and Design
Sort by
• Results per row and column
are to be decided
100
A. Upcoming 포함프로모션
제품,신제품, status 노출
B. NEW 아이콘 기간 ???
Upcoming
NEW
1. 카테고리 선택 영역
- Default : order by
New of All products
IMG
IMG
U-mount adapter
U-mount adapter
Styling
Styling
€ 20
About 6~8 columns , Row
2. Choice view type
grid or gallery
€ 50
€ 50
3. Sort Options : Title ,
Price , New
not available
Availability
4. image, Product name ,
price , NEW icon,
Upcoming icon,
Promotion price
5
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] >
footer
>>
5. 페이징
13
Project /Doc.
FRONT _ Story Board
Title
Version
Depth
Order → Web Catalogue → MODEL NAME 01 _ View Grid type
location
ID/file name
GNB (Global Navigation Bar)
Web Catalogue
Page Description
HOME> Order >Web Catalogue > MODEL NAME 01
Category
Exterior
Infotainment
Interior
Rims
Safety
Comfort
Transport
1. Select Row :
15,50,100
Sport and Design
2. Choice view gallery
type
Products
Products Photo
IMG
2
NAME ▼
3
Item No. ▼
Mudgaurd 144 Gd
kfi
Status ▼
D-er
Availability
Informations
Price ▼
Application: Exteri
or
Installation time: 8
Order Type: E, C, 8
EUR 60
EUR 50
1
100
Action
3. ▼ : Sort
4. image, Product name ,
price , NEW icon,
Upcoming icon,
Promotion price
cart
5. 페이징
4
not available
IMG
5
About 6~8 , Row
IMG
5
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] >
footer
>>
14
2.0 Order
2.2.1. Promotion Packs
* Possible to hide the Supplier Code
Project /Doc.
location
FRONT _ Story Board
Title
Promotion Packs
Version
Depth
HOME> Order > Promotion Packs
ID/file name
GNB (Global Navigation Bar)
Page Description
• Click on Pack No. to
see the pack details
Promotion Packs
HOME> Order > Promotion Packs
Find Packs
Pack Type
A. 프로모션 가격 노출 여부 –
NO (이미 낮춰진 가격임)
1
ALL
Date
ddmmyyyy
~
ddmmyyyy
Apply
100
Pack T Apply qt
MSRP DC %
ype
y
ㅁ Pack Name ▼
Pack No ▼
Date ▼
ㅁ LED Türprojektion
9999L50130
-~-
AD
1
ㅁ Sichetsset, Branding
9999L50130
-~-
AD
1
66,3
1,3%
9
12,5
1,3%
2
€ Price ▼
40.30
50,46 A
40.30
50,46
1. Data search
Show Calendar
Action
cart
cart
V
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] >
footer
Add cart
>>
16
Project /Doc.
FRONT _ Story Board
location
Title
Version
Promotion Packs detail
view
Depth
HOME> Order > Promotion Packs > Pack Name
ID/file name
GNB (Global Navigation Bar)
Promotion Packs
Pack Name
Page Description
HOME> Order > Promotion Packs> LED Türprojektion
LED Türprojektion
Pack No 9999L50130
Item Name
Item No
Qty
Resale
Standard
Special
Saving
Ö lfilter Motor
S-
1
5,62
3,37
3,37
0,00
Luftfiltereinsatz
S281130X200
1
9,90
6,73
6,73
0,00
Innenraumfilter
S-AT
1
15,81
12,02
12,02
0,00
1L Motoröl 5W30 Total Quartz Ineo
-
1
0,01
0,01
0,01
0,00
Dichtring
-
1
1,00
0,60
0,60
0,00
Volume Discount Matrix
Order Type
E,8
Discount Rate
0
Saving
0
Total purchase Price
22,73
-
1
+
Add cart
7
Go to status
footer
8
Go to list
B
17
2.0 Order
2.3.1. Supplier
* Show the Supplier Code
Project /Doc.
location
FRONT _ Story Board
Title
Supplier
Version
HOME> Order > Supplier
ID/file name
Notice
GNB (Global Navigation Bar)
Promotion
Depth
Order
Kyounghee
Status
Promotion packs
footer
Supplier
Help
Logout
Page Description
1. Webshop
suppliers
1
Web Catalogue
(1)
Upload
(Single Sign On)
19
2.0 Order
2.4.1. Upload
* hide the Supplier Code
Project /Doc.
location
FRONT _ Story Board
Order
Title
Version
Depth
*HOME> Order>Upload
ID/file name
GNB (Global Navigation Bar)
Page Description
Upload
*HOME> Order> Upload
Browse
Upload file....
Run
Cancel
Products
100
V Products P
ㅁ
hoto
NAME ▼
Item No
.▼
Status ▼
Customer
sreference
Informatio
ns
ㅁ
V
Mudgaurd 14
4 Gdkfi
D-er
Availability
-e
rtyuss
Installatio
n time: 8
Order Typ
e: E, C, 8
IMG
ㅁ
IMG
Price ▼
1
EUR 50
EUR 50
Billing and Shi
pping Info
Shipping addre
ss
Billing address
cart
If ABC is taking follow-up with
the dealer by phone call or by
any medium. Dealer can insert
ABC‘s as a reference to search
for his order status.
Please check the marked fields. This p
art is not available at the moment
Please press „Save“ button to order t
his part as Backorder
delete
cart
not
available
Unlimited
Action
Customer reference (optional
field for dealer) is to be input by
the dealer. Suppose at
dealership, an end customer
ABC has ordered part from the
dealer.
delete
1. Price 체크 ??
**status 랑 테이블 화면 같습니다!
Sub total excl VAT
VAT
SUM
Purchase Price incl. VAT
-
1
+
Add cart
footer
EUR 100
19 %
EUR 119
전체
논의 필요
Go to status
21
3.0 Status
Project /Doc.
FRONT _ Story Board
Title
Version
Depth
location
ID/file name
GNB (Global Navigation Bar)
Page Description
Status
*HOME> Order > Status
MY Order
CART
Promotion
▲
NAME ▼
Item No
.▼
ㅁ
Mudgaurd 144
Gdkfi
D-er
IMG
A. My order 에서만 보여줘도
되는지? --- > 차후 논의
B. Supplier 삭제 ?
A
ㅁ Products P
hoto
Status
▼
Availability
Informatio
ns
Price
▼
Customer refe
rence
Billing and Shi
pping Info
Installatio
n time: 8
Order Typ
e: E, C, 8
EUR 50
-i9o
0psdfg
Shipping addr
ess
Billing address
The dealer can save the
cart for later use without
any reservations
Action
Alt message or layer popup
order
“ Are sure Delete product ? “
Delete
Yes
NO
ㅁ
IMG
Unlimited
not
available
order
Delete
Sub total excl VAT
<< <
EUR 100
VAT
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] > >>
Web catalogue ▼
Promotion packs ▼
19 %
Purchase Price incl. VAT
ORDER
EUR 119
항목
논의 필요
Supplier ▼ B
Upload ▼
footer
23
Project /Doc.
FRONT _ Story Board
Title
Version
Depth
location
ID/file name
GNB (Global Navigation Bar)
Page Description
Status
*HOME> Order > Status
MY Order
CART
ddmmyyyy
Date
Item no
~
The dealer can save the
cart for later use without
any reservations
3
ddmmyyyy
Order no
Customer reference
Order No
title
Order date
-
mudgaurd112
-
...
Total incl. VAT
EUR 119
Order Status
Billing and Shipping Info
Open
Shipping address
Billing address
1.
Row 선택시 상세 테이블 보여줌
2.
Promtion pac 일 경우
단품 리스트도 함께 보여줌
3. 다운로드 파일
1
ㅁ
Category
Products NAME ▼
Item No. ▼
Order Type
Customer reference
Price ▼
ㅁ
promotion
Mudgaurd 144 G
D-er
E, C, 8
-i9o0psdfg
EUR 50
Mudgaurd 144 Gdkfi
D-er
E, C, 8
-i9o0psdfg
EUR 50
Mudgaurd 144 ㄷㄷㅇㅇ
-er
ㅡ
ㅡ
EUR 50
Mudgaurd 144 ㄷㄷㅇㅇ
-er
ㅡ
ㅡ
EUR 50
ㅁ 2 Promotion Pac
-
ddmmyyyy
EUR 119
Order Status: In-Transit
Shipping address
Billing address
-
ddmmyyyy
EUR 119
Order Status: In-Transit
Shipping address
Billing address
-
ddmmyyyy
EUR 119
Order Status: Open
Shipping address
Billing address
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] >
footer
>>
24
Product Detail View
Project /Doc.
FRONT _ Story Board
Title
Version
Products Detail view
location
New window
Depth
ID/file name
GNB (Global Navigation Bar)
Promotion
2 In stock
Page Description
5
*Promotion page > Category > Product Name here-
1
1.
2.
In stock
Currently not available
On the way
Third party
Product Name here-
3
4
IMG
MSRP
PROMOTIN(20%)
VAT 19%
IMG
€ 100,00
€ 80.00
€ 15.20
Totel
€ 95.20
Unit
Net
Gross
IMG
IMG
-
IMG
1
20%
80.00
40%
60.00
+
Add cart
80%
20.00
3. Max. 4 pictures/ part number
Max. size 12MB/picture
Possible to upload zip folder of picture
per Part number
If have ‘No image’ , display “Hyundai
logo”
4. Price.
A blow is “NO promotion” Products
price design
MSRP
VAT 19%
Product Information
Totel
> Product specification
Unit
Net
Gross
Item no
-
Accent
2017
Accessory Color
Silver (chrome look)
Material
Stainless steel
Installation time
2 Hour
Package Size
155mm x 75mm x 280mm
Warranty
3 years
Branded
No
계속 Continue
Page title
Statues mark
-
€ 100,00
€ 19,00
€ 119,00
1
20%
80.00
40%
60.00
+
Add cart
80%
20.00
5. Location Bar
26
이전페이지 계속 Continued on the previous page
Page Description
> Product description
Add a touch more urban elegance to your i30 and emphasize its other exterior design features with
these high-gloss stainless steel caps (set of 2).
DCS imported
Product description,links,documents
+ Detail description
5. Download file
Product image , title,category,
price,promotion price, cart
Add a touch more urban elegance to your i30 and emphasize its other exterior design features with
these high-gloss stainless steel caps (set of 2).
6. images, products
name,category,price
7. Go to Cart
8. Go to Status
> Useful links
9. Can this complete area
http://www.mobisparts.eu
be automatically hidden
if no related items have
been specified?
http://www.hyundai.de/
> Documents
5
↓ Abc.pdf
Related spare parts
6
IMG
About 6~8 columns
<
>
9
U-mount adapter
Styling
€ 20
€ 50
-
1
+
Add cart
footer
7
Go to cart
8
27
Search Resultes
Project /Doc.
FRONT _ Story Board
location
Title
Version
Depth
ID/file name
Home> Search Results
GNB (Global Navigation Bar)
Page Description
Search Products
HOME> Search Products
126 Search Results found for „Mudgaurds“
Category
All
Model
All
Model Year
All
Mudgaurds
Search
Offers
Products
Products Photo
IMG
2
NAME ▼
Item No. ▼
Mudgaurd 144 Gd
kfi
D-er
Status ▼
Availability
Informations
Price ▼
Application: dkfk
Installation time: 8
Order Type: E, C, 8
EUR 60
EUR 50
1
100
Action
cart
4
not available
IMG
5
IMG
About 6~8 , Row
5
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] >
footer
>>
29
4.0 Notice
Project /Doc.
location
FRONT _ Story Board
Title
MAIN
Version
Depth
login> Notice
ID/file name
GNB (Global Navigation Bar) Notice
14
Promotion
Order
Kyounghee (1)
Status1This is Title
Recently Promotions
1.0
Help
Logout
Page Description
-
This is Title 2
Search-
entire catalog here...
This is Title 3
-
1. NEXT page
Upcoming
<
IMG
IMG
U-mount adapter
U-mount adapter
Styling
Styling
€ 20
€ 50
All Promotions
€ 50
€ 20
Valid-
>
About 6~8 columns
Valid-
Category
▼
Order
Type
Apply
qty
ㅁ Category
Part Name ▼
Part No ▼
Date ▼
ㅁ Exterior
L ED Türprojektion
9965E00H
-~-
8
1
66,39
1,3%
ㅁ styling
Sichetsset, Branding
99Z06018
-~-
8
1
12,52
1,3%
V
MSRP
DC %
€ Price ▼
40.30
50,-,46
Action
cart
cart
15 rows
Default Sort by a promotion start date
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] > >>
Add cart
Hyundai Motor
31
Project /Doc.
location
FRONT _ Story Board
MAIN
Title
Version
Depth
login> Notice View
ID/file name
GNB (Global Navigation Bar) Notice
14
Promotion
Order
1.0
Kyounghee (1)
Help
Logout
Page Description
Status
Search entire catalog here...
Recently Promotions
> Notice title here ….
-
Upcoming
Text Put in ….
공지내용 들어갑니다
IMG
IMG
<
U-mount adapter
U-mount adapter
Styling
Styling
€ 20
€ 50
€ 50
€ 20
Valid-
>
About 6~8 columns
Valid-
Attach : Dabc2010.doc, dkfovl.ppt
All Promotions
Category
◀ PRE
▼
NEXT ▶
Close
Order
Type
Apply
qty
ㅁ Category
Part Name ▼
Part No ▼
Date ▼
ㅁ Exterior
L ED Türprojektion
9965E00H
-~-
8
1
66,39
1,3%
ㅁ styling
Sichetsset, Branding
99Z06018
-~-
8
1
12,52
1,3%
V
MSRP
DC %
€ Price ▼
40.30
50,-,46
Action
cart
cart
15 rows
Default Sort by a promotion start date
<< <
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] > >>
Add cart
Hyundai Motor
32
