Case Study

London Stock Exchange Group

Frameworks & App Framework Design

Explore
Case Study

London Stock Exchange Group

Refinitiv

Framework & App Framework Design

Product Strategy
UX Architecture
User Research
Competitior Analysis
Heuristic Evaluation
User Interviews
Interaction Design
User-Interface Design
Visual Design
Prototyping
Project Management

Summary

The contents of this page are derived from an official handover document I wrote (when I resigned), detailing a comprehensive list of major projects I was directly responsible for across multiple teams to define framework behaviours and patterns at the Platform and App level for the new flagship Workspace product (which will eventually replace the legacy Thomson Reuters Eikon platform).

It outlines to the viewer the types of projects I worked on at LSEG / Refinitiv, besides some of the ones highlighted as a separate case study within this portfolio.

Please note: many of the links provided within this document will no longer work, either due it being moved, deleted or inaccessible outside of the corporate network.

Background

Coming soon.

Team App Framework (throughout 2020)

  • App Framework & App Banners

    Original concepts:

  • Current concepts:

    • App Banners — ETP (Entity-Task-Parameter) Editing:

    • Multi-Entity Banners:

    • Auxilliary Panel (Framework-level side panel):

    • Compare / Peer Analysis:

  • Design Approach:

    • For each Design Sprint:

      • Katia B. (Product Owner), Giorgio V. (Product Design Director), Yooch Wan (Principal Product Designer), Prean P. (Principal User Researcher) reviewed hypotheses backlog and prioritised which hypotheses needed to be tested in a design sprint.

        They may include ones which were carried over from the previous sprint if the outcome from testing in the previous sprint wasn't conclusive.

      • For each hypothesis:

        • Not only designed the various potential solutions (emcompassing interaction Design, UI design and prototype creation), but also work with Product Owner to come up with example workflows for users to test against.
        • Prean P. (Principal User Researcher) handled all research-related activities (recruitment of users / testers, testing session preparations).

  • Design Sprint 1 — Spring / Summer 2020

    • Overall focus: Spatial Model
    • Objective: Test the Spatial Model Framework which will cover three core elements; App Banners, Cards and an Auxiliary Panel. Gather feedback on how users interact with and navigate using these components.
    • Product Designers: Giorgio V. & Mike A.
    • Prototyper: Mike A.
    • Design: Figma design file
    • Prototype: Figma design file
    • Research Documentation: Sharepoint

  • Design Sprint 2 — September 2020

    • Overall focus: Further explorations of navigational concepts, findability of content and tools, as well as editing and changing the focus of content in view.
    • Product Designer: Yooch Wan
    • Prototyper: Balazs M.
    • Researcher: Prean P.

    • Covering:

      • Active Selection & Concept of a "Universe"
      • App Banners
      • Cards
      • Auxilliary Panel (sidebar)
      • Related Content
      • Cards
    • Hypotheses & Notes: Figma design file > DESIGN SPRINT 2 - Hypotheses & Notes
    • Workflows for Prototyping: Figma design file > DS2 - Workflows for Prototyping
    • Axure Prototype: Requires access to corporate network via VPN or VDI - MAY NO LONGER BE AVAILABLE
    • Research Documentation: Sharepoint

  • Design Sprint 3 — October 2020

    • Overall focus: Content Display and Navigational Customisation via Aux. Panel.
    • Product Designer: Yooch Wan
    • Prototyper: Yooch Wan.
    • Researcher: Prean P.
    • Hypotheses & Notes: Figma design file > DESIGN SPRINT 3 - Hypotheses & Notes

    • Prototypes:

      • Design 1:

        • To test: Hypotheses 1, 2 & 3 — Global actions menu, most relevant content & tools
        • Prototype: Figma design file > → DS3 - 01 - Design 1 - Hypotheses 1, 2 & 3 - Global Actions Menu, Most Relevant Content & Tools

      • Design 2:

        • To test: Hypothesis 6 — Customised Overview pages, Aux. panel settings
        • Prototype: Figma design file > → DS3 - 02 - Design 2 - Hypothesis 6 - Customised Overview Pages - Aux. Panel Settings

      • Design 3:

        • To test: Hypothesis 6 — Customised Links to Content in Aux. Panel
        • Prototype: Figma design file > → DS3 - 03 - Design 3 - Hypothesis 6 - Customised Links to Content in Aux. Panel

      • Design 4:

        • To test: Hypothesis 4 — Research App, Entity focus & Filters
        • Prototype: Figma design file > → DS3 - 06 - Design 4 - Hypothesis 4 - Research App - Entity Focus & Filters

      • Design 5:

        • To test: Hypotheses 5 & 7 — Predefined page content based on user roles
        • Prototype: Figma design file > → DS3 - 04 - Design 5 - Hypotheses 5 & 7 - Predefined Page Content based on Roles

      • Design 6:

        • To test: Hypothesis 7 — Predefined page content based on user roles
        • Prototype: Figma design file > → DS3 - 05 - Design 6 - Hypothesis 7 - Predefined Page Content based on Roles

      • Prototype selector for user testing sessions:

    • Research Documentation: Sharepoint

  • Key Outcomes so far:

    • Cards are a way for users to navigate
    • No clear difference for users in determining the separation between "Content" (the navigational links within aux. panel) and "Tools" section, although one user clearly understood the design intent and saw value. Most users found it difficult to distinguish as some apps offering "content" are also "tools".
    • Traders — Minimise clicks! (menus) etc.

