Website Interface Redesign

  • Website Interface Redesign
  • In this project, my goal was to improve a company's user interface and overall appearance.
    The company's header has built up many features over time, but it lacks focus and contains unnecessary information that clutters the interface.

    I reduced clutter and counter intuitive interactions that the previous interface had. I tried to highlight important information by creating simple icons and hiding functions that the average user wouldn't need at all times.  I also focused on improving iconography and the overall layout so the interface appears visually consistent and pixel perfect. 
  • Website Interface before re-design
  • Re-designed website interface
  • Changed the appearance of the header by giving more three dimensional look. Along with the new appearance of the menu button when it is selected, changed the look of the drop down menu when it is extended.
  • Took out the Tag button on the header to keep the head menu with the most frequent functions. Instead, enhance the search funtion with several different search options for users to choose from.

    Also, brought down the File tree under the tiltle menu to give more breathing room for the interface. Re-arranged the “view” and “sort” functions by adding new icons and changing the layout.
  • Created the Folder option icon next to the other frequently used functions. Changed the contents of the function by taking out the redundant function (create a new folder) from the extended option menu. Users can choose desired function by clicking the drop down arrow button.
  • Frequently used functions (create a new file, create a new folder) are made into simple icons. Additional options can be seen when the user clicks the drop down option arrow.
  • When mouse over the icon, a brief description of the fuction appears on the top.