UXD Process

This page has been created to showcase the process work I went through to complete the ‘General Assembly – UXD Course’. The project is based on a capital markets data visualization tool and data download portal for university students research, papers and theses.

1. Discovery & research

First stage

1

Discovery & research

2

Synthesizing research & design

3

Placement & architecture

4

Execution

5

Usability testing

Areas of interest

  • The different types of data visualisation tools/technology that people use both online and created locally.
  • The way they interact when using the tools.
  • The features they would like to use.
  • The interface they would like to use.
  • The pain points of the current site.
  • External hardware resources used for computation.

Research goals

  • The motivation for creating or viewing financial data visualizations.
  • What are they aiming to produce as an end result of using these tools (reports / documents / interactive digital charts)?
  • The process to set data criteria (what parameters would you define, the logical sequence of parameter inputs)?
  • How can the product benefit it users (save time, alert attention to suspicious trading, independent source of news and data).
  • Get an overview of what clients expect to be included (reimagine the current site).
  • Learn what the different client groups require as features.
  • What other products the users currently use?
  • Observe interaction with other products.
  • Level of coding/programming experience?

Problem

Traders, researchers, analysts and regulators need an independent unbiased source of capital market data.

Traders need to make significant decisions quickly based upon incomplete information.

The current product does not give feedback after each interaction (defining data criteria) and can produce meaningless data visualization results.

Overview

Finacial data visualisation, research and data gathering tool.

See the immediate trading trends, news and market summary. It must be intuitive, easy to learn and use.

Users will enjoy the simplicity and category groupings. The place to go for immediate or historical world trading data.

Target audience

  • Exchange analysts
  • Investor relations
  • Journal editors
  • Stock exchange traders
  • Finance/Economics students

Hypotheses

Do you have any hypotheses around your target audience, their behaviors, or their goals? What do you think you already know?

Clients are looking for irregular trading, anomalies (spikes), front-running, the impact of regulator trading rule changes, etc.

Clients visit when they are required to research historical data, create reports or generate interactive digital charts.

An offering of real time data feeds (charts) could provide for a wider audience.

It may be a generalization but most of the students or professionals have good aptitude for creating code queries, database manipulation, authoring metrics and algorithms.

Users of the current product find it difficult to find and visualize particular datasets.

Interview questions

Q: How do you like to stay in touch with news or trending in the finance industry?

Q: Which database vendours do you use?

Q: What financial applications do you currently use?

Q: What are you aiming to produce as an end result of using these tools (documents, papers, digital visualizations)?

Q: What financial tools or applications would make your work easier to do?

Q: What is your motivation for creating or viewing financial data visualizations?

Q: Do you create charts yourself with code?

Q: What coding languages are you familar with?

Q: Level of coding experience?

Interview answers

Michael ••••••

Aldo ••••••••

Ognjen ••••••

Panya ••••••••••

UX interviewee card

UX Interviewee Card

Download printable cards pdf

Competetitive analysis

The two main reasons to conduct competitive analysis:

  1. To find inspiration in other people’s success
  2. To find opportunity in other people’s design faults

There’s a saying in the UX community, “parity is not a strategy.”

Direct competitor – A company that offers the same products and services aimed at the same target users.

Analogous competitor – A company from another domain that users expectations for how your experience should work.


Plus/Delta – A plus/delta model is the simplest way to conduct competitive analysis – it’s essentially a pro/con list.

Task analysis – Identify the user flow of a competitor’s product or service. A user flow describes the steps required to achieve their goal.

Feature inventory – A feature inventory is a list of features available across all your competitors. Typically, the competitors are the columns of the table and the features are the rows.

2. Synthesizing research & design

Second stage

1

Discovery & research

2

Synthesizing research & design

3

Placement & architecture

4

Execution

5

Usability testing