Single-Entity & Multi-Entity App Banners & Auxilliary Panel

  • Product Designer: Yooch Wan
  • Previous Product Designers: Mike A. & Giorgio V.
  • Researcher: Prean P.
  • Visual Designer: Chris B.

  • General info — on Sharepoint:

    • App Framework Team - Sharepoint Area: Redacted
    • Workspace Conceptual Model: Redacted
    • Navigation: Redacted
      • Desk Research on Navigation: Redacted
    • Setting the Universe & Signposting: Redacted

  • Visual Designs (Banners & Aux. Panel):

  • Multi-Entity App Banner Designs — for initial development — 07-Oct-2020

    • Agreed by Katia B. (Product Owner) and Christiana A. (Business Analyst)
    • Staged approach — classified as a POC (Proof-of-concept)
    • Designs: Figma design file > Multi- Entity App Banners & Aux. Panel > see top-left of canvas (agreed design for development - Oct 2020)

Responsive Behaviour & Responsive Breakpoints

  • Product Designer: Yooch Wan

  • Responsive Framework — Illustration

    • A quick visual explainer to design team how visual appearance and content ordering and layout on an app on desktop could be rendered in a different order on a mobile device, based on content ordering in code. This is a major consideration when designing responsive desktop apps and design intent must be articulated to dev teams.
    • File: Figma design file > Responsive Framework - Illustration

  • Responsive Design — Breakpoints — Research & Final Specs

    • Research, analysis & report author: Yooch Wan
    • How do screen resolution, viewport and mobile device sizes affect the way we design financial apps within Refinitiv Workspace?
    • Objective: Recommend the best breakpoints for responsive design in Workspace.

    • Covers:

      • Understanding viewports

      • Screen resolutions

        • Analysing raw usage log data
        • Most used
        • Multiple monitor usage

      • Mobile device considerations

        • Resolutions vs. Viewports

          • Common mobile screen resolutions & viewports
      • Common Layout Specs against standard monitor screen resolutions
      • Analysis of breakpoint specs in other Design Systems

      • Analysis of Workspace data:

        • App sizes
        • Distribution analysis — breakpoint widths
      • Proposed breakpoints for Workspace apps
      • Breakpoint analysis by Workspace app

    • Documents:

      • Original Keynote: Redacted

        • Sharepoint path: LSEG Design > Documents > Products & Platforms > Workspace (was Eikon) > App Framework > 2_Halo Design System > Breakpoint - Screen Resolutions - Viewports > Responsive Design Breakpoints.key
      • PDF: View document

    • Supplemental Content

      • Covers:

        • Analysis of Snowflake log files

          • Application viewport widths and heights
          • Determining minimum, average, maximum widths and heights of apps
        • Illustrations showing app viewports against common screen sizes
        • Evidence in log file(s) for app usage on a monitor screen in portrait orientation
      • Document (PDF): Redacted

