Zenlogic Customer Portal – UI Analysis – 1. Analysis of the current application



Zenlogic Customer Portal – UI Analysis – 1. Analysis of the current application

0 0


zenlogicpresentation

Improvements about zenlogic customer portal application

On Github michaelrambeau / zenlogicpresentation

Zenlogic Customer Portal

UI Analysis

By Michael 2014-12-22

1. Analysis of the current application

The main point: it is not mobile friendly...

Current layout for mobile users

From an iphone screen, zoom in

Current layout for mobile users

From an iphone screen, zoom out

Other weak points...

Menu duplicated

2 times the same menu: 契約一覧、ビジネス会員管理。。。

"NEXT" button

Now "NEXT" (次へ) button is on the left, it should be on the right.

Form validation

Form validation is server-side only, it should be client-side AND server-side => bad user experience!

Example: 「お申込み内容入力」form

Login form

No focus on the username field. The user has to click in in the field to be able to enter his/her username.

2.Improvement proposal

  • Responsive Web Design = 1 web site for everybody: smartphones, tablets and desktops
  • More attractive design
  • Easy to read/understand menu
  • Big footer with 'Support' links

Prototype v0.1

Using an accordion to make the Control Panel menu shorter.

Online demo

Mobile layout

Desktop layout

Desktop layout - Control Panel

Prototype v0.2

The white version

Online demo

Mobile layout

Desktop layout

Desktop layout - Control panel

The end

「お客さんのビジネスを変革する」