Re-developing UI for Market Intelligence

1.2 Heuristic Evaluation of Existing Product

The Market Cycle Nowcasting web app is a data visualization tool for the management team of Munich Re to gain business insights. Users will choose different lines and applicable filters as input, and this tool will generate the corresponding line chart.

Before I joined the team, my team members had created an initial version of the Market Cycle Nowcasting web app. This version is functional but very confusing to use.

I first communicated with my team members to understand the purpose of the app and how it functions. Then I did a heuristic evaluation of this product.

Severity Rating

0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: fix if time is available
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, given high priority
4 = Usability catastrophe: fix this before product can be released

Besides the heuristic evaluation, I, as a novice user, was confused by the interface: What are the applicable filters for different lines? When I choose the filter, will it apply to both lines or one of them?

With my evaluation and questions at hand, I had a discussion with my mentor to prioritize the task and have a better understanding of the goal of this app.

After the discussion, we set the below tasks as the main goals of my redesign.

1. Establish a better visual hierarchy of the website and create a aesthetic and minimalist design.
2. Users should have the ability to choose different filters for individual lines, instead of choosing shared filters for multiple lines. By doing so, users will have greater extent of customization, which is consistent with the goal of allowing users to "explore" data.
3. Based on users' line selection, the web app needs to auto identify applicable filters of the selected line for users, instead of letting users decide.
4. Prevent users from choosing duplicate lines, help and documentation should also be provided to guide users fix the error.
5. Users selection need to be retained after they hit "submit" and the page is refreshed. Users should also have control to reset their selections to default (similar to an "undo" function).

1.3 User Flow

Below is the suggested user flow for error prevention.

1.4 Mockup

Basic Version

Once I have the user flow in mind, I created an interactive mockup in Figma to demonstrate my ideas to the team. I refined the mockup several times based on the feedback. Below is the final prototype I made for the basic version that achieved the goals of my redesign.

Goal #1: Better visual hierarchy, aesthetic and minimalist design

• Move the data visualization chart to the top.
  When users first come to the site, they will immediately know what they will get - A data visualization chart. Also, each time users hit the "generate" button, the page will refresh and scroll to the top. If the chart is put at the top, it will save users effort of scrolling down to see the result.
• Separate the default line and the two lines chosen by the users so users realize the difference.
• Put links to the documentation and the advanced version of app at the upper right corner for a more balanced visual.
  I originally planned to put the links at the top of the page so it doesn't interrupt the user flow, but my supervisor believes that putting links here is reasonable, because users won't noticed that they need the manual until they see all the selections on the left.
• More consistent alignment. All the filters are right-aligned, so the selection button is aligned and users don't have to cursor around to find the action items.

Goal #2: Allow users to explore the data

• Each line have its own set of filters.
• After discussion with my team, we decided that users will be able manipulate the default line to some extent as well. (Only the LOB filter is preselected and could not be changed.)
• Because of the existence of the default line, the other two lines become optional. Users can choose if they want to see data visualization of a single line or multiple lines.
• When users hover over the line options, the corresponding definition will also appear.

‍Goal #3: Enable applicable filter and filter options based on the line selection.

• Before users choosing any lines, the filters of the line will be greyed out. Our team had a discussion of whether we should leave the greyed out selection boxes or leave it blank. Our final decision is to keep the selection box because it provides people with information of what to expect. When selection boxes are greyed out, it gives people a hint to "Please select the line first".
• Once users choose a line, only applicable filters of the chosen line will be enabled, all the others will stay disabled and giving out the hint of "Not applicable".
• A collapsible element which contains the definition and formula of the chosen line will also appear. Users can toggle the definition on and off for better visual alignment.

Goal #4: Prevent users from choosing duplicate lines and help users fix errors.

• When users choose a duplicate line, an error message will pop up, and the generate button would be disabled to avoid further action.
• The error message will lead users to fix the error, there's also link to the instruction manual on the page. Once the error is fixed, users can continue.

‍Goal #5: Retain users' selection after page refreshes and allow reset to default.

