Page 1

DESIGN CHALLENGE For SAP

Designed By Tai-Hung Lu


I. Context Some groups are continuously charged for servers that did exist in the past but do not exist anymore, hence dead servers. Each month we generate a report for each group with the group’s name, the total amount of charges, and a list of individual servers and their respective charge. Please uplift the information with an appealing design. The choice is yours to make: Whether you choose a professional design in a professional context or a provocative, eye catching design to get the point across is up to you.

II. Goal To better convey the information about the monthly report of dead servers, I create a Servers Manage Application. Based on the context, I set two design goals. One is to create a clean interacitive list that users can browse and access the servers’ infromation. Another one is to create a data visualization that help users to compare and contrast the information.

1. Clean List View 2. Data Visualization


III. Information & Structure I concluded the possible information based on the specification in the design chellenge, and I categorize them into groups. Based on the information, I also concluded some possible function such as print, download pdf, search, etc.

List

Home

Server Information

Month and Year Title Total Charge Total number of dead servers Groups’ Name Number of dead servers for each group Charge for each group Notification (Next report date)

Month and Year Group Name Servers’ Name Reason Charge Total Charge The number of dead servers

Function

Pick Month & Year Search Download PDF Print Save to Cloud Archive Email Login Help

Data Viasulization

Group Charge Sort by Name, Charge, Number Charge Increase Rate Amount of Dead Servers Increase Rate Monthly Total Charge

Charge Increase Rate Amount of Dead Servers Increase Rate Monthly Charge


IV. Design After I organized the infromation and function, I started to create different versions of wireframes and UI components.

1. Layout

A B

A. Top Bar

B. Title

C. Content

Logo Loggin Help

Title Subtitle Shor information

List Data Visualization

D. Date

E. Side Workplace

Date Calender

Main function Alert

D

E

C


2. Style Guide • Font

• Spacing

• Color

Title

X-small: 8pt

Dominant Color

Helvetica Neue Bold 32pt

Small: 16pt

Subtitle

Medium: 24pt

Helvetica Neue 24pt Function

Helvetica Neue 14pt

#4FD5F6

#000000 Opacit: 0.2 Spread: 2px Blur: 4 X: 0 y: 2px

#AFCFFF

Accent Color Medium2: 32pt Large: 40pt #959595

Paragraph1 - Body

Helvetica Neue 12pt

#599AE5

• Shadow

X-Large: 48pt

#646464

#4B4B4B

Background Color

Paragraph2

Helvetica Neue Bold 12pt #F5F7FA

#FAFAFA

#323232

#000000


3. UI Components • Year and Month Picking

• Side Function Bar

• Button View More

"!

11/2017

!

"

Jan / 2017 Feb / 2017 Mar / 2017 Apr / 2017 May / 2017

)

Home

'

Print

&

Download PDF

$

E-mail

%

Archive

