Tianyi Shi

Focal.System Web Redesign

Focal System Web Resign

Focal. Systems is a startup company which aims to provide a service to clients like grocery stores which claims to increase sales by improving customer experience through ease of navigation a store and finding a real-time updated catalogue of the products in the store, as well as improve the maintenance of the store product supply to avoid stock outs by providing real-time data through imagery and customer trends and preference.


Problems with Original Website

1) lack of information and explanation of its service/product 

2) unorganized layout and text 

3) vague, unclear terms and elements  

4) poor visual design 

Screenshots from the original website



Screenshots from original Focal.system website


Redesign Objective

We chose to redesign Focal System’s website which supplies basic information about the service. The two most important part of visiting this website are 

1) understanding the product/service Focal System is providing, and

2) contacting the company for either 

                        a) setting up the system or 

                        b) for possible career. 

To achieve this, we sought to make adjustments to navigation and visuals. 


Paper Model

We made paper models for rapid prototyping purpose.





Data collected from two testers with aid of an eye tracker.

Red (most eye attention) ---------------------------------------------------------------------------- Blue (least eye-attention)




Our navigation featured a reordered header-navigation to make better sense to the user. Some labels were renamed, such as “About Us” to “Our Team” due to initial confusion over product/service description or team. 

Our changes sought to improve the average user’s understand and short attention span, we felt it was necessary to condense (word content), decrease (text size), and re-arrange (layout). The consistent colour palette and alternating white/grey bars for chunks of text help the readability and organization of the page.


Our Team Page

For "Our Team" page, we reorganized the profile layout along with the bio. To space the space, we did not include display of bio directly, but user can access to this information by clicking on the profile picture of the person. 


Career Page

we felt it was necessary to differentiate sending information via Careers for a job application and for requesting additional information for a product/service, so the interface and method of accessing the interfaces are different. In each instance, a popup appears immediately after every successful submission to inform the user of their valuable input.

Please feel free to check our HIFI prototype: Focal.Systems.Redesign

Thanks for viewing!


This project is done by Tianyi Shi, Tiffany Hui, Sharon Moon and Yong Wang