Amir S. Hamer

Touch of Modern.com is an e-commerce service founded by Dennis Liu, Jonathan Wu, Steven Ou, and Jerry Hum. It specializes in selling luxury goods aimed toward men ranging from modern home appliances, electronics, jewelry & fine art. My challenge was to optimize their desktop website UI and UX which was lacking in usability and ease of navigation. This was done through the use of simple design principles challenging and resolving the dichotomy of form vs function. Through the methods below, the use of S.W.O.T. frame-working (list of Strengths, Weaknesses, Opportunities and Threats) helped to analyze many of the strengths and weaknesses of the site's UI and layout design.

Regional & Geographic Data: In knowing the data regarding where consumers interact with the online retailer (per country, etc) one can determine what languages to format the site's layout around. For example, in the United States text layout will read from left to right. For a viewer in the U.A.E. text layout will read from right to left to accommodate for Arabic script to be read. Icons and site links can also be adjusted accordingly to better suite right-to-left reading ergonomics.

Age Demographic Data: Through learning about the age demographic for Touch of Modern consumers one can deduce what techno-cultural factors influence their interaction with the online retailer.

Conclusions: The solution is to introduce a navigation index that is quick & easy to access. To do so is relatively simple and yet functionally this asset addition will significantly increase accessibility and maneuverability around the site.

Stylistic Appeal: Sophisticated, sexy, sport, industrial & nature related themes comprise many of the visual elements to Touch of Modern's retail line. The design for the navigation bar should seamlessly blend into the brand's stylistic elements, supporting them and not detracting from them.

The final product is this: A prototype navigation bar that does just that: encouraging the brand's stylistic vibes to continue being present. The navigation bar created is implemented in this gif simulation that would resolve the problem of unorganized information hierarchies. This is especially useful for finding items that otherwise would require lots of site meandering to find.

The navigation bar is meant to serve through its presence on desktops, tablets, and mobile a like as it is a multi-platform asset. In addition, a fluid layout will allow it to expand or contract in size depending on the length of the screen it is presented on.

Above: The navigation bar presented on a tablet device

Adding the option to search for an item via a type & search command will also optimize finding particular products of interest for users. This option too will be present across desktop & mobile platforms.