Mabel Chan-Andrew

The Challenge

Designed the interface for Buyside Investors to find, save, and view all new Muni Issuance. Includes ability to save filters, use the datepicker to see specific periods, sort and drill down charts and graphs of deal activity, desktop notifications for new deals and available via web and mobile devices.

The Research

Story mapped the workflow of the Investor personas. Mapped out the interactions among the portfolio manager, analyst, trader.

Analysis of  current Muni UI and other competitive sites (including Bloomberg). Gathered critical features of the Muni deal evaluation process, major elements from the competitive UI analysis, and persona workflows. 

The Process

Whiteboarded the workflows

Using a design system in sketch, applied major components and features to wireframes. Worked closely with top management, stakeholders, developers to create polished wireframes of the entire workflow.

The Development

Supervised the building of the prototype with a predetermined script for demos to clients. Tested features in hallway testing using Lookback.

Worked with the development team to ensure the design is followed and the workflow is correct.

Result

Responses from real users of the app - “It’s like you were inside my head”, “This is slick and clean. Well done.”

The Challenge

Move and improve a feature from one Fixed Income application to another. This feature allows Sales to claim the sales credits for bringing investors into a deal. It involves both the Sell side and Buy side. It needed a full UX analysis to create the updated UI.

The Research

Fully examine the current feature through Project Manager and Subject matter experts' walkthroughs.

Understand the workflows of the Sales (Buyside) and Syndicate (Sell side) Personas.

Road-mapped the feature into the new application.

The Process

Worked through all the critical features with balsamiq workflows. Whiteboard several workflows.

Worked closely with actual users of the application, top management, and dev teams through months of iteration of wires for both the syndicate and sales side.

Created high-fidelity wires using the design system and adding new patterns. Presented to external clients and users of the feature.

Created 3 different workflows for 3 Investment banks that are specific to their current workflow and technical limitations.

The Development

Follow up iterations with dev and product managers to validate the design and workflows. 

The Challenge

Created a new feature called "Save Views" of the Fixed Income Application which became a pattern in our design library. Reused and improved the pattern in the Municipal App through user testing.

The Research

The Fixed Income Application needed a way to save different views (column selections) of the Masterbook when the Syndicate is monitoring orders. The main ask is to be able to select these columns and a quick way to save and access these views.

The Process

Whiteboard the workflow.

Created wireframes to show the user choosing the columns, saving the view, editing/removing the view, and setting a default view. Tried to think of every possibility including preassigned (and non-editable) views. This was further refined visually and is currently part of our design library.

The same pattern was used and further developed to suit the Muni Save Filters feature. This pattern was user-tested and validated. It is different but the previous task of defining the pattern for Fixed Income helped us get to the current pattern for saving a view or filter.

The Development

A prototype was created for testing and validating the wireframe workflow. 

We use Lookback.io for User Testing. We conduct testing within the office for general usability and clients for users with domain knowledge. These tests can be conducted remotely, self-guided, or in person. Tests are conducted with a script for a specific use case or workflow, sometimes A/B tests are conducted as well. We generally end the test with a survey that gives us quantitative as well as qualitative results.

In October we conducted a User Testing Event where we invited clients to test some of our prototypes in production and some in concept stages. Focus groups were also conducted to gain feedback from the clients concerning our products. I led the UX side of the event. In the 2 months prior, I created tutorials on User Testing and Focus Groups for the staff, set up weekly check-ins, set up internal testing to demo the application, hedge any errors and allow for practice for the UX staff.

Marketing and graphic design experience spans over 15 years.

Samples Shown:
1. Complete marketing campaign for “RatingsDirect” for Standard & Poors; which included a brochure, poster, logo on promotional materials, website.

2. Complete marketing campaign for “Dailysoup”, a soup company in NYC. Designed labels, business cards, brochures, postcards, menus, website.

3. Create an interactive CD-ROM for Standard Chartered’s Investment Advisory Group.

4. Complete corporate identity for Code 360 which included the logo, stationery, and website.

5. Marketing materials for Patiolife which included cards, full page ad, and email campaigns

6. Corporate Identity for SJL Attorney Search which included the logo, brochure, business cards, and stationery

7. Designed and printed a book for Xentury, a real estate development company.

The Brief

We created the original Irving & Fine E-commerce site in 2011. It was what they wanted at the time and has since become outdated in terms of look & feel. They were initially more bohemian but now wants to be more high-end and sophisticated. A new look was required for them to reposition themselves. Knowing that M Interactive understands high-end marketing from the work they previously did at London Fog, Irving & Fine asked for a redesign.

Our Solution

Our approach was to simplify the site and use what we had previously created in WordPress instead of building the whole site from scratch. We would basically just give it a facelift. Knowing that photography would be key to the site, we worked hard to ensure that the brand is prominently displayed and the site is built around the clothes, not busy itself with unnecessary elements. Our persona is a wealthy & sophisticated woman with an unconventional style. Her shopping journey would include getting a feel of the company by looking at the Travel Logs, About, and Press. We ensure that the user knows that we are advocating a lifestyle brand. The lifestyle sets the brand.