Extracted interview observation points

  1. How do you like to stay in touch with news or trending in the finance industry?
    • Reads a lot of Financial Times, The Economist, Local financial newspapers and Bloomberg news
    • Reads newspapers websites (online). Reads Italian news. Has also reads the Australian news but finds it shallow
    • Reads Australian Financial Review, subscribed to foreign news (regarding regulation) weekly update, talking with industry professionals, internal feed at Nasdaq, Google news looking for particular stories (new regulation or market abuse cases)
    • Reads Mandalay (it filters information that is relevant to what he is reading currently)
    • Podcasts (subscribed to free)
  2. Which database vendours do you use?
    • Bloomberg/Bloomberg terminal, TRTH/Tick history, AusEquities, Morningstar, Yahoo finance, Google finance
    • Private database, Business Source Complete (theoretical frameworks)
    • TRTH (trade and quote), AusEquities
    • Bloomberg, TRTH, Nasdaq, needs accurate data (time stamp) for market micro structure
  3. What financial applications/tools/code do you currently use?
    • Python, Databricks Apache Spark, Uptick, MQD, Others
    • SAS, Python, MQD
    • Excel, Python, MQD
    • Panda (Python for visulaisations), Alice, MQD
  4. What are you aiming to produce as an end result of using these tools?
    • Produces short reports (1 or 2 pages for industry sponsor) that explains a particular topic
      • Downloads data then runs code, explains the results, sends the results to the end user (someone within the industry sponsorship company)
    • Produces papers (for research) that are much longer
      • Downloads a lot of data on a daily basis. Runs different metrics. “If it works out, I put it into the paper”
    • Produces papers with tables of statistics
    • Produces short reports
      • Needs to do three or four page reports once or twice each year for the industry sponsor with graphs/charts. Data is not supplied (uses public TRTH data)
    • Produces papers
      • Two or three sets of tables, summary, statistics, correlation, sometimes regression and a couple of charts to show the relationship
    • Produces thesis with visulaisations
    • Produces short reports (1 or 2 pages for Sponsor) that explains a particular topic
    • Produces presentations with data visulaisations (for Sponsor)
  5. What fincial tools or applications would make your work easier to do?
    • Run his code faster (cloud computing). More powerful computer (get more results in a day)
    • Clean well organised datasets
    • Course that improves and shows him how to code most efficiently Python
    • Panda/Python in environment where it is fast to setup
    • Python chart library (plugin) so it was easy to implement
  6. What is your motivation for creating or viewing financial data visualizations?
    • Sponsor requires the reports as part of the sponship agreement
    • Academia requirements
    • Shares something he has found that is really intereseting
  7. Do you create charts yourself with code?
    • Python itself but it was tedious (exports results then uses uses excel to do all the chart plotting as it is much faster)
    • May achieve nicer results using Python but the extra time is not worth it
    • Correlation chart
    • Timeseries chart
    • Bar charts
    • No charts (tabular data)
    • Made some nice charts with Panda (makes it easier/faster to communicate information for a presentation)
    • Line charts
  8. Level of coding experience?
    • Above average
    • Below average
    • Below average
    • Above average/high

Affinity map

Capital Markets Application Affinity Map

Affinity mapping results

  1. Chart types
    • Timeseries chart
    • Correlation chart
    • Line chart
    • Correlation chart
    • Bar chart
    • No chart (tabular data)
  2. Applications used
    • Databricks
    • Business Source Complete
    • Market Quality Dashboard
    • Market Quality Dashboard
    • Uptick
  3. Computer limitations (hardware)
    • Running out of storage space
    • Running out of storage space
    • Wants to run intensive metric calculations faster (cloud computation)
  4. Produces (end result)
    • Thesis and reports
    • Papers
    • Papers and reports
    • Papers and reports
  5. Programming experience
    • Above average
    • Below average
    • Below average
    • Above average/high
  6. Popular coding languages/libraries
    • Python
    • Python & SAS
    • Python
    • Python & Pandas (library)
    • SAS
  7. Other coding languages
    • Alice
    • VBA - Excel
    • Apache Spark - Databricks
    • R
  8. Improve programming
    • Wants example code snippets (metrics)
    • Wants to improve programming capabilities
  9. Time sensitive
    • Excel - Produces charts fast
    • Wants a fast way to check/test a trend
    • Custom coded charts take to long to produce
    • Wants environment setup fast to create charts
    • Wants everything in one place (application) (data/cloud computing)
  10. Ungrouped
    • Preference for constant (standards) UI
    • Focus is different from usual finance discipline (behavioural)
    • Wants to share findings with community
    • Wants a new metric/formula (proportion of gain and losses realized)

How might we party

