web-design-csop.jpg

Web Design - CSOP

TL;DR

I was commissioned to redesign CSOP Asset Management's US website, which requires a fresh user interface with eye-catching graphic, as well as an enhanced user experience that promotes natural and smoother interactions.

为CSOP南方东英公司重新设计美国站网站,包括全新的用户界面,以及改善网站交互体验。

My Role:

  • Analyze and revise information architecture of the current site while maintaining the integrity of information
  • Create new graphic elements based on company's style guide, enhance user experience by creating new user interface
  • Create clickable prototype for developers
  • Usability testing with teams

ESSENTIAL USER FLOW

Some of client's requests include:

  • Four "statement" page to show off company's core value and business
  • Redesign and/or some graphic elements to make the website visually appealing
  • Redesign the main navigation and footer
  • Adjust site information architecture so it makes more sense to user interaction

USER INTERFACE ANALYZE

Before creating any visuals, I took a good look at the current website, and decided what needs to be removed or changed.

homepage.jpg

original homepage

1. Main navigation needs to be redesigned, to accommodate additional categories that the client added. 

2. The modularized look makes the homepage very clean. However, information on the homepage needs to be organized better.

3. The footer takes a chunk of screen space, which produces unnecessary visual chaos. 

product-details.jpg

original product detail page

4. Could use better graphic and/or color scheme.

5. The original product display essential product information. These pages are very text heavy, and have a number of interactive elements that needs to be embedded into the webpage. However, information could be organized better for better readability.

education.jpg

original "Education" page

6. Secondary navatigation could be redesigned for better user interaction.

7. I also decide to redesign the clickable tabs on these pages, to give them a more unifying look.


DESIGN

My primary goal is to design a clean and easy-to-use website for the client. User interface should be fresh and pleasant to look at. Then I need to keep information integrity in check, and always put focus on the legibility and readability of text, graphs and other elements.
The color palette is selected based on the company's logo and identity - a darker blue that would work well with white text, as well as different shades of blue to create variety and contrast in color combination.
* All photos used in the design are purchased by the client.

Desktop View

Product Page With Statement

Product Overview Page

Local Navigation And Secondary Interactive Tab(s)

Drop Down Menu

News Overview Page

Product Detail Page

According to client's request, there's a few newly added page to the website, such as career, CSOP today, commentary, contact page and so on. Some selective screens...

Career Page

CSOP History Page

Smartphone View


TIMELINE

This project was completed in 7 weeks, including all meetings for information architecture, user interface, user experience design and so on.