The Result

The site launched to much acclaim for its simplicity, sophistication and beauty. The lifestyle brand was very high-end and unique. Unfortunately, it did not last and the company has since closed its doors.

The Brief

The RX club is an award show for the best in pharmaceutical advertising. At inception, the winners of their prestigious award were presented in a gallery where it had an opening and the work stayed up for a week. Subsequently, the winners will go into a book available for purchase every year. About 15 years ago, with the predominance of the World Wide Web, they wanted to be able to display the winners online as well since it would reach a wider audience and can exist in perpetuity for reference. They had several requirements. 1) The need to follow a strict timeline for all the phases of the work. 2) The development would allow for automation in many areas where updating yearly would not require much time or effort 3) There will be a new design campaign every year to call for submissions. 4) A tight budget would allow for maximum ROI.

Our Solution

We created a strict timeline for deliverables, design the site to include a CMS, brain-stormed ideas for marketing, and managed the vendors’ involvements. The process starts with the “Call for Entries” where we make the announcement on the site and through an email campaign. Then the advertising agencies can login and upload their entries. The printed entries would be sent to the rx club themselves since a whole packaged campaign may be involved. The online and printed entries are then accumulated to be reviewed by judges at the next step of the process. The winners are selected and kept a secret until opening night in November. The winners will be sent a winning email but will not know if they’ve won a Gold, Silver or Award of Excellence until the show. For our part, we would have sent emails soliciting entries, accumulated entries on the server, created a portal for judges to view entries, sent the winners a generic winners’ email, displayed the winners on opening day, and sent the files to the printers to print the winning plaques. The development required was custom using Javascript, HTML 5, JQuery, etc. but easily updated by our team.

The Result

We’ve been working with the RX club since the beginning at 15 years ago. The site went through 3 major revisions and each time we rebuilt the platform with more updated technology and design. The process is smooth and clockwork. Everyone looks forward to the new campaign every year and of course seeing if they’ve won an award. You can see the current site here.

The Brief

Chubb reached out to M Interactive for a user experience and interaction analysis and design for the consumer side of their business. The new Chubb site would need to be user friendly, customized for their targeted audience, and market their products more efficiently. They would also need a modern approach to the site in terms of not only the design but the outdated use of flash technology, which was not viewable on mobile devices. Finally they needed a responsive website so that it was accessible from any device.

Our Solution

Our initial approach was to set up discussions with the staff on the site stats and input they gathered from the current users. Based on the responses, we analyzed the demographics of the users and created a user persona. We discussed the percentages that were spent on different parts of the site, where the user needed main access to, and created paths they would take for different purposes. Finally, we made sure our storyboard aligned with the main goals of the stake holders and the users.

Some examples of our findings were that the users were in the middle to higher age/income brackets. They were mainly there to gain access to their accounts, some wanted to look at the products and services available, and some just watched the videos. Very few went to parts of the site that were too text-heavy.

In our design analysis, we made sure all items that were most frequently used were positioned on the prominent top left side. We also made sure the products and the services were distinguishable and easy to navigate. We added many call-to-action items for marketing purposes. And of course, videos were featured prominently on each page.

We started the design process by creating a wireframe in Balsalmiq for the positioning of all elements before design. This ensures that the navigational elements and positioning of all elements were tested before the client can be distracted by design elements. Two different designs in both desktop and mobile versions were then presented based on the wireframes. Chubb chose one to work with. We went through several revisions until the final design was approved.

The design was tested by their users and found to be easy to use. M Interactive then provided the final documents that included a template in Photoshop with a set of website corporate guidelines to use.

The Result

The site is responsive and works for desktop, tablet and mobile screens. It is clean and modern with marketing potential. The final Chubb site pretty much followed the design we created. Chubb was very happy with the results. The new look can now be applied to the rest of their business sites at Chubb.com.

The Brief

In 2009, I had an idea that came from having my first child. The abundance of used "stuff" plus the idea of going "green" started me on journey of finding a way to dispose of this stuff in an environmentally conscious way and get usable stuff in return. The only way was to "trade" them in an open market that is bigger than my circle of friends. I then created the site with my own funds since I was a professional website builder with connections to developers and social media. 

Our Solution

Create a simple site that uses points instead of cash to swap for things you need. I incentivize the user with 20 free points to start trading. All they had to do was upload photos of their "stuff" and assign a "cost" in points. Once they received their points, they can use that to buy other stuff. It was created strictly as an e-commerce site.

Marketing initiatives included newsletters, a flash demo that illustrates how to use the site, and videos to pique interest around holidays. We also created a Facebook page with the same content linking to a Twitter page. 

The Result

The site gained a lot of enthusiasm and was written up in Time Out New York Kids and Yahoo. There were a some trades but it didn't manage to gain a larger audience because of my limited funds in marketing and time investment in managing this site and run my web development company. There were no plans to raise more funding.