• When users hit "submit", the page will reload to generate the data visualization chart. Users' previous selection will be retained for users to modify.
• Users can hit "Reset" at any time to bring the page to the initial status.

Advanced version

One nice to have feature that our team wants is to allow multiple, weighted choices for the LOB filter. Below is my approved mockup.

The advanced version still meets the goals mentioned above. But for the error prevention, it not only needs to prevent duplicate lines, but also needs to check if the entered weight is a positive number and if the weight total is one hundred.

• Each time users choose an option, a weight input will occur, with the average number as the default value.
• When users have more than one choices, they could double-click to cancel the selection, but if there's one choice left, double-click won't work.

• Error messages will pop up when the value is not a possible number or the weight total is not 100%.
• The "Generate" button will be disabled when there's any errors to prevent further actions.

1.5 Development

With the mockup and the style guide as a reference. I programmed the user interface for both the basic version and advanced version to create a minimum viable product. Both versions work with the backend smoothly to generate the graph. Languages used in the process are Javascript, HTML/CSS, and Python Flask.

(The final web app is for internal use only so general netizens couldn't access it.)

2. Homepage Redesign & Development

Once I'm done with the user interface redevelopment, I continued to work on the homepage redesign and development of Market Intelligence. The original homepage doesn't have a organized information architecture, so my goal was to create a responsive and functional web page with improved layout. I later made the homepage an editable template that could be used for future projects. This task took me 1 week in total.

2.1 Existing Product Critique

I started my project by evaluating the original homepage. The previous home page for Market Intelligence has two main issues:

1. Unorganized
   - Lack of visual hierarchy and content organization, all links are represented by cards and the order is random.
   - Missing navigation bar and footer across the site for the ease of use.
2. Inefficient
   - The banner image is taking too much space. Users need to scroll down to see the main content.
   - The previous homepage uses a template that has unnecessary elements, such as dark/light mode switch.
   - Every content is showcased with the card element, even the quicklinks.
   - Unnecessary landing pages causes extra clicks.
   - Redundant coding. Some codes could be linked instead of being typed out every time.

2.3 Mockup

Once the style guide was approved. I started re-organizing content on this homepage. I observed that all content on this page can be categorized into 3 categories: Market Cycle, Emerging Topics, and Client Intel. So this became the main criteria of my arrangement.

I created several versions of UI components in Figma, and had a series of discussions with the team. Below are the components approved by the team.

I added a consistent navigation bar across the website, so users could easily navigate to their desired part without scrolling or going back to the homepage. The website's name on the left takes users to the homepage. The tabs on the right are the 3 main categories and the contact. Under each main tab, there are links to subpages or to the quick link section on the homepage.

The original banner has the problem of taking up too much view height. And the separate website introduction paragraph also occupies some spage, causing the users to further scroll to get to the main content.

In order to fix this issue, my final solution is to condense the content, putting the banner image on the left and introduction paragraph on the right, which also includes links to the corresponding sections. Users could click these links for quicker access to the information, or they could click the downward button to avoid scrolling.

Originally, all the content are stacked and represented with cards. There's no specific order or visual hierarchy in the arrangement.

In my new design, I decided content to three main groups, each of them represented by a different color. Each card also has a colored badge, indicating which category it falls under.

To save space, quick links are not contained in cards. Users can click on the link to be navigated, or they could click on the information icon to show the collapsible and see the description of the link before accessing it.

A footer across all web pages is also missing in the original design. In my solution, I put contact info in the footer so users can access it on whichever page they are on.

The tags used to be in the main content is also moved to the footer, together with the logo, to create a more complete branding. At the bottom is a auto updated copyright claim to increase the credibility of the website: users feel more comfortable when they see the website is constantly updated.

2.4 Development

With the approved mockup as a reference, I coded a fully functional homepage with Python Flask, HTML, CSS, and JavaScripts. I also modified it to an editable template and created a documentation for future use.

(The final website is for internal use only so general netizens couldn't access it.)