Jenny Wang's Portoflio Website

C&E Website

Top 5 Skills Improved

prototyping

content strategy

testing

UX design

visual

 

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.

Invision Interactive Mockup Link

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.

www.morningstarcommodity.com

Front Page19.png

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.

Send me a message!