UX How Might We Party

How might we party 2

How Might We Party 2

How might we (design thinking)

  • Provide an easy to use interface where clients can setup parameters for visualization of finance data
  • Facilitate download/use of the finance data
  • Provide cloud computing interface and infrastructure to run finance calculations and optionally produce charts
  • Provide assets and templates for student papers and reports
  • Reduce time and effort to create research projects

Persona 1 – Gabriel Sousa

UX Persona Finance Student Gabriel Sousa

Persona 2 – Hannah Bauer

UX Persona 2 - Finance Student Hannah Bauer

Problem statements and hypotheses

  • 1. Gabriel (finance student) needs a way to:
    • Asses certain capital markets trends
    • Gather well organised data sets from around the trend
    • Run metrics and calculations on the data sets
    • Produce research presentations and papers
    • Produce data visualizations to convey information effectively
    • Maximize speed and efficiency
  • , because:
    • this is part of his sponsorship and academic requirements
    • he is time poor and needs a faster way to complete the same tasks
  • 2. We believe that by providing a range of research tools for PhD (finance) students we will achieve functional applications that can:
    • Visulaize capital market trends
    • Supply well organised data
    • Compute calculations on the data
    • Offer base metric formula for further customization
    • Offer templates for presentations and papers
    • Facilitate an environment to easily produce charts
    • Be further enhanced to complete the same tasks faster
  • 3. We will know this to be true when users can:
    • Quickly asses capital markets trends
    • Easily gather data
    • Quickly create a cloud environment where data can be processed and optionally outputed as a chart (data visualization)
    • Achieve higher quality outcomes in less time (accuracy and aesthetically pleasing)

  • 1. Hannah (finance student) needs a way to:
    • Gather quality capital markets data sets
    • Ask for (financial) community support
    • Share findings with (financial) community
    • Improve programming capabilities
    • Learn Python
    • Streamline research process
    • Produce presentations, papers and thesis
    • Maximize speed and efficiency
  • , because:
    • she is passionate about the finance industry and this is also part of her academic requirements
    • she is time poor and needs some relaxation time
  • 2. We believe that by providing a range of research tools for PhD (finance) students we will achieve functional applications that can:
    • Supply well organised quality data sets
    • Allow Q+A communication with other finance students
    • Publish papers and research for community critique
    • Teach programming and coding
    • Be customized to suit users workflow
    • Help produce presentations, papers and thesis
    • Reduce time taken for research projects
  • 3. We will know this to be true when users can:
    • Access quality data easily
    • Post and answer questions about finance study
    • Post and review other students research projects
    • Access interactive environment to study programming concepts
    • Setup can be customized to suit various user profiles
    • Produce parts of research projects with the application(s)
    • Notice they have completed the same taks in a faster time

Storyboards

Capital Markets Application UX Storyboard

User flow diagram

Capital Markets Application UX User Flow Diagram

Feature prioritization (2x2 matrix)

UX Feature Prioritization 2x2 Matrix

Dream list of features

Primary goal (Gabriel Sousa) – Produce research projects efficiently

  • Visualise and analysis financial/capital market trends
  • Well defined benchmark and parameters definitions for all metrics
  • Editable metric formula with super fast results
  • Provide well organised clean finace data
  • Provide cloud environment that is fast to setup
  • Compute custom finance data calculations fast (cloud)
  • Provide base metric formula
  • Generate charts from computed result data
  • Ability to save computed result data (account)
  • Application training videos
  • Provide assets and templates for papers, presentations and reports
  • Provide interactive programming training platform

Primary goal (Hannah Bauer) – Produce quality research papers and presentations in shorter time frames

  • Provide well organised clean finace data sets
  • Provide student communication channel
  • Provide cloud environment that is fast to setup
  • Compute custom finance data calculations fast (cloud)
  • Generate charts from computed result data
  • Application training videos
  • Provide assets and templates for papers, presentations and reports
  • Provide interactive programming training platform
  • Provide support

UXD / IxD quotes

Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.

– Jesse James Garrett


“In synthesis, you’re trying to find meaning in your data. This is often a messy process and can mean reading between the lines and not taking a quote or something observed at face value. The why behind a piece of data is always more important than the what.”
– Lauren Serota


