Introduction

My Focus

This project was a design practice of user interface design. I picked a banking account webpage as an example, analyzed its UI design, and offered design improvements.

My Role

UI Designer

Heuristic Evaluation

Original Design

  • This containment box should be the page's primary and most important display of information. On the current page, the inner bar visual expression is insufficient, and the other inner bar can not be clearly distinguished.

  • These three function buttons should belong to the primary buttons and are relatively frequently used by users in this interface. The current design is not visually prominent or part of the regular button design, which is not easy for novice users to operate on their first use.

  • The balance display should be the most crucial information to the user of the current interface. Compared with other information display designs, the visual effects of the current design are less distinguishable and not easily viewed from the perspective of visual effects.

  • The current table design is relatively long in horizontal length, and the user's eyes will move a long distance when reading. For a large amount of information, the horizontal row is not conducive for the user to finding information. In addition, the table does not distinguish visual differences in information classification.

  • This part of information should be the most concerned part of the information bar where the information display belongs. The current design visual effects are not distinguishable from other regions in this information bar and cannot provide the user with a visual display at first glance.

Design

Design Improvements

Based on the results from the heuristic evaluation of the original webpage design, I redesigned the way of visual presentation of the information on the page.

Before

After

Before

After

Design Iterations

Besides the visual redesign for the informative presentation on the webpage, I also worked on the layout design of the webpage to test how different layouts affect visual presentation.

Version 2

Version 3

Final Design

Menu