Morningstar
Direct Lens, a new section of Morningstar Classic: new flows and interactions to create investment portfolios and add holdings, with a fresher look that doesn't disrupt the classic version. Direct Lens, una sección nueva de Morningstar Classic: nuevos flujos e interacciones para crear portafolios de inversión y agregar holdings, con un look renovado que no rompe la versión clásica. Morningstar Classicの新セクション「Direct Lens」。投資ポートフォリオの作成と保有銘柄の追加のための新しいフローとインタラクションを、クラシック版を損なわない新しいルックでデザインしました。
What was the project about?¿De qué se trataba el proyecto?どんなプロジェクトだったのか
Direct Lens was a new section of Morningstar Classic. The platform still had a very 2000s format: practical, but with so much information that some settings had become obsolete. On top of that, Morningstar was migrating to a new design system and the investment portfolio hadn't been updated yet. Most of my work was developing new flows and interactions to create investment portfolios and add holdings, together with the design team in Chicago and Colombia. User interviews helped us focus on the most essential actions when investing, so those would be the first thing we updated. Direct Lens era una sección nueva de Morningstar Classic. La plataforma todavía tenía un formato muy de los 2000: era práctica, pero había tanta información que algunas configuraciones se habían vuelto obsoletas. Además, Morningstar estaba migrando a un nuevo design system y el portafolio de inversiones aún no estaba actualizado. La mayor parte de mi trabajo fue desarrollar nuevos flujos e interacciones para crear portafolios de inversión y agregar holdings, junto al equipo de diseño de Chicago y Colombia. Las entrevistas con usuarios nos ayudaron a enfocarnos en las acciones más esenciales al invertir, para que eso fuera lo primero que actualizáramos. Direct LensはMorningstar Classicの新しいセクションでした。プラットフォームはまだ2000年代らしい作りで、実用的ではあるものの情報量が多すぎて、一部の設定は使われなくなっていました。さらにMorningstarは新しいデザインシステムへの移行中で、投資ポートフォリオはまだ更新されていませんでした。私の主な担当は、シカゴとコロンビアのデザインチームとともに、投資ポートフォリオの作成と保有銘柄の追加のための新しいフローとインタラクションをつくることでした。ユーザーインタビューによって、投資における最も重要な操作に焦点を絞り、それを最初に更新することができました。
What we had to solveLo que había que resolver解決すべきこと
A 2000s interfaceUna interfaz de los 20002000年代のインターフェース
The platform was practical, but its look and structure felt dated next to modern investment tools.La plataforma era práctica, pero su look y su estructura se sentían viejos frente a las herramientas de inversión actuales.実用的ではあるものの、見た目も構造も最近の投資ツールと比べて古く感じられました。
So much information it went staleTanta información que se volvía obsoleta情報が多すぎて形骸化
So many columns, sections and settings that some were no longer used and only got in the way of the essential tasks.Tantas columnas, secciones y configuraciones que algunas ya no se usaban y solo estorbaban en las tareas esenciales.列やセクション、設定があまりに多く、使われなくなったものが重要な作業の妨げになっていました。
Left out of the migrationFuera de la migración移行から取り残されていた
Morningstar was moving to a new design system, but the investment portfolio hadn't been updated yet. We had to decide what to migrate first.Morningstar estaba migrando a un nuevo design system, pero el portafolio de inversiones aún no se había actualizado. Había que decidir qué migrar primero.Morningstarは新しいデザインシステムへ移行中でしたが、投資ポートフォリオはまだ更新されていませんでした。何から移行するかを決める必要がありました。
What we asked, what we learnedQué preguntamos y qué aprendimos何を聞き、何がわかったか
Before redesigning, we talked to users to find out which actions really mattered when investing, so the migration would start there.Antes de rediseñar, hablamos con usuarios para descubrir qué acciones realmente importaban al invertir, y que la migración empezara por ahí.再設計の前にユーザーと話し、投資で本当に重要な操作を見極めて、移行をそこから始めるようにしました。
Interview guideGuía de entrevistaインタビューガイド
- Walk me through the last time you built or updated a portfolio. Where did you start?Cuéntame la última vez que armaste o actualizaste un portafolio. ¿Por dónde empezaste?最後にポートフォリオを作成・更新したときの流れを教えてください。どこから始めましたか?
- Which tasks do you do every day, and which only a few times a year?¿Qué tareas haces todos los días y cuáles solo unas pocas veces al año?毎日行う作業と、年に数回しか行わない作業はそれぞれ何ですか?
- Which columns, sections or settings do you never use?¿Qué columnas, secciones o configuraciones nunca usas?まったく使わない列、セクション、設定はありますか?
- What's the most frustrating part of adding or editing holdings?¿Qué es lo más frustrante de agregar o editar holdings?銘柄の追加や編集で、最もストレスを感じるのはどこですか?
- How do you check a portfolio is right before sharing it?¿Cómo verificas que un portafolio está bien antes de compartirlo?ポートフォリオを共有する前に、内容が正しいことをどう確認していますか?
- If you could change one thing tomorrow, what would it be?Si pudieras cambiar una sola cosa mañana, ¿cuál sería?明日ひとつだけ変えられるとしたら、何を変えますか?
Key insightsInsights principales主なインサイト
A few actions do most of the workPocas acciones hacen la mayor parte del trabajo少数の操作が作業の大半を占める
Creating a portfolio, adding and editing holdings, setting dates and weights, and saving. Everything else was occasional.Crear un portafolio, agregar y editar holdings, definir fechas y pesos, y guardar. Todo lo demás era ocasional.ポートフォリオの作成、銘柄の追加・編集、日付とウェイトの設定、保存。それ以外はたまにしか使われませんでした。
Clutter costs timeEl ruido cuesta tiempo情報の多さが時間を奪う
Many columns and settings went unused. Users wanted to hide what they didn't need instead of scrolling past it.Muchas columnas y configuraciones no se usaban. Los usuarios querían ocultar lo que no necesitaban en lugar de pasar por encima.多くの列や設定が使われていませんでした。ユーザーは不要なものをスクロールして飛ばすより、非表示にしたいと考えていました。
Confidence comes from seeing the resultLa confianza viene de ver el resultado結果が見えることで安心できる
They wanted to preview changes and their impact before saving, without touching the original portfolio.Querían ver los cambios y su impacto antes de guardar, sin tocar el portafolio original.元のポートフォリオに触れずに、保存前に変更内容とその影響を確認したいと考えていました。
Familiarity mattersLo familiar importa慣れ親しんだ操作が大切
Long-time users relied on the classic layout. The new look had to feel familiar, not like starting over.Los usuarios de siempre dependían del layout clásico. El look nuevo tenía que sentirse familiar, no como empezar de cero.長年のユーザーはクラシック版のレイアウトに頼っていました。新しいルックは、一からやり直すのではなく、なじみのあるものに感じられる必要がありました。
Decision: the essential portfolio actions became the first part of the product migrated to the new design system.Decisión: las acciones esenciales del portafolio fueron lo primero que migramos al nuevo design system.決定: ポートフォリオの重要な操作を、新しいデザインシステムへ最初に移行する対象にしました。
How I designed for dense dataCómo diseñé para datos densos膨大なデータのためのデザイン
Moderated usability testingUsability testing moderadoモデレート型ユーザビリティテスト
I ran remote moderated sessions: users showed how they worked in the classic Morningstar Direct while we tested the new prototype in Figma, such as searching and exploring data points by category. That showed us where they got stuck and which sections and columns they didn't need.Hice sesiones moderadas remotas: los usuarios mostraban cómo trabajaban en Morningstar Direct clásico mientras probábamos el prototipo nuevo en Figma, como buscar y explorar data points por categoría. Así vimos dónde se trababan y qué secciones y columnas no necesitaban.リモートでモデレート型のセッションを実施しました。ユーザーにクラシック版のMorningstar Directでの作業の仕方を見せてもらいながら、Figmaの新しいプロトタイプ(カテゴリ別のデータポイント検索・閲覧など)をテストしました。これにより、どこでつまずき、どのセクションや列が不要かがわかりました。
Wireflows & user flowsWireflows y user flowsワイヤーフロー & ユーザーフロー
I mapped the flow to create a portfolio and add holdings step by step, including every decision point (entry dates, data validation, saving as a new portfolio), first as a user flow and then as a wireflow with the screens.Mapeé paso a paso el flujo para crear un portafolio y agregar holdings, con cada punto de decisión (fechas de entrada, validación de datos, guardar como nuevo portafolio), primero como user flow y después como wireflow con las pantallas.ポートフォリオ作成と銘柄追加のフローを、各分岐点(エントリー日、データの検証、新規ポートフォリオとして保存)を含めて一歩ずつ整理しました。まずユーザーフローとして、次に画面つきのワイヤーフローとして作成しました。
Design system editsAjustes al design systemデザインシステムの調整
I adapted the components that carry the data: table cells and headers, multi-selection, row numbers, the filter panel and the dataset menus, keeping them consistent with the classic version.Adapté los componentes que muestran los datos: celdas y encabezados de tabla, multiselección, números de fila, el panel de filtros y los menús de datasets, manteniéndolos consistentes con la versión clásica.データを表示するコンポーネント(表のセルとヘッダー、複数選択、行番号、フィルターパネル、データセットのメニュー)を、クラシック版との一貫性を保ちながら調整しました。
The solutionLa soluciónソリューション
A Portfolio Editor inside Direct Lens to create investment portfolios and add holdings: entry dates on the side, holdings with their ISIN, inception date and weight, a draft you can compare with the original, and analysis that updates as you build. When the portfolio is empty, the screen tells you what to do first. Less noise on screen (unneeded columns and sections can be turned off) and data insights with colors and shapes, all within a refreshed look that still feels like Morningstar Classic. Un Portfolio Editor dentro de Direct Lens para crear portafolios de inversión y agregar holdings: fechas de entrada a un lado, holdings con su ISIN, fecha de inicio y peso, un borrador que se puede comparar con el original y un análisis que se actualiza mientras armas el portafolio. Si el portafolio está vacío, la pantalla te dice qué hacer primero. Menos ruido en pantalla (las columnas y secciones que no se necesitan se pueden desactivar) e insights de datos con colores y formas, todo dentro de un look renovado que sigue sintiéndose como Morningstar Classic. Direct Lens内のPortfolio Editorで、投資ポートフォリオの作成と銘柄の追加ができます。サイドにエントリー日、銘柄ごとにISIN・設定日・ウェイトを表示し、下書きを元のバージョンと比較でき、作成中に分析が更新されます。ポートフォリオが空のときは、最初に何をすべきかを画面が案内します。不要な列やセクションはオフにでき、データのインサイトは色と形で表現。刷新されたルックでありながら、Morningstar Classicらしさを保っています。