The problem with the designs of most engineers is that they are too logical. We have to accept human behavior the way it is, not the way we would wish it to be.

– Donald A. Norman


“When we say a product is intuitive, we mean that it is easy to perceive opportunities to interact, accurately predict outcomes, interact with it, learn from meaningful feedback, and remember how to use it.”
– Dave Hogue

3. Placement & architecture

Third stage

1

Discovery & research

2

Synthesizing research & design

3

Placement & architecture

4

Execution

5

Usability testing

Sketched concept 1

Sketched wireframe capital markets data download interface idea 1

Low-fidelity wireframe 1

Wireframe capital markets data download interface idea 1

Sketched concept 2

Sketched wireframe capital markets data download interface idea 2

Low-fidelity wireframe 2

Wireframe capital markets data download interface idea 2

Card sorting (closed)

UX Card Sorting
  1. Home page content
  2. Content pages
  3. User sign in
  4. User home page
  5. Links to other products
  6. Help
  7. Community
  8. Main chart
  9. Sub charts
  10. News
  11. Reports
  12. Export/share

Initial sitemap

UX Capital Markets Application Initial Sitemap

Final sitemap

UX Capital Markets Application Final Sitemap (MVP)

Navigation reflections

Will be used in a fixed navigation bar with nested secondary/sub level navigation items, this will help restrain the top level to around 6 items.

Articles page will be presented in a 'grid' view with images and text overlay as local navigation to each article. We may also offer additional (contextual) article suggestions in a dashboard sidebar.

FAQ page will have a combination of inline text navigation links to associated training videos and faceted navigation deriving from search input results. Rethink, FAQ content will now be included in the 'Help' page.

Dashboard will have categorisation (filtering) via local navigation. Various inputs to define data parameters for data visualisations (filtered results). We may also show faceted 'events' links related to search parameters.

User goal navigation

The main user goal in this application is to analyse data. With the possibility of saving current query, creating report, exporting data/report or partial.

From the landing page the user will only have to click once to arrive to the main 'dashboard' page (more if not logged in).

The user can then define the data they would like to see with a combination of local navigation and faceted results.

IA (MVP version)

Primary categories 2nd category 3rd category 4th category 5th category 6th category Metric
Capital markets Market, Index, Group Instrument Variables Start date – end date Intraday frequency Select metric (see formula)
Energy
Digital assets
Health

Screen flow

UX Application Screen Flow

Medium-fidelity design – paper prototype

UX Low-Fidelity Design – Paper Prototype

Paper prototype interview answers

Alister ••••••••

Extracted notes (transcription)

  • Looks like a dashboard
  • Looks like a few of the big market index bottom right (actually live financial news feed and trending in this section)
  • None of the graphs have names of labels (low fidelity design)
  • Looks like a kind of summary
  • If he wanted to check a specific security, lets say BHP, I would type into 'Search instruments', would type BHP, would expect top (main) graph/chart to change, possibly also the bottom graphs/charts would also change
  • Bottom charts look like high level summaries so I don't know if I had selected one instrument what I would expect to happen
  • Drag the date range slider/scrubber to redefine date range
  • Try to click on the graph itself (tooltip data)
  • (actually has second thoughts) Would not do unless he was interested in a specific data point, I might hover over it to see the actual value (spike)

4. Execution

Fourth stage

1

Discovery & research

2

Synthesizing research & design

3

Placement & architecture

4

Execution

5

Usability testing

“Coming soon!”

  • Medium-fidelity design - With annotations
  • Prototype (paper print initial testing, task scenarios)
  • High-fidelity design

Most important to least important items

  • Main navigation bar
  • Main chart
  • Dash navigation (sidebar)
  • Date range selector slider/scrubber
  • Custom search fields
  • News
  • Quick search buttons
  • Sub chart 1
  • Sub chart 2
  • Trending stock trading
  • Forex trending
  • Stock ticker

UX final design (prior to usability testing)

UX Capital Markets Data Research Tool - Final Design

5. Usability testing

Fifth stage

1

Discovery & research

2

Synthesizing research & design

3

Placement & architecture

4

Execution

5

Usability testing

“Coming soon!”

  • This project was never fully realized (built/developed). Usability testing can only be based on current prototypes
  • Iterations and revisions