top of page

Nicor Gas  Heuristic Evaluation + Process Redesign

tran-mau-tri-tam-57714-unsplash_1.jpg

BACKGROUND

This project redesigned the online payments process for Nicor Gas by the method of heuristic evaluation. Heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. The main goal of heuristic evaluations is to identify any problems associated with the design of user interfaces.

INTRODUCTION

The process of making a Nicor Gas payment

傻眼-03.png

Heuristic Evaluation

Slide03.jpg
傻眼-03.png

Potential Remedy

  • Transform the text of hyperlinks for editing to icons and only display the icons as a hover

  • Lighten the color of the Current Bill, Previous Bill and Previous Payment sections, since they are second priority on this page

  • Move the Pay Bill button closer to its related object - total balance $17.80 - and allow the red color of the button to stand out against the lightened Current Bill, Previous Bill and Previous Payment sections

Slide04.jpg
Slide05.jpg
傻眼-04.png

Potential Remedy

  • Rearrange the payment detail to the left and account information to the right in order to emphasize that paying the bill is the first priority task. Since our eyes tend to browse items from left to right, the users' eyes will now land on the payment information first.

  • Move the Pay Now button closer to its related object - the payment summary.

Slide06.jpg
Slide07.jpg
傻眼-05.png
傻眼-05.png

Potential Remedy

  • Differentiate between purpose and function for text

  • Add a form indicating options for different payment methods to let users understand more easily that they can choose between options 

  • Take unnecessary information away and rearrange the layout. 

  • Align action buttons to the right side.

  • Make the Pay Bill button red and the Manage and View buttons grey to guide the users to the main task on this page, paying the bill, while still keeping the flexibility and freedom to allow users to pick other options.

Slide08.jpg
Slide09.jpg
傻眼-06.png

Potential Remedy

  • I moved the diagram of the steps in the process in the middle which allows users easy to see where they are in the payment process​

​​

  • According to the diagram above and conventions of a web page, the next step (page) should be right and the previous step (page) should be left. Hence, I switched the order of the buttons and replaced the buttons to the right side of the bottom

Slide10.jpg
Slide11.jpg
傻眼-07.png

Potential Remedy

  • I moved the diagram of the steps in the process in the middle which allows users easy to see where they are in the payment process

  • Added a line between sections of review and validation.

  • Marked the entry space for typing CVV code.

  • According to the diagram above and conventions of a web page, the next step (page) should be right and the previous step (page) should be left. Hence, I switched the order of the buttons and replaced the buttons to the right side of the bottom
     

Slide12.jpg
Slide13.jpg
傻眼-08.png

Potential Remedy

  • I moved the diagram of the steps in the process in the middle which allows users easy to see where they are in the payment process

  • I added Obvious signs to let users know their payment has been succeeded 
     

Slide14.jpg

REFLECTION

Takeaways

  • The main takeaway I learned from this personal project is how to identify any problems associated with the design of user interfaces by heuristic evaluation

​​

  • Beside Conducting a heuristic evaluation of this website, We also think for each usability problem, describe the problem, the heuristic violated and a potential remedy. It is great training for leanring how to distinguish good from bad design

​​

  • Throughout the listing of heuristic evaluation following, Visibility of system status, Match between system and the real world, User control and freedom, Consistency and standards, Error prevention, Recognition rather than recall, Flexibility and efficiency of use, Aesthetic and minimalist design, Help users recognize, diagnose, and recover from errors. We can reevaluate our design whether to meet usability heuristics for user interface design during the development stage.

bottom of page