The company was planning for a version upgrade from the current Health Check 2.0. I as a UX Engineer was responsible to enhance the current version by refining the user interaction and the user interface.

This was a recruitment assignment when I was applying for a job at F-Secure back in 2011.

Initial Observations

After studying the user interface and interaction flow, I find no obvious flaws in the execution. Based on my experience as a user, the flow is natural. The linear progression actually works to its advantage and the whole interface is simple enough that no thoughts are required on the user front.

With that said, I do not think any changes is needed on the interaction flow. If anything, only enhancement required is on the aesthetic front to improve the use experience.

Flowchart

flowchartflowchart

Design Rationale

The main idea here is to produce a better and cleaner interface, while maintaining the corporate identity of F-Secure with the use of white, grey and tinges of blue as the main colour palette. The whole interface looks spacious with proper use of white space, line heights and typography. The end result is an interface which is comfortable to look at while not losing focus on the purpose of the application.

Before: Original design of F-Secure Health Check

After: Proposed design of F-Secure Health Check

Of particular note is the green bar near the top of the interface. This bar shall change colour based on the status of the health check: green for protected/safe; yellow for warning; red for insecured/unsafe; grey for others. On a laptop screen of 1366 x 768, the new interface size is 780 x 516, which is the same as the current version. I retain the size as it fits perfectly on a monitor screen of 800 x 600, a commonly accepted minimum resolution requirement in 2011.