Team Pod A — Combined Framework & App Framework teams (throughout 2021)

  • Design Sprint 1 — January 2021

    • User Journey 2 — Morning Overview

      • Product Designer: Yooch Wan (Principal)
      • Visual Designer: John W. (Principal)

      • Design Files: Figma design file > Pages:

        • Journey 2 - Morning Overview - YW & JW
        • Journey 2 Prototype
      • Prototype: Figma

    • User Journey 4 — Compare / Peer Analysis

      • Product Designer: Yooch Wan (Principal)
      • Visual Designer: John W. (Principal)

      • Design Files: Figma design file > Pages:

        • Journey 4 - Compare / Peer Analysis - YW & JW
        • Journey 4 Prototype
      • Prototype: Figma

  • Design Sprint 2 — February 2021

    • User Journey X2 — Opening up a quick-browse option when monitoring

      • Product Designer: Yooch Wan (Principal)
      • Design File: Figma design file
      • Figma File Owner: Lawrence M.

  • Design Sprint 3 — March 2021

    • Editing Tasks, Entities & Parameters — Unified Signposting & Search — Initial Concepts & Explorations

      • Product Designer: Yooch Wan (Principal)
      • Design File: Figma design file > Editing Tasks, Entities & Parameters - Unified Signposting & Search - YW
      • Figma File Owner: John W.

  • Design Sprint 4 — April 2021

    • Electron Windows — Moving & Dragging Windows into / out of Dashboard Panel

      • Product Designer: Yooch Wan (Principal)
      • Design File: Figma design file > Electron Windows - Moving & Dragging Windows into/out of Dashboard Panel

  • Design Sprint 5 — May 2021

    • 'On-the-fly' Dashboard & Consolidating Panels into a View

      • Product Designer: Yooch Wan (Principal)
      • Design File: Figma design file > 'On-the-fly' Dashboard & Consolidating Panels into a View - YW
      • Figma File Owner: John W.

  • Design Sprint 6 — May 2021

    • Grids & Layouts — Research & Specs for Halo Design System

      • Product Designer: Yooch Wan (Principal)
      • Design File: Figma design file > JIRA-DES-100 - Grids & Layouts - YW
      • Figma File Owner: Alan W.
      • Jira Ticket: DES-100
      • Status: Complete. Presented to Product Design Team including Alan H. (Product Manager, Design System), Trem C. (Halo Design System Development). Reviewed separately at Halo Governance meeting. Handed over to Halo team for inclusion into Halo Design System.

Team Tribe A — Product Experience (Spring / Summer 2021)

Start Page — Concepts

  • Product Owner: James S.
  • Product Designer: Yooch Wan (Principal)
  • Visual Designer: Yooch Wan (Principal)

  • Jira Ticket: DES-339 - Start Page Explorations

    • Designs: Figma design file > DES-339 - Tabs & Start Page - Explorations
    • Path: LSEG Design > TRIBE A - PRODUCT EXPERIENCE > Browser Start Page - DES_339 - Tabs & Start Page

  • Jira Ticket: FRUXD-696 - Batch 1 : Start Page - 1st Iteration + Visual Design

  • Jira Tickets: FRUXD-697 & DES-377 - Batch 2 : Start Page — 2nd Iteration + Start Page Customisation

    • Designs: Figma design file > FFRUXD-697 & DES-377 - Batch 2: Start Page - 2nd Iteration + Start Page Customisation

  • Final Deliverables:

    • Consulted with:

      • Customer Experience (CX) team: Lawrence M. & Sarah G.
      • Help & Support team: Alex G. (Product Owner), Robert B. (UX)

    • Batch 2 Specs containing consolidated designs - reviewed and approved by James S. (Product Owner) and delivered to development team.

      • Design: Figma design file > FRUXD-697 & DES-377 - Batch 2: Start Page - 2nd Iteration + Start Page Customisation > Contents within green box

Team Tribe C — Workflow Enablement (Spring - Autumn 2021)

Entity & Task Editing in Banners (continued from previous explored work)

  • Product Owner: Christiana A. (initially Business Analyst but replaced Katia B.)
  • Product Designer: Yooch Wan (Principal)
  • Visual Designer: Chris B.
  • Project: A continuation of the ETP editing in the Banner, explored in the previous team setups (App Framework and Pod A teams)

  • ETP Editing in the Banner — Explorations

    • Jira Ticket: DES-47

      • Covers:

        • Ideas for incorporating a navigation mechanism within the banner
        • Keyboard interactions (shortcuts) for invoking ETP editing within the banner
        • ETP explorations against various documented use-cases / scenarios
        • Design: Figma design file > DES-47 - ETP Editing in the Banner - Explorations

    • Jira Ticket: DES-316

      • Covers:

        • Entity-Editing ONLY - no longer looking at Task and Parameter Editing due to agreed de-scoping of Jira DES-47 in May 2021 after meeting with Christiana and Abhi.
        • Design: Figma design file > DES-316 - Entity Editing Only in the Banner - Explorations
        • Prototype: Figma > DES-316 - Prototype - 1.0

  • Other Deliverables:

    • Basic interactive HTML prototypes built to illustrate certain interactive behaviours to Christiana and developers:

Evaluation of Luca's ETP Concept

  • Luca's original designs: Figma design file
  • Background: Luca’s ETP concept has several similarities to the ETP concepts I’ve been exploring such as finding ways to incorporate some form of smarter auto-suggest for search test entries, and mechanisms to navigate to other entities and/or tasks.

  • My Involvement:

    • Objectives:

      • Critique and validate Luca's concepts
      • Address concerns/questions raised by stakeholders (Brian S., Christiana A., Rohit M., Ray T.) over Luca's concepts
      • Design Exploration & Validations: Figma design file > Luca's Concept - Further Explorations & Validation - Aug-2021 (Yooch)
      • Status: Started but incomplete — Deviated from task to research and provide screenshots of other financial applications which use the same interaction model for changing entity in the header/banner, which provided a strong argument to stakeholders that we should explore the concepts further.

