C&E Website

Top 5 Skills Improved

The project is to re-design the website of Commodities and Energy Group (C&E) at Morningstar, Inc. I'm the product manager for the website, the content strategizer as well as the UX designer.

Challenges

The group's old website has outdated UI and architecture

Difficult to update content on the website

Part of the old website has updated UI from an innovation sprint, and the rest remain the same, and therefore, different pages have inconsistent design, layout, and experience

Lack of resource and support on site development

Examples of the old website

Objectives

Easy to use. Users should be able to navigate and look for needed content without guidance

Useful. The website should provide what users are looking for

Consistent. Design on all pages should follow same structure and pattern

Convey business values

Responsive. Mobile compatible

Easy to maintain. Compatible with AWS S3 services for content storage and update

Follow Morningstar design system

Simple and straightforward for development

Research

I met with stakeholders of the Commodity and Energy business, and they are data owner, research owner, vendor management owner, product owners, server administrator and sales. Each validated the content they would like to have on the website, and confirmed what materials are mostly asked for by clients. We also discussed content consolidation and wording strategy. For example, previously we have a single page with all product user guides, but the documentation sometimes also exists in individual product pages. It confuses users on where to get the correct piece of documentation. We decided to get rid of the single documentation page and only store documentation in individual product pages. We also decided to call the general product section "Solutions", because we want to highlight the data services we provide from Amazon Web Services Platform.

​

Website Architecture

Design Iterations

I did multiple iterations of designs in Sketch, and made interactive mockups in Invision to test. I also had one on one sessions with 10+ users to observe their reactions and collect feedback. Since most of the designs are visuals, I would usually give them multiple visuals to compare and ask them what they prefer and why.

Color Palette Matches User Profile

Color palette of the front page is extremely important because it serves as the first impression. The colors have to match general Morningstar style, which is light color transients. However, C&E industry is mostly male dominated, which requires the colors to be stronger and firmer. Below are several examples of color palette I tested, and the red/blue combo won.

Front Page as the First Impression

Front Page is the most important page for new users because it not only describes the business, but also needs to help users get to what they need. The front page structure includes data, research, product, security and tech, and support sections, and these sections correlates to the menu on the top.

Mockups of Different Color Palettes

World Commodity Map Banner

​

The top banner is the first thing that catches people's attention. The banner design is a world map with icons of different commodities and energy products, like natural gas, gold, wind power and wheat in different parts of the world. It suggests that C&E has huge data coverage for products traded internationally.

Responsive and Mobile Compatible​

​

The website needs to be responsive on mobile phones as well as on different screen sizes. The front end developer and I spent a lot of time together QAing and adjusting parameters.

Mockups of Front Page Banner

Mockup of Mobile Site

Page Templates

​

According to research, most users go to the website to download installation file and access user guides. Therefore, I created a simple template for all the product pages to follow, which includes the four following sections below:

​

Banner with short blurb

Product introduction paragraphs

Product images

Product documentation

AWS S3 File Storage

​

All files are stored in an Amazon S3 bucket. I worked with the front end developer to categorize file names and folders, and to create wiki to ensure efficient content update process.

Mockup of Page Template

Design in Production

The website is in production. Check it out by clicking the link or picture below.

Key Takeaways

Even though most of my time was spent on creating UX/Visual mockups, testing designs and working with the front end developer, the most difficult part of this project is still communication. Since the website is not directly related to revenue generation, it takes time to on board all the stakeholders to work on this project together because not everyone is convinced with the impact of effective front end design. I learned to put myself in their shoes to help them visualize the potential of a better site and how it would benefit their work. The result is positive as noticeably more sales and relationship managers use the website in their client communication. This experience taught me to believe in the power of design, as well as the importance of effectively communicating that power to people not from the design field.

​

Another takeaway is from working on the front end development. Making sure the website is responsive on different screen sizes is a more complicated process than I expected. Initially I only created designs for 1280 and iPhone resolution for the front end developer, which turned out to be far from enough. We had to determine 5 key interface resolution/sizes and then adjust design parameters on each of them. This project taught me to be comprehensive when it comes to design specifications for visual designs because any small detail could impact the final experience.