(

Download to Cloud

#

• List View More

SAP Recruit Team

#

Human Resource A

+

SAP Recruit Team

Name

- List

Total Charge

, Stats

- List

Total Amount of DS

Human Resource A

, Stats SAP Recruit Team

Human Resource A

Jun / 2017 Jul / 2017 Aug / 2017 Sep / 2017 Oct / 2017 Nov / 2017 Dec / 2017

*

SAP Recruit Team

Alert - Next report date - 12/29

Human Resource A


V. Final After many rounds of ideation and iteration, I created four user interfaces: Homepage in list view, Homepage in data visualization view, Group page in list view and Group page in data visualization view.

1. Homepage - List In homepage list view, we can see the list of group name, the total number of their dead services, and the total charge.


2. Homepage - Data Visualization In homepage - Data Viaulization, it has three main sections. The first section is group chart. It’s a chart to show every groups’ information in this month, and it can be sorted by name, charges, and the number of dead servers. The second chart shows the increase rate this month in both charge and the number of dead servers. The Third Chart shows the total charge and the number of dead servers in every month.


2. Homepage Data Visualization

Group Chart

!

Overview of Total Charge and Amount of Dead Server Each Group

• Group Chart Name

Total Charge

Total Amount of DS

The Group Chart shows the overview of the total charge and amount of dead servers for each group in this month. It can be sorted by name, total charge, or total amonts of dead servers.

"

"

Pr od

uc t

Us er an d

In no

Us er

An

al

va t

io

n

yt ic

s

In Ex

Hu m

pe

te rc a

rie

e

nc e

De

an

ve

Re

se

ar ch

lo

SA P Re

so

pm

en

t

Re

Ba cr

ur ce

ck

ui tm

en

t

IL St

ov

ag

e

De

ve

eS

AP

lo

SA P

In UX

no v

In

in te

at

rn

io

no v

n

at

an

d

De

ve

pm en

t

X& io n

X

Y

Pr od u

ct

an

d

Ap p

lic

lo

pm

en

t

at

io n


2. Homepage Data Visualization • Total Overview The total overview shows the increase rate of charge and the increase rate of number of dead servers for whole organization in the month.

Total Overview Increase Rate This Month

-75%

-50%

$ Total Charge Increase Rate

# Total Amount Increase Rate

Decrese 75% Charge this month

Decrese Amount 50% this month


2. Homepage Data Visualization • Monthly Total Chart The monthly total chart shows the total charge and the total number of dead servers in per month.


3. Group Page - List In Group Page - List, it shows the list of Server name, the reason why the server do not work, and the charge for each servers.


3. Group Page - Data Visualization In Group Page - Data Visualization, it shows two charts. One is the overview chart which includes the increase rate of charge and the increase rate of the number of dead servers. The other one is the monthly report for the group.


! Help

Server Manager

" Log In

Nov / 2017 Servers Report $ List '% -

11/2017

Home

Total Charge: $ 1,300,250,000 Amount of Dead Services: 2000

# Stats

Group Name

%

&

%

%

Number of Dead Services

Total Charge

Product and Innovation

99

$ 55,000

View More

+

Print

User Analytics

99

$ 5000

View More

*

Download PDF

User Experience Research

99

$ 5000

View More

(

E-mail

Interface Development

99

$ 5000

View More

)

Archive

SAP Recruit Team

99

$ 5000

View More

,

Download to Cloud Human Resource A

99

$ 5000

View More

Product Management

99

$ 5000

View More

Industrial Design

99

$ 5000

View More

Front End Development

99

$ 5000

View More

Human Resource B

99

$ 5000

View More

Front End Development

99

$ 5000

View More

Front End Development B

99

$ 5000

View More

.

Alert - Next report date - 12/29


! Help

Server Manager

" Log In

Nov / 2017 Servers Report & List ('

Total Charge: $ 1,300,250,000 Amount of Dead Services: 2000

% Stats

11/2017

.

Home

,

Print

+

Download PDF

)

E-mail

*

Archive

-

Download to Cloud

Group Chart

#

Overview of Total Charge and Amount of Dead Server Each Group

Name

/

Alert

Total Charge

Total Amount of DS

$

$

- Next report date - 12/29

Pr od

uc t

Us er an d

In no

Us er

An

al

va t

yt ic

s

In

Hu m

Ex pe

te rc a

rie

e

nc

e

De

an

ve

Re

lo

se

io

n

ar ch

SA P Re

so

pm

en

Re

Ba cr

ur ce

t

ck

ui tm

en

t

IL St

ov

ag

e

De

ve

eS

AP

lo

SA P

In UX

no v

In

in te

at

rn

X&

io

no v

n

at

an

d

De

ve

pm en

t

io

n

Y

X

Pr od u

ct

an

d

Ap p

lic

lo

pm

en

t

Total Overview Increase Rate This Month

-75%

-50%

$ Total Charge Increase Rate

# Total Amount Increase Rate

Decrese 75% Charge this month

Decrese Amount 50% this month

at

io n


! Help

Server Manager

" Log In

Nov / 2017 Servers Report & List ('

Total Charge: $ 1,300,250,000 Amount of Dead Services: 2000

% Stats

11/2017

.

Home

,

Print

+

Download PDF

)

E-mail

*

Archive

-

Download to Cloud

Group Chart

#

Overview of Total Charge and Amount of Dead Server Each Group

Name

/

Alert

Total Charge

Total Amount of DS

$

$

- Next report date - 12/29

Pr od

uc t

Us er an d

In no

Us er

An

al

va t

yt ic

s

In

Hu m

Ex pe

te rc a

rie

e

nc

e

De

an

ve

Re

lo

se

io

n

ar ch

SA P Re

so

pm

en

Re

Ba cr

ur ce

t

ck

ui tm

en

t

IL St

ov

ag

e

De

ve

eS

AP

lo

SA P

In UX

no v

In

in te

at

rn

X&

io

no v

n

at

an

d

De

ve

pm en

t

io

n

Y

X

Pr od u

ct

an

d

Ap p

lic

lo

pm

en

t

Total Overview Increase Rate This Month

-75%

-50%

$ Total Charge Increase Rate

# Total Amount Increase Rate

Decrese 75% Charge this month

Decrese Amount 50% this month

at

io n


! Help

Server Manager

Product and Innovation . List %# + )

11/2017

Home

Print

$ Back Total Charge: $ 5,000 Amount of Dead Services: 99

- Stats

Server Name

#

" Log In

Reason

Charge

server-0.pal.sap.corp

Could not resolve host

$ 500

server-1.pal.sap.corp

Could not resolve host

$ 500

server-3.pal.sap.corp

Could not resolve host

$ 500

(

Download PDF

&

E-mail

server-4.pal.sap.corp

Could not resolve host

$ 500

'

Archive

server-5.pal.sap.corp

Could not resolve host

$ 500

*

Download to Cloud

server-6.pal.sap.corp

Could not resolve host

$ 500

server-7.pal.sap.corp

Could not resolve host

$ 500

server-8.pal.sap.corp

Could not resolve host

$ 500

server-9.pal.sap.corp

Could not resolve host

$ 500

server-10.pal.sap.corp

Could not resolve host

$ 500

server-11.pal.sap.corp

Could not resolve host

$ 500

server-12.pal.sap.corp

Could not resolve host

$ 500

,

Alert - Next report date - 12/29

#


- Help

Server Manager

Product and Innovation " List %$ Home

)

Print

(

Download PDF

&

E-mail

'

Archive

*

Download to Cloud

,

# Back Total Charge: $ 5,000 Amount of Dead Services: 99

! Stats

11/2017

+

Alert

. Log In

Overview Increase Rate This Month

-75%

-50%

$ Total Charge Increase Rate

# Total Amount Increase Rate

Decrese 75% Charge this month

Decrese Amount 50% this month

- Next report date - 12/29


Thank you for your time

Designchellenge  
Designchellenge  
Advertisement