top of page
IMG_0776.png

<< Back

Contact List

UI | Webpage enhancement

Project

Cleaning up and reorganize UI for the Contacts Page. 

mock-contacts.jpg
1
2
3
4
5
6

Issues

  1. The searching bar takes too much space. 

  2. Users don't know how to add contacts; blue buttons seem confusing.

  3. Find a proper place for the pagination.

  4. Users should have the ability to edit columns.

  5. Rank icons are ambiguous.

  6. Display more columns.

contacts-2.png
Screen Shot 2019-09-10 at 9.51.23 PM.png
3
5
Screen Shot 2019-09-10 at 10.56.32 PM.pn
4
Screen Shot 2019-09-10 at 11.05.13 PM.pn
1
2
6

Solutions

  1. The searching bar is moved to the right-hand side of the page.

  2. Add or import contacts to the list by clicking the drop-down menu.

  3. Release space from the top right corner and move the pagination to the bottom-left area.

  4. Provide new functions, editing, and reorder the columns. 

  5. Revise the current rank icons to improve the meaning and legibility.

  6. The horizontal scrolling bar provides users the flexibility to browse more columns at the same time.

Prototype and Demo

Presenting the concept and user flow to the Product/Engineering team. 

Prototype (inVision)

Screen Shot 2019-11-07 at 9.12.15 AM.png

Demo Video

Design Assets

Defining pixel-perfect style guidelines and mocks for the developer team.

Typography

guideline-typography.png

Button Guideline

guidelines_buttons_2019.png

Element Guideline

guideline.png

Responsive Grid System

12columns-contacts.png

Personal Portfolio Website  | Ping Hung Hsu

© 2019 by Ping Hung Hsu. 

  • LinkedIn Social Icon
  • Instagram Social Icon
  • Facebook Social Icon
bottom of page