UXD Process
This project is based on a capital markets data visualization tool and data download portal for university students research, papers and theses.
1. Discovery & research
1
Discovery & research
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
Competitive analysis
The two main reasons to conduct competitive analysis:
- To find inspiration in other people’s success
- 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
2
Synthesizing research & design
Extracted interview observation points
- 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)
- 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
- 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
- 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)
- Produces short reports (1 or 2 pages for industry sponsor) that explains a particular topic
- 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
- 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
- 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
- Level of coding experience?
- Above average
- Below average
- Below average
- Above average/high
Affinity map
Affinity mapping results
- Chart types
- Timeseries chart
- Correlation chart
- Line chart
- Correlation chart
- Bar chart
- No chart (tabular data)
- Applications used
- Databricks
- Business Source Complete
- Market Quality Dashboard
- Market Quality Dashboard
- Uptick
- Computer limitations (hardware)
- Running out of storage space
- Running out of storage space
- Wants to run intensive metric calculations faster (cloud computation)
- Produces (end result)
- Thesis and reports
- Papers
- Papers and reports
- Papers and reports
- Programming experience
- Above average
- Below average
- Below average
- Above average/high
- Popular coding languages/libraries
- Python
- Python & SAS
- Python
- Python & Pandas (library)
- SAS
- Other coding languages
- Alice
- VBA - Excel
- Apache Spark - Databricks
- R
- Improve programming
- Wants example code snippets (metrics)
- Wants to improve programming capabilities
- 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)
- 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
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
Persona 2 – 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
User flow diagram
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.
“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.
“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
3
Placement & architecture
Sketched concept 1
Low-fidelity wireframe 1
Sketched concept 2
Low-fidelity wireframe 2
Card sorting (closed)
- Home page content
- Content pages
- User sign in
- User home page
- Links to other products
- Help
- Community
- Main chart
- Sub charts
- News
- Reports
- Export/share
Initial sitemap
Final sitemap
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
Medium-fidelity design – paper prototype
Paper prototype interview answers
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
Equal areas layout with annotations
- Top level dash navigation (data type) - Default chart will change depending on data type selected
- Client sign in and account dashboard - Cog icon linked go to client dashboard, bell icon shows any notifications
- Click company link to see chart of stock trading
- Click link to see news article on this subject
- Each chart has its own inputs to display data - combination of select (dropdown) + search as you type
- Date selector/scrubber - Drag to adjust date range
- Click each exchange - see forex/dollar and top commodities values
- Live stock ticker - Trending security price changes, trading volume etc.
Equal areas layout
Select markets drop–down list
Search instruments drop–down list
Main chart layout with annotations
- Top level dash navigation (data type) - Default chart will change depending on data type selected
- Client sign in and account dashboard - Cog icon linked go to client dashboard, bell icon shows any notifications
- Quick select buttons - Click to select the seconday (sub) data type to be displayed (default)
- Date selector/scrubber - Drag to adjust date range
- Hide quick selection bar - Click to hide bar, - Will change to + and this button will remain visible
- Search as you type with dropdown checkbox lists and select (option) inputs - Custom data parameters: Market, Search markets, Search variables, Search instruments, Frequency, Search and apply metric, Chart type
- Live stock ticker - Trending security price changes, trading volume etc.
Quick select markets
Select markets drop–down list
Search instruments drop–down list
5. Usability testing
5
Usability testing
This project was never fully realized (built/developed). Usability testing can only be based on current prototypes
Screener questions
For my personas I concentrated on:
- Finance students
- Approximate age range 24 - 34
General and demographic:
- Full name?
- Occupation or discipline?
- Age?
Experience/habits questions:
- Are you involved with finance industry?
- Would you know how to create a basic financial metric?
Behaviour questions:
- Do you need to analyse financial market data?
- What features of the product do you use most frequently?
- What other finance applications do you use?
- Do you need to produce reports, papers or presentations?
Participation questions:
- Would you be able to participate in usability testing of the 'Analyysi' product?
(It won't take long. Maybe 10 - 15 minutes.) - We are planning to conduct the test at 'some venue' on XX/XX/2018 and XX/XX/2018 between 3:00pm and 4:00pm will you be available during this time?
Participation questions:
- Already asked for full name above
- Phone number
- Email address
To Do:
- Send out a blast email that you are looking for volunteers to help you test your new and exciting app/website
- Email everyone who said they would be interested in your screener, or invite them in person
Pro-tip: Contact the same people you interviewed in Unit 1 if they are still available!
8 tips on writing screeners:
- Keep it short!
- Screen for behaviours, not just demographics
- Ask precise questions
- Filter unsuitable candidates early
- Get value-for-money participants
- Manage each participant's expectations
- Pilot test the screener
- Avoid no-shows (reminder, confirmation message on the day)
Most to least important items
- Main navigation bar
- Main chart
- Dash navigation (sidebar)
- Date range selector slider/scrubber
- Custom search fields
- News
- Quick select buttons
- Sub charts
- Trending stock trading
- Forex trending
- Stock ticker
Usability script
Greet the user and introduce yourself.
Hi ........ my name is ..... and I will be walking you through this session today.
Before we begin I have some information for you and I am going to read it to make sure I cover everything.
You probably already have a good idea why we asked you here, but let me go over it again briefly. We are asking people to try to use a website that we are working on so we can see whether it works as intended?
This session today should take about 20 minutes. The first thing I need to make clear is we are testing the website not you. You can't do anything wrong here. This is one place you don't have to worry about making mistakes.
Task scenarios introduction
Pass the user a piece of paper or card with the tasks on it:
- Let's begin with the first task.
- This is the task card, if you could just read that aloud and then begin the task whenever you are ready?
- Please speak your thoughts out loud as you go through the tasks in the interface. Please describe your experience, rather than offering suggestions or solutions.
- I will remain quiet and just be observing, I may interject occasionally and ask you 'why you did something a certain way?
Task scenario 1
Pass the user a piece of paper or card with the tasks on it:
- Imagine you are required to:
- 'Check for irregular trading during the start of February 2018 in NYSE for one particular security'?
- This is written on the task card
- Can you please walk me through how you would do that?
- Observe silently as the participant completes the task. Interject if he or she seem lost and ask him or her things like:
- What are you considering?
- What do you think you’d do now?
- Now, show me how you would 'optional secondary task?'
Task scenario 2
- Imagine you are required to:
- 'Check stock trending on the ASX for a particular security two days before and two days after a change in regulation for this exchange?'
- This is written on the task card
- Can you please walk me through how you would do that?
- Observe silently as the participant completes the task. Interject if he or she seem lost and ask him or her things like:
- What are you considering?
- What do you think you’d do now?
- Now, show me how you would 'Download this chart?'
Task scenario 3
- Imagine you are required to:
- 'Run a few financial metrics on a particular data set to support your findings for a report?'
- This is written on the task card
- Can you please walk me through how you would do that?
- Observe silently as the participant completes the task. Interject if he or she seem lost and ask him or her things like:
- What are you considering?
- What do you think you’d do now?
- Now, show me how you would 'Export this data set?'
Post-session questionnaire
- On a scale of 1 - 10, with 1 being very easy and 10 being very difficult. How easy would you say it was for you to complete the tasks?
- Do the inputs work for you to define the data parameters?
- Is there anything else you’d like to share about your experience?
- Thank the participant for their time.
Paper prototype usability test
Equal areas layout usability extracted notes
Good:
- Capital markets already selected
- Map section colour association with selected market/venue
Bad:
- No chart title (what is this data?)
- Map section colour association with selected market/venue
- Irrelevant axis value labels/legend (placeholder charts)
- Design is confusing (focus is uncertain)
- No input placeholder on sub charts (what am I supposed to select here)
- Too many input controls (one set on each chart)
- No export/save/download functionality
- Particular security does not exist in market/venue (irrelevance filter)
- No clear cta button to finalise selection (will be ajax blur, keyup events?)
Ideas:
- Try design again with actual chart titles/data/value labels
(may still be confusing where to focus) - Export data: Top right corner select button dropdown: download data, html, pdf, png
Main chart layout usability extracted notes
Good:
- Capital markets already selected
- Found metric search
- Found instrument search
- Found date range scrubber
Bad:
- Remove extra search markets input (dropdown select but many more in current application)
- Remove variables input (confusing with metric)
Ideas:
- General website search
- Show what is currently selected
- *Irrelevance filtering (disable options that have no matching values (grey out text). Weight irrelevant options last if some option are available)*
- Categorise metrics
- Updates main chart on each input change (redraws chart data)
Usability test notes: Scenario 1
Tester notes:
- Tester has knowledge of financial analysis background
- Tester would go to market input secondly if metric did not have required option
- Lack of labels, titles on 'Equal areas' layout caused confusion. Unclear of where to focus
- Tester selects and saves default criteria (displayed when entering app base page). Could be distracting for first time users?
Tester input sequence:
- Would first go effective spread
- Market (NASDAQ)
- Instrument (Apple)
Self review: Need more vague questions. What would you do next?
Plus/Delta synthesized results
Plus +
- Main chart full width – Good size
- Preference option to choose layout style
- Equal areas layout
- Main chart layout
- Country flags for each market make it easier to find and select
- Quick search (button highlight) makes it obvious as to what you are looking at
Delta -
- Search markets input confusing with select dropdown
- Display what is currently selected as parameters (left column or posible overlay)
- Not sure what all the metrics are? (click for popup explanation and formula)
- Export data functionality missing
- Nothing to indicate that each input has a value
- Not sure what all the chart types are? (click for popup example image and explanation)
- Require the ability to define what data to display when clicking world map
- Ability to use the same data request parameters for sub charts
- Stock ticker localize to current geographic position
Pain points: Post-test reflections
What are the main user pain points and highlights that you found throughout the testing session?
- Clear identifiers on inputs and charts are essential
- Reduce the amount of inputs (complexity) where possible
- Difficult to make a prototype behave like a real application
- More paper prototyping usability testing (faster)
UX improvements: Post-test reflections
What improvements to the UX do you feel would have the most positive impact on the user’s experience?
- Simplifying the inputs
- Not using the 'Equal areas' design as it was too busy with no clear focus
- Although combining some elements of each design
- Reduce bottom half of data display to two rather than 3 sub charts
Prioritize changes: Post-test reflections
Prioritize and list 3-4 changes you will make to your prototype:
- Remove extra inputs
- Combining elements of the two designs (simplify)
- Project colour/branding/UI revison
- Indicators to show each input has value selected
- Filtering will show invalid options as disabled (grey or reduced opacity) at end of list
Two ways to synthesize your findings
Plus/Delta
You can use this method to identify what went well and what could be improved.
Affinity Mapping
You can use this method to visualize trends in your testing observations if you are unable to see a clear trend.
They will reveal a number of issues (these are your insights).
You can prioritize these insights and use them to justify changes to your designs.
Analyse results: Observations
Observations are exactly what you see, they are your evidence
- Raw data
- Accumulation of information recorded precisely on what the researcher saw or heard
- No interpretation
Analyse results: Insights
Insights are how you interpret observations, they help you build solutions
- Interpretations from the observations
- Discovery of patterns
- Understanding of gaps between where people are and where they want/need to be
- Usually from observations that were completely unexpected
UX final design - default (prior to prototype usability testing)
UX final design select markets
UX final design select instruments
I would have loved to have seen this project built, retesting usability, iterations and further refinement.