Conclusion

Coming soon.

Testimonials

"Yooch was responsible for the definition of our nascent product design system at Refinitiv.

I have been really impressed by Yooch's personality and knowledge of Workspace customer needs and behaviours.

Yooch is one of those gifted individuals who is equally at ease in designing clear and intuitive interactions, building sophisticated responsive prototypes and communicating customer-centric solutions with stakeholders of all kinds.

Despite the aggressive deadlines and the incredible pressure put on him and the rest of our team, Yooch's dedication, calm and confident approach has been truly remarkable.

Yooch can be both a great team leader and player! I would recommend him without hesitation for any design project."

— June 2020

Giorgio V. was Product Design Director who worked with and directly managed Yooch in the same group at London Stock Exchange Group and Refinitiv.

"I had the pleasure of working directly with Yooch Wan at Refinitiv on the creation of the company's product design system.

During our collaborations, I was impressed by Yooch's broad design abilities, technical expertise and his focus on formulating evidence-based design solutions.

Yooch also influenced improvements to the company's product offerings through presentations attended by designers, developers and product managers.

His professionalism, expertise and people skills would make him an excellent leader for any user-centric organisation."

— October 2020

Alan H. was Product Manager for Design Systems and an internal client of Yooch at London Stock Exchange Group and Refinitiv

"Yooch has a tremendous expertise in the digital space, and not limited to interface design, where I deem him highly. He’s been in the industry for a long time, challenging himself in many different areas of expertise.

Thanks to his background as a developer, he has a great understanding of the technical implications through the product lifecycle.

Aside from his domain knowledge, I like how elaborate and thorough his opinions are, and how he expresses them.

Many in the team have been inspired by his ideas when he presented them to us, as they brilliantly combined his design knowledge with first-hand expertise in the financial field.

I am enjoying very much having Yooch as a colleague, as he’s a generous person, a pleasure to chat with, and someone who is genuinely open to hear other people’s opinions (and fun facts!)."

— July 2020

Luca B. was a Lead UX Consultant and worked with Yooch in the same group at London Stock Exchange Group and Refinitiv

"Have had the opportunity of working with Yooch several years now.

His contribution and Design expertise have been key in driving the Product forward.

He has a wide set of Design and Financial skills; always highly collaborative with team and open with his contributions and ideas."

— July 2020

Jorge S. was Global Head of Product Management for Desktop Platform and was an internal client of Yooch at London Stock Exchange Group and Refinitiv

"Yooch, is a plate spinner extraordinaire, his ability to maintain a detailed engagement with a broad range of activities is what he is best at.

He’s also a detail guy, able to nail down tight specifications and communicate them succinctly back the business.

In the last few years I’ve worked with him on a number of jobs and have to say I’d recommend him, without any reservation."

— June 2020

Paul A. was a Senior UX Designer & Prototyper and worked with Yooch in the same groups at London Stock Exchange Group / Refinitiv and Lloyds Banking Group

"A professional, reliable, technical UX’er and an all-round good person to know. He went above and beyond in his role working on multiple workstreams, setting up and leading teams diligently and efficiently to create new, innovative design and development libraries.

UX and Product teams made him a 'go to' guy for his depth of knowledge and experience of financial markets and products.

No question was ever too dumb for him to make time for everyone. Testament to Yooch, his personality and his skills, I would not hesitate to work with him again, as I am sure most people in this team would agree."

— March 2020

Rachel R. was a Product Design Consultant and worked with Yooch in different groups at London Stock Exchange Group and Refinitiv

"Not completely sure how we will cope without you but I guess its a consolation that you get to help a new team with your unmatched design confidence...

Thank you so much for everything this past year. I appreciate it more than you'll ever know."

— September 2021

Christiana A. was initially a Business Analyst and eventually a Product Owner who worked with Yooch in the same group at London Stock Exchange Group and Refinitiv

"[It's] been great working with you mate, shame it wasn't more often!

Appreciate all your knowledge sharing and chats...

One of the 'old guard' and you will be missed!"

— September 2021

Prean P. was a Principal User Researcher who worked with Yooch in the same group at London Stock Exchange Group and Refinitiv

"It's been great working with you, from [the design system] to Framework. You're a great designer and one we shall miss. Really gutted."

— September 2021

John W. was a Principal Visual Designer who worked with Yooch in the same group at London Stock Exchange Group and Refinitiv

View all testimonials
Return to Portfolio
Previous Case Study Next Case Study