#26 What are the most popular UX prototyping tools?

Logos of 8 popular prototyping tools shown with a person.

Lot of people new to UX want to know which UX prototyping tool they should use. Prototyping is critical part of UX process. Important thing is how you think and use a tool to visualize your ideas so that it becomes communicative to others. To do so, you need to be proficient enough with a tool, so that you don’t become a slave of it.

The whole point of prototyping is to quickly test and evaluate concepts before its too late. Therefore, speed and ease of use are critical.

Today, Sketch still remains as the most popular design tool, which has a prototyping capability. While Sketch is the most popular and it’s a great design tool, when it comes to prototyping, it’s not the best.

Most of today’s popular prototyping tools have what is called “stitch screens with wires” interaction model.

This is a very intuitive way to quickly make a prototype, just by linking from one screen to another to create a transition. 

To make these transitions feel natural when interacting with a prototype, you need some transition effects. These include simple fade, slide in, and more sophisticated animated effects. This is where Sketch falls short.

Other tools such as InVision Studio, Principle, Adobe XD have better transition effects with fine-tuning capability.

The good news is, most of these softwares have some sort of compatibility with Sketch, and it works very similar to each other.

In today’s mobile-centric world, running a prototype on a mobile phone is becoming more and more important. Sketch does have a mobile app called Sketch Mirror to support this, but the app needs to be used while you have your Sketch file open on your Mac, and both your Mac and your mobile phone need to be connected to the same wifi network. This means you cannot share your prototype with your team members online on mobile.

This is also where other tools are better, such as Craft plugin for Sketch, InVision Studio, Adobe XD.

These days, collaborating with other designers seamlessly is becoming more and more important. Sketch has Team feature, but with additional paid subscription.

If the collaboration feature is important for you, Figma and Adobe XD might be a better fit for you, as they provide collaboration feature for free to certain extent.

All these information might be quite overwhelming for beginners.

So here’s a good news for you!

I created, and just launched Prototype Resource Map Lite.

This is a 131 page free ebook.

It gives you a comprehensive overview of today’s 8 most popular prototyping tools. 

It gives you a comparison of these 8 tools in various factors such as price, basic prototyping features and so on.

It also walks you through each tool with its pros and cons, and uniqueness.

It should give you a thorough understanding of 8 popular tools, to help you make a smart, informed decision on choosing which tool to start, and which tool to use for what purpose.

Download free Prototype Resource Map Lite now!

Also, if you haven’t downloaded my UX Resource Map yet, download that too for free! 

It’s a must-have tool for a UX beginner with full of useful resources.


Check out YouTube version too.

Also, check out my other article, a prototype is worth a 1000 pictures!

#25 How to work on your own UX project as a UX researcher

A person wondering about UX project for UX researcher.

A lot of people are interested in becoming a UX researcher, but seem to be struggling to break in to the field especially when you come from a different background, and you don’t have a relevant education and experience yet. In the field of UX, experience is everything. You need to show an artifact of your work in form of a portfolio in order to prove that you can put your knowledge in action effectively in a UX project context. Which is why it’s important to work on your own UX project as as UX researcher.

If you haven’t done that, you should start working on it. 

Start working on your own projects to build your portfolio as a UX researcher. 

A UX researcher works as part of a UX team. The goal of UX research is to help making the user experience of the product/service better. 

To do so, UX researchers can help in various ways both qualitative and quantitative research, including ethnography research, generative research, concept validation, usability test and so on.

Hiring managers and recruiters need to see:

  • How a UX researcher plans and executes a research (sessions) 
  • Summarizes the findings
  • Distills those findings into a list of actionable items
  • And then communicates all these effectively and efficiently to stakeholders

Yes, you will hear many people tell you “you don’t have experience”, if you never worked on a real world project as a UX researcher.

The only way to overcome this is to show a concrete proof that you can actually deliver. 

Real world projects are obviously ideal, but if you don’t have those, the next best thing is to build your own projects and work on those as if it’s a real project.

Below are just some examples to give you an idea on what kind of projects that you can work on your own.

  1. Future opportunity research around a topic of ABC:
    1. Pick a topic area of your interest (e.g. future of voice assistant), and interview 5-10 people who are relevant to that area in some way. 
    2. Ideally you should pick at least one expert in the field, a power-user, and a casual user. 
    3. Summarize the interviews into a report or a presentation.
    4. You could also run a quantitative survey.
    5. Incorporate your desk research results.
    6. Summarize all above into a presentation / report.
  2. Deep dive of a software or an app, and find pain points and possible solutions:
    1. Pick a software or an app that you have an access to its power users. 
    2. Closely observe these users interact with the software or app with their permissions, record these, take notes.
    3. Distill user pain points that you found, 
    4. Come up with possible improvement points. 
    5. Summarize all the findings with possible solutions in form of report or a presentation.

Taking above ideas as a springboard, feel free to expand and explore your ideas on what kind of UX research projects that you would like to work on!


Check out YouTube version too.

Also check out my other article on how to start your own UX project as a UX designer too!

#24 How to convert web designer’s portfolio to UX portfolio

Illustration of converting web designer's portfolio into UX portfolio

A lot of web designers want to transition to UX designers, as that seems like an easy thing to do on its surface. If you are serious about moving in to user experience, you need to spend some time to work on your portfolio towards that direction, in order to convert your web designer’s portfolio to UX portfolio.

As a web designer, I understand that you may have only done web-based projects or websites. And the final output for those projects might be something that you are not happy with, or not what you intended. 

But you can actually take those projects and turn those into case studies by shedding lights from a UX perspective.

You can articulate how you would reframe the project from a UX point of view, and rework on the project based on that new perspective and process.

If you have a project with a final output that you don’t feel comfortable, you can document the whole process, and clearly point out what went wrong, what you would have done if you were given enough resource and opportunity, then actually work on ideal design to prove your point.

  • Document the process of your project from start to finish
  • Point out issues along the way:
    • what went wrong
    • what you would have done if xyz (e.g. if you were given enough resource…)
  • Try to be as objective as possible, don’t just blame others. It’s OK to criticize, but when you do, you should propose a solution.
  • If the final product turned out to be very different from what you originally designed, compare those two, and point out pros and cons for both.
  • Come up with a revised plan and strategy to improve the process and output.
  • Include user test as part of the process so that you can learn from users.
    Create a design mockup based on the revised plan and strategy above.
    Articulate improvement points of your new design.
    Point out potential issues of your new design too.

The key point here is for you to clearly demonstrate how you can learn from your past experience, analyze issues, come up with a better plan including how to collaborate with other stakeholders such as clients, developers and managers, and improve your design output.

If you can put your serious effort and pull out these together, I think the whole documentation of your thought process to an improved design output can become quite convincing in showing your problem-solving skills and a healthy, positive mindset as a UX designer.

You first need to get through a stereotype label that recruiters and hiring managers will immediately put on you that, ”you don’t have enough experience”.

A UX designer solves a user’s problem, rather than simply creating fancy visuals. And you need to concretely show your ability to do so.

Being a UX designer is a journey of continuous learning.

In addition to above, you should constantly work on your own UX projects to further build your experience and portfolio. Check out my other article on how to work on your own UX project.


Check out YouTube version too!

#28 Prototype Resource Map: Comprehensive guide to today’s 8 popular UX prototyping tools

A diagram of “stitch screens with wires” interaction model and transition dropdown menu, with name of 8 prototyping tools.

Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 most popular UX prototyping tools including Sketch, Craft, Axure, Adobe XD, InVision Studio, Principle, Framer X, and Figma. First, it compares key aspects such as price, basic prototyping features, Sketch compatibility. Then it covers a high-level overview of each software program in terms of pros and cons and uniquenesses.

I understand there are many more tools out there, and other people may have different opinions. I also acknowledge that I am not familiar with every single tool available. I chose these 8 tools based on a combination of popularity and how these tools played key roles in the modern history of prototyping tools, and likely to take part in the future.

When Adobe Flash started going down, Axure took over in Web 2.0 Era, then Sketch came along to become a de facto standard. But lack of prototyping and cloud features in its early days opened up other new tools to emerge around Sketch, such as InVisionPrincipleCraft plugin for Sketch, and Adobe XD with a new voice capability. Framer X is tackling a challenging developer handoff problem, which could be the future of prototyping. Figma is getting more tractions lately because it was built for cloud-based collaboration, which is becoming a norm in today’s accelerated remote work situation.

Trends in today’s prototyping tools

Today’s trends in prototyping tools are ”stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected. This makes prototyping super-fast and intuitive for non-tech-savvy UX designers.

Left: a diagram of how "stitch screens with wires" interaction model works, Right: an example dropdown menu for transitions with auto-animate highlighted.
Left: “Stitch screens with wires” interaction model, Right: Auto-animate transition smartly look for same objects between two screens and create animations based on parameter changes on size, position, opacity level/etc.

Currently, Sketch is the most popular prototyping tool. However, Sketch is very limited when it comes to creating transitions and micro-interactions with animated effects. This is where other tools have strengths, and all of them have some sort of compatibility with Sketch. Let’s dive in to comparisons of 8 popular prototyping tools.


Section divider title graphics including the title, Comparison of 8 popular UX prototyping tools.

Comparison of 8 most popular prototyping tools

Price

A pricing table of all the 8 UX prototyping tools. It includes notes and free trial period.
Price comparison of 8 prototyping tools
  • Sketch one time price is $99 which includes 1 year of software updates and Sketch Cloud usage. Optional renewal is available for $79/year for software updates and cloud.
  • Adobe XD is free.
  • Axure is $495 for its perpetual license, or $29/month subscription.
  • InVision Studio and Craft are free, but are limited to only 1 prototype in InVision Cloud for free.
  • Principle is $129 (one time fee).
  • Framer X is $15/month or $144/year, based on 1 year subscription.
  • Figma is free with a Starter plan, up to 3 prototypes.

Basic prototyping features


Comparison of basic prototyping features:
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.

Legends for diagrams shown in a table above, interaction models and artboard structure.

Because the whole point of prototyping is to quickly test concepts, ease of use and speed are critical. In most real world situations, time is very limited, so ability to quickly create a basic prototype just by connecting screens together is super convenient, and that’s all you need in most cases.

From this perspective, Sketch, Craft, InVision Studio, Principle, Figma, Adobe XD, Framer X all do great jobs with similar “stitch screens via wires” interaction models.

Principle creates all the transitions automatically, allowing some controls via timeline UI. This is great for creating a nice animation instantly. But it doesn’t offer the most basic “preset transitions” such as slide, push or dissolve like other tools. For this reason, Principle is positioned slightly to the right in the chart compared to others (except Axure).

InVision Studio also provides a timeline UI similar to Principle, but it also provides basic preset transitions, which makes it a bit easier when it comes to basic prototyping.

Axure uses a very different interaction model. A user has to specify and add every single interaction via Interaction Editor. Interaction Editor is a very powerful tool for building complex interactions, but lacks speed and glance-ability for basic prototyping.

A matrix of 8 UX prototyping tools plotted on a price vs. ease of use plane.
Chart 1: Price vs. ease of use — basic prototyping: Ease of use is evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together via transitions.

Above chart shows how 8 tools are positioned on a price vs. ease of use plane. As you can see all the tools except Axure fall under bottom-left quadrant.


Basic prototyping features — animation adjustments

A table showing ability to adjust animations in basic prototyping feature across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.
A matrix of 8 UX prototyping tools plotted on a ease of use and fine-tuning capability plane.
Chart 2: Ease vs. fine-tuning capability — basic prototyping: Ease of use and fine-tuning capability are evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together, and how much controls you have in terms of sequences, timing and ease in/out.

This chart illustrates how much controls you have when creating a basic prototype, when it comes to sequence of multiple animations, timing and duration of animations, and ease in/out effects. Software programs are broken down into 3 groups.

The group in the top-left quadrant have a good balance of an overall ease of use and ability to fine-tune transitions and animations without too much work. These include InVision Studio, Principle and Adobe XD. All three do pretty good job in creating auto-animate transitions. Although similar, Principle seems to create the smoothest animations in most cases.

Figma recently added Smart-Animate feature, but currently it’s lagging compared to above three programs. Framer X can do fine-tuning but only via code. Sketch and Craft does not support fine-tuning. They only support basic preset transitions.

Axure can do many complex interactions, but only via Interaction Editor, which is not the simplest way from basic prototyping perspective.


Sketch compatibility

A table showing Sketch compatibility across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Currently, InVision Studio is the most Sketch-compatible program, which supports opening Sketch file directly as well as copy & paste objects and symbols from Sketch.

Adobe XD supports opening Sketch file directly, but copy & paste from Sketch doesn’t work. Principle can import Sketch file almost the same way as opening, but copy & paste does not work. Figma can import Sketch file but takes time. Copy & pasting a Sketch object does not work. Framer X accepts copy & pasting a Sketch object, but cannot directly open or import Sketch file. Axure can take copy & pasted Sketch object, but only via Axure plugin installed to Sketch.

A matrix showing 8 UX prototyping tools on a price vs. Sketch compatibility matrix.
Chart 3: Price vs. Sketch compatibility: Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Advanced prototyping

A table showing advanced prototyping capability such has ability to build full interaction, micro-interactions, and voice interaction.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.
A matrix showing 8 UX prototyping tools on a price vs. advanced prototyping capability plane.
Chart 4: Price vs. advanced prototyping capability: Evaluated based on the author’s perspective.

When it comes to advanced prototyping capability, Axure covers pretty much any interactions possible to simulate how the actual product is going to feel like via Interaction Editor except voice interaction. But Axure does not support videos. (Axure supports GIF animations)

Framer X is another tool that has a potential to add a lot of advanced interactivity to a prototype. One of the unique advantages of Framer X is that it supports video and audio. You can even embed YouTube video and run it inside your prototype, which is pretty powerful. While Framer X has a store to download many useful components, many of advanced interactivity need to be added via code.

Principle has an interesting and unique feature called Drivers, which can add various micro-interactions quickly to make the prototype look real.

Adobe XD allows you to create voice interaction, which stands out from competition in this area as no other tools support that.

Sketch, Craft and Figma are fairly basic, so does not support advanced interactivity at this point.


Running a prototype on mobile

A table showing capability of running a prototype on mobile across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

All the software programs have mobile apps to run a prototype except Framer X. Framer X is lagging in this area, where a prototype can only run inside a mobile web browser via QR Code.


Sharing a prototype online

A table showing ability to share a prototype online across 8 UX prototyping tools.
Capability of sharing a prototype online across 8 prototyping tools

Principle falls short in this area as it does not have a cloud. In order to share a prototype in Principle, you need to either send a Principle file and have it open from Principle mobile app, or export a prototype as a Mac Desktop app to be viewed on a Mac that doesn’t have Principle app installed. This means you cannot share a prototype with Windows users.


3rd-party ecosystem

A table showing 3rd party ecosystem of 8 UX prototyping tools such as plugins, store and others.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

While Sketch remains strong in this area with its abundant plugins, Adobe XD and Figma are catching up. Framer X has a unique approach with its Store, which is super-easy to browse and download functional components such as YouTube Player. Moving forward, Adobe may have a powerhouse advantage in a near future, as seen in innovative new feature such as voice interaction. Many of popular Sketch plugins are already getting ported to Adobe XD too.


Collaboration capability

A table showing collaboration capability and price across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

As for collaboration within a team, Principle falls short. Adobe XD and Figma offers free collaboration feature. Sketch offers a separate subscription for Team feature. Axure has a separate software that supports Team feature called Axure RP9 TeamInVision Studio offers additional subscription for Team feature. Craft uses InVision Cloud. Framer X has Small Teams plan that allows access to Team Store.


Section divider graphic with a title "overview of each tool".
Sketch logo as a section divider for Sketch section.

1. Sketch (based on version 63.1)

Sketch UI showing 3 screens connected using prototype feature.
Sketch UI showing 3 screens connected using prototype feature.

Sketch is the most popular tool, a de facto standard with various 3rd party plugins. But the default transitions are minimum, animate from right, bottom, left, top only.

Sketch UI with a blow-up of Prototyping animation options.
Sketch prototype feature, 5 animation options
  • Pricing: $99  (includes 1 year updates, 1 year Sketch Cloud. Optional renewal is available for $79/year for software updates and cloud. )
  • Free trial: 30 day
  • Mac only

Pros:

  • Abundant plugins
  • De facto standard
  • Strong symbol features
  • Smart Layout

Cons:

  • Limited transition animation options
  • No fine-tuning capability for animations
  • No micro-interaction support

Running a prototype locally, on mobile and in the cloud

https://youtu.be/xI0w4xdk9Ww
  • Clicking a preview icon on the top right corner allows you to run a prototype locally.
  • Sketch Mirror app can mirror an open Sketch file on your Mac through the same wifi connection. To mirror a prototype on a mobile app, click Notifications on the top right of the desktop app window, and select a mobile phone running Sketch Mirror app.
  • Uploading to a cloud allows you to share a prototype with others via a link. This is a great way to share a prototype with others and get feedback.

Smart Layout, plugins

  • Smart Layout allows automatic resizing of buttons and layouts based on the text lengths.
  • Abundant plugins are one of Sketch’s biggest strengths compared to its competitors. All the installed plugins appear under Plugins menu, and can be disabled via Preferences/Plugins.
  • Rename It, one of Sketch plugins lets you rename selected layers or artboards in bulk with numbered names. Adding “%N” in Name field after your desired text string (e.g., rectangle, square, thumbnail) results in layer names with your [desired text string]+number.

Collaboration – Team  feature

  • Sketch has a Team feature which allows you to collaborate. You can access this feature by logging in to your Sketch Cloud, then select Create New Team.
  • Adding team members cost $9/month per contributor, or $99/year per contributor.

Sketch related useful inks


Craft logo as as section divider for Craft section.

2. Craft plugin for Sketch (Based on version 1.0.94) 

Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.
Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.

InVision’s Craft plugin enables a slightly better prototyping capability directly within Sketch. These include gestures such as tap, swipe, and transitions such as dissolve, push, slide.

  • Pricing: free
  • Mac only (as it’s a Sketch plugin)

Pros:

  • Free (if you already have Sketch)
  • More transition controls than Sketch
  • Smart Duplicate, Data features

Cons:

  • You need Sketch
  • Transition options are still limited
  • Sticky header not supported
A blue arrow appears from a selected layer, and shows an option to link back/close, external URL, or artboard to link to.
Pressing “C” while a layer is selected brings up a blue arrow to link to another artboard, link back, or external URL.

Prototype menu and toolbar are embedded in Sketch

Because Craft is a Sketch plugin, Craft menu appears as an embedded toolbar on the right side of the screen. Clicking on a circular head of a blue link arrow brings up prototype menu. Prototype options that Craft has are slightly more than Sketch’s options as below.

Prototype menu appears when a start of the blue arrow is clicked. Craft toolbar appears embedded in Sketch UI. on the right.

Running Craft prototype locally, in the cloud, on mobile

  • Craft prototype is very similar to Sketch prototype. Currently a “sticky header” feature is not available.
  • A prototype uploaded to InVision Cloud can be opened in InVision mobile app to run on mobile. Only one prototype is allowed on a cloud with a free InVision account.
https://youtu.be/b1k5Pvp3epc
Craft prototype running on mobile via InVision mobile app.

Data, Stock

  • Data pulls real content from a range of sources and place it directly in your design.
  • Stock allows you to find and place high-resolution imagery from Getty and iStock to your design.

Collaboration

Once a prototype is uploaded to InVision Cloud, clicking on “+” icon allows you to invite a person to collaborate. 

InVision Cloud UI showing that clicking on "+" opens a popup to enter email to invite people.
Clicking on “+” opens a popup to enter email to invite people.

Craft related useful inks


Axure logo as a section divider for Axure section.

3. Axure (Based on version 9.0.0.3687)

A screenshot of Axure user interface
Axure user interface

Axure has established its own unique place as a go to prototype tool to build a more robust, complex prototype with various interactions, not just screen-to-screen click throughs.

Many experienced UX designers still use Axure because you can do more, but the trend is more towards software programs with “connect screens with wires” interaction model, because that’s much faster to create simple prototypes.

  • Pricing: $495 (perpetual) or $29/month
  • Free trial: 30 day
  • Both Mac and Windows

Pros:

  • Advanced prototyping capability
  • Can build almost any interactions (except voice interaction)
  • Unlimited cloud

Cons:

  • Most expensive — $495 perpetual, or $29/month.
  • Does not use popular “connect screens with wires” interaction model
  • Font Awesome not supported in mobile app
  • Least Sketch compatibility

Interaction Editor and Condition Builder

  • Interaction Editor allows you to add various complex interactions. Various list of events, actions and tiggers are available in Axure’s Interaction Editor to be able to create complex interactions.
List of available events, actions and triggers available in Axure’s Interaction Editor
  • In Interaction EditorCondition Builder allows conditional branching of interactions. This is basically If statement in code done visually.
An example of creating conditions with logic in Condition Builder.

Running a prototype locally, in the cloud, on mobile

  • Clicking Preview button opens a browser window and runs a prototype.
  • Publishing to a cloud allows you to share a prototype easily with others to collect feedback.
  • Axure Cloud mobile app can open a project published on a cloud. Font Awesome did not render.
https://youtu.be/NatQKa2AlEU

Sketch plugin, widget libraries


Axure RP9 Team

  • Axure offers team (collaboration) feature as a separate product.
  • Subscription is $49/month per user, which is more expensive than regular license.
  • Perpetual license is $895 per user.

Adobe XD logo as a section divider for Adobe XD section.

4. Adobe XD (Based on version 28.4.12.3)

Adobe XD user interface in Design Mode.

While Adobe XD entered the market late, it has a unique voice interaction feature, which no other competitors support.

Its Auto-Animate feature is pretty strong and simple, however, there’s no timeline UI like Principle or InVision Studio to make adjustments.

It can directly bring in Photoshop files, Illustrator files. It can also open Sketch file directly.

  • Pricing: free
  • Both Mac and Windows

Pros:

  • Voice interaction capability
  • Can open Photoshop/Illustrator files
  • Free

Cons:

  • Mobile app requires uploading a file to the cloud first
  • It takes long to open a file in a mobile app
  • Font Awesome not supported in mobile app

Prototype mode — trigger and action

  • Adobe XD separates Design Mode and Prototype Mode. Below screenshot shows Prototype Mode.
  • AmongTriggersTime allows a timer function. Voice is the most unique feature of XD, which is one of triggers.
  • Among transitions, Auto-Animate is a pretty powerful feature that can smartly animate a transition between screens.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button runs a prototype locally.
  • A file needs to be saved to a cloud in order to run a prototype on Adobe XD mobile app.
  • An XD file saved on Adobe Cloud becomes accessible from Adobe XD mobile app. Font Awesome didn’t render.
https://youtu.be/w4VMd5yq5WM

Repeat Grid and voice interaction

  • Repeat Grid auto-copies what’s selected as you drag a handle. You can bulk-adjust margins too. It’s a smart productivity tool that works great when creating tables or lists.
  • Voice interaction capability is the most unique and advanced feature that Adobe XD has. Below you can see the voice prototype in action. Note that you need to hold down a screen while speaking up your voice command that you specified in Speech Playback.
You can type in a voice command that you want to use in Command field after selecting Voice from Trigger.
For a Speech Playback, you can select different voice, then enter what you want that voice to speak up.
https://youtu.be/DYgYs7VlF_4

Coediting

  • To enable Coediting, you first need to save the document to the cloud. Once the document is saved to the cloud, Invite to Document icon gets activated. After clicking Invite to Document, enable Coediting, then send an invite.
  • Once fellow designers are added, you see them as color-coded avatars and bounding boxes.
Adobe XD website showing how Coedit works

Adobe XD related useful inks


InVision Studio logo as a section divider for InVision Studio section.

5. InVision Studio (Based on version 1.26.1)

A screenshot of InVIsion Studio user interface.
InVision Studio user interface showing three artboards linked with its interaction feature.

InVision Studio can open Sketch file, or can take objects and symbols copy-&-pasted from Sketch, and can create a more sophisticated prototype via its timeline-based transition capability.

When opening Sketch files, there are a few things to keep in mind. Link layers in Edit timeline doesn’t support Sketch symbols currently. In order to achieve a smooth animation, a file may need to be optimized accordingly.

  • Pricing: free
  • Both Mac & Windows

In order to publish more than one prototype to share online, you need subscription to InVision Cloud.

Pros:

  • Free
  • Best compatibility with Sketch
  • Transition adjustments via timeline

Cons:

  • Sometimes buggy and sluggish
  • Cloud only allows one prototype for free
  • Sync layers does not work for Sketch symbols

Interactions panel

  • Selecting a layer displays Interactions panel on the right.
  • Timer, one of triggers, allows certain interaction to happen automatically after a specified number of seconds.
Showing available triggers of 4 different groups: desktop, mobile, keyboard and Timer, and preset transitions.
Interactions panel: available triggers and preset transitions
  • Timeline allows sequencing multiple animations in a particular order to make the overall animation easier to understand.
InVision Studio's timeline interface. You can also adjust a velocity curve.
InVision Studio’s timeline opens when Edit Timeline is clicked from Interactions panel.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button on the top right runs a prototype locally.
  • A prototype uploaded to the cloud becomes sharable with the link generated.
  • Prototype on a cloud can easily be shared with others to collect feedback.
  • A prototype uploaded to the cloud becomes accessible from InVision mobile app.
  • A prototype can be mirrored to a mobile app via QR Code without cloud, but it’s sometimes buggy.
https://youtu.be/4FkqgjUHnyQ
Screenshots of InVision Studio UI showing QR code, and InVision mobile app showing scan QR code screen.
Clicking on mobile icon displays a QR code, which you can scan from InVision mobile app.

Team

To use Team feature to collaborate with other designers, you need to purchase Team plan, which is $89/month for 5 team members.

InVision Cloud pricing on InVision website, showing 4 options: Starters, Professional, Team, and Enterprise.
InVision Cloud pricing on InVision website.

InVision Studio related useful inks


Principle logo as a section divider for Principle section.

6. Principle (Based on version 5.10)

Principle user interface showing 3 artboards with a prototype preview window open by default.
Principle user interface opens a prototype preview screen by default.

Principle can import Sketch file directly, and can create a more sophisticated prototype.

Its animation is very smooth, with powerful auto-animate feature, which looks for same layer names between two screens.

Components and Drivers feature allow you to quickly create various micro-interactions.

However, there are a few things to keep in mind with auto-animate feature. It could automatically animate many unwanted elements in a screen depending on how layers are named between two screens. To avoid that, your may need to prepare a file in Sketch first by renaming all the layer names carefully.

  • Pricing: $129 (one time fee)
  • Free trial: 14 day
  • Mac only

Pros:

  • Auto-animate is very smooth
  • Easy to make micro-interactions with Drivers
  • Works very well with Sketch

Cons:

  • Costs $129
  • Auto-animate sometimes creates unintended animations
  • Mobile app requires USB connection
  • No cloud service

Triggers, Timeline and velocity control

  • Auto option in Triggers works similar to Timer InVision Studio has, which allows things like a toast appears automatically after an action completes.
  • Timeline allows you to control duration, ease and sequence of certain animations, or freeze those.
Screenshots of Principle's triggers dropdown menu and Principle UI showing interaction arrows between artboards.
Available triggers and interaction arrows
Principle's timeline UI, showing velocity control popup.
Principle’s timeline UI.

Prototype running locally, on mobile

  • Prototype preview is always open, so super-convenient to test.
  • Connecting an iOS device running Principle Mirror app to Mac via USB cable mirrors a prototype on mobile from desktop.
https://youtu.be/9fqCzWqPmI0

Drivers

Below shows a dynamic header that shrinks when a scroll starts, created with Drivers. As shown below, Drivers is a powerful and useful feature to build various micro-interactions.

https://youtu.be/QNmVGDLygPo

Principle related useful inks


Framer X logo as a section divider for Framer X section.

7. Framer X (Based on v50)

A screenshot of Framer X user interface.
Framer X user interface

Framer X is some of newer tools. You can copy & paste Sketch symbols and elements into Framer X artboard, but you cannot directly open Sketch file. Prototyping features for average users are fairly basic, and does not have auto-animate capability. But for code-savvy users, you can use code to do more advanced prototyping.

  • Price: $12/month (pay annually) or $15/month
  • Trial: 14 day
  • Mac only

Pros:

  • Store for easy component downloads
  • Stack is a smart, powerful feature
  • Code extensibility, code handoff
  • Supports videos

Cons:

  • Limited Sketch compatibility (copy & paste only)
  • Basic transitions are limited
  • No mobile app
  • Monthly subscription ($12/month)

Transitions

Preset transitions are fairly basic.

A screenshot of Preset transitions of Framer X.
Preset transitions in Framer X is fairly basic.

Running a prototype locally, on mobile

  • Clicking on Play icon opens up a window to run a prototype locally.
  • Framer X does not have a mobile app. Scanning a QR code opens up a browser for to run a prototype.
Clicking a mobile icon displays a QR code so that you can scan it from your mobile phone to open a prototype in a mobile browser.

Stack, Store, Motion API

Framer X Store
  • Stack is a powerful feature for creating lists and grids. Objects dropped into a Stack becomes auto-adjustable elements. Stack can be nested.
  • Store allows you to search and download various useful components. Video Player and YouTube Player components from the Store are super-convenient.
  • For a code-savvy users, Motion API opens up various advanced prototyping possibilities via code.
  • Web version is work in progress as below.

Team

Small Teams allows members to share components via secure Team Store.

Framer X website showing pricing for Individual, Small Teams, Company.
Framer X pricing including Individual, Small Team, and Company

Framer X related useful links


Figma logo as a section divider for Figma section.

8. Figma (Based on Figma Desktop App release 85 Build 10)

Screenshot of Figma user interface (desktop version)
Figma user interface (desktop version)

Figma is unique in a way that it was built primarily as a web application saving it’s files to the cloud by default, even in their desktop version. Figma can import Sketch file, but could take quite some time to complete the import. Prototyping feature is fairly basic.

  • Pricing: Free
  • Starter: Free for up to 2 Editors and 3 projects
  • Professional: $12 per editor/month billed annually or $15 month-to-month
  • Both Mac and Windows

Pros:

  • Files are saved to the cloud by default
  • Free up to three projects, two editors (collaborators)
  • Well-designed user interface

Cons:

  • Limited transition options
  • Cannot copy & paste objects from Sketch (import only)
  • Free version limited to 3 prototypes

Home screen, prototype mode, prototype panel

  • Figma has a home screen called Drafts that displays all of your projects. Files are saved to the cloud by default.
  • Figma has Design mode and Prototype mode, similar to Adobe XD.
  • Smart Animate was added in 2019 to catch up with the competition.
Figma's various controls in prototyping: trigger, transition and action shown in screenshots.
Figma’s various controls in prototyping: trigger, transition, action

Running a prototype locally, in the cloud, on mobile

  • Clicking on Play button opens up a new tab and runs a prototype locally.
  • Clicking on Share Prototype creates a link to share with others.
  • People who received the prototype link can view the prototype via a web browser.
  • While a project is open on your computer AND an artboard is selected, Figma Mirror app can mirror the prototype on mobile.
https://youtu.be/53lQQhnVAi8

Importing a Sketch file, plugins

  • Importing a Sketch file may take some time to complete.
  • Plugins are available from Figma website.
Clicking on Import file on the top left allows you to import Sketch file, shown in Figma UI.
Clicking on Import file on the top left allows you to import Sketch file.

Collaboration — Share an individual file, create a Team

  • You can easily share your individual file with edit permission.
  • You can create a Team from Figma web UI then invite members. Team feature is free for up to 2 editors and 3 projects.
  • You can easily move your file from Drafts to a Project within a Team to collaborate.
  • Team feature is free for up to 2 editors and 3 projects. Beyond that, Figma offers 2 types of paid subscription plans for more robust feature supports, Professional with $12 per editor/month, or Organization with $45 per editor/month.
A screenshot of Figma web UI showing a Team with members and projects
Figma web UI showing a Team with members and projects

Figma related useful inks


Section divider graphic with section title: Recommendations for beginners.

So what is recommended for beginners?

There are three options depending on what’s important to you.

1: Sketch + InVision Studio

Given the de facto standard status of Sketch, Sketch with InVision Studio to animate prototypes makes a good choice. InVision Studio is free, but sharing a prototype requires cloud upload, which is limited to 1 prototype in a free account. And Sketch is not free.

2: Figma

Figma is free and gaining tractions these days because of its strengths in cloud-based collaboration feature. If realtime collaboration is a high priority for you, Figma is the way to go.

3: Adobe XD

Currently, Adobe XD is the only tool that allows you to create voice interaction prototypes. XD also has Coediting for realtime collaboration. If you want to pursue voice interaction and collaboration is important for you, XD should be the choice, and it’s free.


Thank you for reading. Best wishes to your success!


This article was published on Medium in UX Collective.

#23 How to prepare for whiteboard challenge or app critique during a UX job interview

A person working on a whiteboard challenge and app critique while hiring managers are watching.

I totally understand that you get nervous, and want to prepare as much as possible, when you have an upcoming UX job interview with a whiteboard challenge or an app critique.

Here are things that you might want to consider.

  1. Try to put yourself in a user’s shoes and feel/experience/think the product from a user’s perspective, rather than trying to see things as a smart expert observing from an outside.
  2. Try to see a forest first (big picture) rather than getting caught up in each tree (details)
  3. Focus on the most important feature/task.

All of these will help you think about how you would use the product in your life in which context (where, when, how…etc)

The product could be the app your are asked to criticize during an app critique session, or the web application you are asked to design on a whiteboard.

It’s important to put the product in a context that it belongs when it is used.
Once the product is put in a context, it will naturally reveal what works and what may not work, what you may want to improve/change, or what actions you may consider/etc.

In addition to these, here are some more general things that you should keep in mind.

  1. Try to think out loud so that the interviewers understand your thought process.
  2. Try to be as crisp and clear as possible when you speak out loud.

Hiring side typically wants to see your thought process, how you approach problems, how you articulate your ideas and communicate to others effectively. 

They also want to see if you are a team player with a good positive energy, and a right fit for their team or not.

“App critique” or “white board challenge” (or whatever it is) are more or less just a vehicle to see how these aspects of a candidate come through.

Relax, be yourself, be friendly, be excited, be confident and enjoy the whole process as if you are working as part of the team with your interviewers.

Then you will be fine!

Even if you didn’t do well during your interview, going through an interview process to prepare for a whiteboard challenge or an app critique under pressure by themselves give you invaluable lessons.

Your experience will not be wasted.


Check out YouTube version too!

Also, check out Why it’s important to have 2 different UX portfolios too!

#22 Why it’s important to have 2 different UX portfolios

Illustration showing a person looking at two UX portfolios in a drawer

UX portfolio is the most important component when you market yourself and apply for a job. Yes, your previous work experiences are important too, and your college degrees still matter to certain extent. But UX portfolio is the most concrete and tangible proof of your work.

Nothing beats that.

I would suggest that you have 2 UX portfolios:

  1. In-depth process walkthrough portfolio (PDF or ppt or Keynote)
  2. Online portfolio

In-depth process walkthrough portfolio

Hiring managers and recruiters are looking for candidates who can actually deliver tangible results. Well, what does that mean?

So a UX designer’s job is to solve a user’s problem. In order to prove yourself to hiring managers and recruiters that you can deliver, you need to show the process through tangible artifacts. You need to show your thought process and decision-making process.

This means that bunch of screenshots of a final product don’t mean much.

Because screenshots don’t tell any story about why.

  • What was the process that you took to get there?
  • What kind of key decisions did you make along the way?
  • What were the reasoning for those decisions?
  • What kind of user research did you do?
  • What were the key findings from those user research?
  • What was your role and contribution to the project?
  • What were the things that didn’t work well?
  • What were the things that worked well?
  • How did you define the problem in the first place?
  • Or was it defined by someone already?
  • How did you work with PM and engineers and other stakeholders?

These are types of things that hiring managers and recruiters need to know in order to evaluate UX designer candidates.

All these can be captured in a process walkthrough document. This is an in-depth walkthrough of your process throughout the project, which will give its audience a detailed view of how you worked. Typically, it’s better to create this type of portfolio in a presentation style such as PDF, Powerpoint, Keynote.

Pick one or two of your strongest projects, and create in-depth process walkthrough. This works great for in-person onsite interviews, where you will be given 30 minutes to an hour to present your work.

Hiring managers and recruiters are looking for your problem solving process and ability. How you define a problem, how you approach and solve the problem, how you learn what worked and what didn’t, how you iterate your design based on those learnings, and what your process is to go through all those/etc.

In-depth process walkthrough portfolio should be able to answer all those questions.

Ideally, when you work on any UX projects, you should make a habit of documenting your process along the way. 

Once project documentation becomes your habit, you will be in a far better position than before, so that you are always one step away from putting together an in-depth process walkthrough portfolio.

Online UX portfolio

Another UX portfolio that you should prepare is an online portfolio.

This should cover wider range of projects without getting too much into details to show a variety of projects that you worked on. Just include basic information such as project/product name, year, your contribution, key accomplishments.

This online portfolio works well when you initially apply for a position.

Many people use portfolio platforms such as Behance, which is probably the easiest way to get started. The downside of using such popular platform is that your portfolio page could easily get lost in the crowd, because there are so many similar portfolios competing yours.

If you can afford it, creating your own WordPress portfolio site with your own domain may make it stand out from the crowd.

But this is more time consuming and expensive solution, so it’s definitely not for everyone.


Check out YouTube version too!

Also, check out How to start your own UX project too!

#21 What you need to keep in mind when considering a bootcamp (2020)

A person being skeptical about UX bootcamps with a title text.

So UX bootcamps have become one of popular paths to become a UX designer. In principle, having various educational options and opportunities are good. But there are certain things that you need to be aware of and keep in mind when considering taking a UX bootcamp.

I totally understand that choosing what’s best for you is a stressful process, because there are so much information out there, and people say different things. Obviously when you try to put in your hard-earned money, you really want to make sure that you are putting it to the right one. Some people desperately wants to know which UX bootcamp is the best.

But here is a reality.

There’s probably no one who can precisely answer that question, because there’s no one who has ever taken ALL the existing UX bootcamps!

With that said, I wanted to bring up a few key things to keep in mind to help you find the best way to move forward.

1. Bootcamp certificates don’t mean anything to hiring managers and recruiters. 

Your portfolio does. Your college degree still does to certain extent, which acts as a filter when hiring managers and recruiters have to go through thousands of resumes.

2. Be careful if a bootcamp course includes coding as mandatory.

That’s a warning sign. That’s their tactics to charge you more money. Coding is absolutely not necessary for a UX designer. Check out my other article dedicated to this topic.

3. Don’t think just finishing a bootcamp will make you an experienced UX designer right away. 

It doesn’t. Being a UX designer is a journey of continuous learning. Bootcamp is just one part of that journey. You need to actually work on real UX projects to learn and get better, and that takes time.

4. Don’t become a victim of bootcamp’s bloated marketing messages

Many bootcamps make bloated marketing messages around becoming a full-stack UX designer who can code, or immediately getting a job with a high salary right after graduating. Some bootcamp graduates seem to become victims of this, resulted in showing arrogant attitudes thinking they know everything but they don’t.

5. Large bootcamps are becoming like UX candidate factories, pumping out candidates with identical portfolios 

They keep pumping out bootcamp grads to the job market, which caused many lookalike candidates with identical portfolios following the same process template. This happens more with larger bootcamps because of the scale factor. You need to be aware of this so that you can differentiate yourself from the crowd.

6. Instructor hit or miss

Sometimes you get unlucky, and have assigned an inexperienced instructor who just graduated from a bootcamp. This might be due to bootcamps trying to take more students than their own capacity to grow their businesses.

These altogether start generating some negativity towards big-name bootcamp grads among some hiring managers and recruiters.

It finally comes down to how much effort that you put into whichever course you end up taking, and keep learning with a humble mind even after completing the course.

Because taking a course is only the beginning.  Being a UX designer is a journey of continuous learning.

As long as you have this right mindset, which exact bootcamp or online course that you end up taking becomes less important.

Below are some interesting articles about bootcamps that you might want to check out.

Questions you need to ask before going to a UX Bootcamp

The UX of Getting Started in UX

Check out YouTube version too!

#20 How to start your own UX project (5 steps)

A person standing without knowing how to start his first own UX project.

So UX is something that is hard to learn if you don’t actually do it. By working through UX projects, you will learn so many things as you go. You can only learn effectively by doing. That’s the best way to learn. It’s OK even if you feel like you are not ready. Which is why it’s important to work on your own UX project!

Let me show you one of UX process frameworks that you could use to start your own UX project. There are many frameworks out there with slight different variations, quite a different ones and so on and so on. Which framework to use is less important.

The most important thing is how you actually work through your project, and solve a user’s problem through a user-centered design practice.

OK, with that in mind, let’s take a look at the process framework.

  1. Problem statement
  2. Competitive Benchmarking
  3. Concept development
  4. User test
  5. Design iteration

It’s simple enough, right?

OK, let’s take a closer look at each step.

Step 1: Problem statement

This is where you define what problem that you are trying to solve in your UX project. Find a UX problem, and define it clearly. It might be easier if you pick something that you use on a regular basis, whether it’s a mobile app, a web application, a software program, or an electronics device/etc.

Step 2: Competitive benchmarking

Find example products that tackles similar problem that you are trying to solve, analyze pros and cons so that you can learn from those. This is a great research opportunity to look for how people are tacking similar problems and coming up with solutions. If you cannot find an exact match that is totally fine. As long as it has some similarities to your project so that you can learn from it, that’s fine.

Step 3: Concept development

This is where you come up with UX concepts to solve the problem in form of task flows, wireframes and prototypes.

Step 4: User test 

Once you are done with creating your UX concepts in form of task flows, wireframes and prototypes, it’s time to put your concept in front of your users!

Find 5 target users and conduct user test sessions.  Put your concept prototype in front of them and find what works and what doesn’t. Summarize all the findings.

Step 5: Design iteration 

This is where you iterate your design by incorporating findings from the user test.


As you work through these steps, document all the process as you go. 

This documentation basically becomes your project in-depth walkthrough, which can be put into your portfolio.

It would be ideal to have 2 different portfolios: a) online portfolio covering many projects with less details for initial distribution , b) PDF portfolio that shows in-depth walkthrough of your 1-2 strongest projects, which is effective during in-person job interviews.

If you want to learn more about working on your mock project to great details, check out RealWorldUX basics course and basics light course from the link below.


Check out YouTube version too!

Also, check out Being a UX designer is a journey of continuous learning!

#19 A UX designer does not need to learn how to code (fact)

An image showing a person confronted with a sea of code, but relieved to find out that he does not need to learn how to code as a UX designer.

I answer many questions in UX online forums such as Reddit. And I see that many people seem to misunderstand about this. So I wanted to clarify: A UX designer does not need to learn how to code.

99% of UX designer positions out there in the job market don’t require coding skills.

Especially if you are starting out to become a UX designer, don’t worry about learning how to code. Because you absolutely don’t need it.

A UX designer’s job is to solve a user’s problem. This includes defining a problem, and then coming up with UX design concepts that solve that problem in form of task flows, wireframes and prototypes.

Ultimately digital interactive products need to be coded by engineers in order to launch in a market as a real product. A UX designer needs to work closely with engineers in order to have her design implemented in code. 

For this reason, a tight collaboration with engineers is absolutely critical for a UX designer. There’s no question about it. But that does not mean that a UX designer needs to learn how to code. What’s more important is to learn how to communicate with engineers effectively. This is more about being a good listener, and understand where engineers come from, how they work, what their priorities are, and what they need to accomplish their goals.

A UX designer should be a good listener with a compassion, so that she is empathic when listening to her users during user research. This same soft skill can be and should be used when communicating with engineers, or anyone, really.

UX design is something that you can only learn by doing. Only through working on actual projects, you will gain experience and get better. And along the way, you will face many questions, you will feel a strong need or a burning desire to want to learn certain things.

That’s how you should and will learn new things, new skills, new specific areas within UX, or outside of UX.

Being a UX designer is a journey of continuous learning.

Somewhere along the way of your journey, you might come across a strong need and develop a strong interest towards learning how to code. If that happened to you, that’s the exact right timing when you should learn how to code. If this doesn’t happen, that’s totally fine too! This could happen when you are talking to an engineer,  and the engineer mentioned something that made you curious about. Or when you want to prototype a very dynamic UX concept that you came up with, which was not possible to show in a basic click through prototype.

If you happen to come across these situations and develop a desire and interest to learn how to code, that’s good, go for it. Even though in general, a UX designer does not need to learn how to code, there are certainly benefits for a UX designer in learning how to code.

Let me show you why.

  1. Having some understanding of code allows a UX designer to be more grounded and practical when coming up with a UX concept. As a result, your UX concept will likely be more implementable and realistic.
  2. Understanding how to code makes it a bit easier to talk to engineers, because you can understand what they say and how they think much better with greater details.
  3. Having a coding skill may open up a new creative possibility for a UX designer, so that she can build a more dynamic, code-based prototype to visualize innovative concepts that may be hard to prototype otherwise.

From my own experience as a UX designer, I benefited quite a lot especially from #3, and that was a driving force for me to want to learn how to code so that I can achieve what I wanted in a prototype that I built.

One caution for you: Coding is a totally different beast, which requires a totally different skillset and mindset part of your brain! You can easily get drowned once you dive in.

In my case, even though I did quite a bit of coding to build dynamic prototypes, I came across a lot of occasions where I had to do a lot of debugging to find out what went wrong when things were not working as expected.

This was quite painful, because coding was not my core expertise, not what I wanted to focus on. My focus and priority has always been visualizing UX concepts in the most compelling way. If a code-based approach is the best way to achieve this, that was when I went for coding. So coding itself was never the main thing. But lot of times, you end up spending a lot of time figuring out errors in your own code. Coding is very interesting. It has an art in its own way. For example, writing a function with variables and logics is very creative, flexible, with so many possibilities. I enjoyed it very much for sure.

I’ve met a very few UX designers throughout my careers who have natural talents and interests in coding, who can do amazing things by code such as generative arts. But there aren’t many such people.

Ultimately, it comes down to what’s most important for you as a UX designer.

Keep reminding yourself what’s the most important thing to you.

As long as you always ask yourself about your priority, you will find your answer in you.


Check out A prototype is worth a 1000 pictures to learn about the effectiveness of a prototype.

Check out the YouTube version too!

#30 What I learned from COVID-19 data visualization

An image of a laptop showing COVID-19 data visualizations

Designers have tremendous power and responsibility to handle data and communicate the message visually through various media. The way two designers slice and present the data could make the stories in the two graphics look completely different. This hugely affects the perception and understanding of the viewers.

Today, we are flooded with all sorts of COVID-19 related information, visualized in various different ways. While it’s important to stay up to date with the latest information, I felt many visualizations that I see are often short-sighted, and lack a holistic perspective. Among the majority of these, I was able to find a few really good data visualizations that helped me understand a broader perspective. I’d like to share those with you.


Volume comparison with influenza

While the COVID-19 outbreak is terrifying, I strongly felt a need to calm down and view data objectively, so that I can take actions effectively and efficiently without reacting irrationally by fears. I also felt I have a responsibility as a designer to contribute to the world in this respect, which is why I decided to write this article.

Number of people infected to influenza annually vs. number of people infected to COVID-19 as of 4/2/2020 
Source:  US National Library of Medicine, Worldmeter
Number of people infected to influenza annually vs. number of people infected to COVID-19 as of 4/2/2020
Source: US National Library of Medicine, Worldmeter

The above chart shows there are up to 1 billion people who get infected with influenza every year, according to US National Library of Medicine. The latest data on the number of people infected to COVID-19 counts 1.7 million as of writing this today according to worldmeters.info. It’s still April, and the number is continuously growing at a rapid pace, so I don’t know how far it’s going to go.

On the other hand, I usually don’t pay much attention to the massive impact that influenza has every year. My typical attention on influenza has been nothing more than vaguely thinking “oh, it’s another flu season again…”.

This time, however, I paid more attention for the first time on how massive the effect of influenza has always been. Something that I probably never bothered to look at if COVID-19 never happened.

Fatality rate: Influenza vs. COVID-19 as of 4/2/2020
Source: US National Library of Medicine, Worldmeter
Fatality rate: Influenza vs. COVID-19 as of 4/2/2020
Source: US National Library of Medicine, Worldmeter

Fatality rates visualized with Y-axis manipulation

When I looked at the death count of both COVID-19 and influenza above, the fatality rate in COVID-19 was drastically higher than influenza. The break down by age of the fatality rates showed me a brutal reality that older age groups were significantly higher in COVID-19 compared to seasonal flu as seen in a chart below.

Source: OurWorldInData.org

But I noticed that the maximum value for Y-axis was set to 6%, mapped from the highest value which was the fatality rate of people with 60+ years for COVID-19. Since this graph shows percentages out of total, the maximum value should be set to 100% to give viewers the correct ratio of the data.

So I recreated a graph based on the same data, setting the maximum value of Y-axis to 100% (see below). It looked a lot different from the original chart. The magnitude of all the bars looked less threatening because the highest value was 6 out of 100%. This is how it should be rendered for a percentage-based graph in my opinion.

However, most of COVID-19 fatality rate charts that I see show the maximum value of Y-axis mapped to the highest value like the example above. This is not a data manipulation, but I think it ends up exaggerating the fatality rates of COVID-19 to be more frightening than needed. This article written by Ryan Mccready describes these tactics as one of the common ways to manipulate viewers.

OurWorldInData.org’s graph recreated with Y axis maximum value set to 100%

Top 10 cause of death worldwide

A bar graph showing top 10 cause of death in 2016 with COVID-19 death. Source: WHO, W
Source: WHO, Worldmeter

While looking into COVID-19 statistics, I also wanted to look into how many people die with what kind of causes annually and globally. According to WHO, a total of 56.9 million people died in 2016 worldwide. This number blew me away. In another words, we already live in a world where so many people die every year for various causes.

This is absolutely not to say that we don’t need to worry about COVID-19 by any means. But at the same time, I needed to understand the big picture from a global point of view. For example, 1.4 million people died from road injuries alone. Most of the time, I don’t even have a chance to see such global statistics. COVID-19 pandemic gave me an opportunity to consider all these numbers around deaths in a global context. It also made me appreciate the fact that I still live healthily today.


History of pandemics

I came across a stunning data visualization of the history of pandemics created by visualcapitalist.com below. This introduced me to a history of pandemics. It gave me a broader perspective that humans have always lived in this continuum of constant pandemics. Below is a quote from visualcapitalist.com.

THROUGHOUT HISTORY, as humans spread across the world, infectious diseases have been a constant companion. Even in this modern era, outbreaks are nearly constant.

Visualcapitalist.com
A diagram "History of Pandemics" 
 with pandemics visualized in virus-like spheres. Source: Visualcapitalist.com
Source: Visualcapitalist.com

While this diagram was visually intriguing and the content presented was very good and informative, I found a few issues as stated below.

  • Abstracted and generalized virus-like representation was visually interesting and drew my attention in the first place, but it was a more or less cosmetic effect.
  • The three-dimensional depth of field towards Z-axis made it impossible to visually compare the sizes of virus-like spheres from different eras.
  • It was unclear how the values were mapped to the sizes of the spheres. Was it radius, or the mass? If mapped to the mass, it was not visually intuitive.
  • Color coding seemed arbitrary.
  • Spherical form factor made it hard to plot precisely on a timeline.
  • Because visual size comparison along the timeline was not possible, the designer duplicated another set of spheres just for the size comparison.

Different 3D visualization can make data easier to compare

Below is how I recreated the data visualization, which allowed a viewer to:

  1. See a precise plotting of each pandemic on the timeline
  2. Compare size of pandemics visually

Obviously it no longer had the colorful virus-like spheres that the original diagram had which drew my attention in the first place. Instead, those were replaced by a bunch of boring bars in a 3D space!

But it achieved successfully in presenting above two aspects without having to duplicate another set of data.

As you can see, a devastating impact and magnitude of Black Death was massive, which was missing in the original diagram as it was far back along the z-axis timeline thus rendered much smaller.

History of pandemics visualized differently for easier comparison - 3D bar graph, created by the author.
Data is based on Visualcapitalist.com and Worldmeter
History of pandemics visualized differently for easier comparison – 3D bar graph
Data is based on Visualcapitalist.com and Worldmeter

Interestingly, this 3D visualization allowed an overall holistic view of the data along the timeline while each data still being relatively comparable, as opposed to a 2D bar chart below which became a mess.

In the 2D bar chart, 1800–2000 area was too narrow to fit in all the pandemics that concentrated in that time period. As a result, too many callout lines were overlaid on top of each other and the bars, making it hard to track and read which one was which.

When it came to the most recent 5 pandemics, it was impossible to show on the same plane, which forced those to be separated in a callout box on the top right corner.

History of pandemics visualized differently in a simple 2D bar graph, which ended up a mess, experimented by the author.
Data is based on Visualcapitalist.com and Worldmeter
History of pandemics visualized differently in a simple 2D bar graph, which ended up a mess.
Data is based on 
Visualcapitalist.com and Worldmeter

Cause and effect of social distancing brilliantly visualized

Here’s another chart that I found extremely powerful and convincing in showing the effectiveness of social distancing, and the consequence of abandoning it too early. I found this in Vox’s article titled How we know ending social distancing will lead to more deaths, in one chart.

The highest peak comes after social distancing measures were lifted, with the death rate falling only after they were reinstituted.

Source: Vox
A graph that shows the effectiveness of social distancing from St Louis case. Source: Vox
Source: Vox

From visual design perspective, the chart above is nothing special. Rather, it’s a very basic black and white line graph accompanied by bars on the bottom.

However, the content that it carries has significant value in my opinion. This is a clear evidence of how social distancing was effective in a pandemic situation. The way the death rate line graph was combined with the timeline of school closure and the public gathering ban was a brilliant execution to highlight a clear cause and effect relationship between those elements visually. I would say this is a masterpiece of infographics.

Instead of constantly showing fatality rates in Y-axis-manipulated graphs, a quality chart like this should be shared and circulated more across our news and social media. That would be far more informative, helpful and effective for viewers to understand the criticality of social distancing because it clearly illustrates its effectiveness without further explanation. That’s the power of data visualization.


Understanding a big picture is an important first step to take actions

Confronting with loads of COVID-19 data visualizations while sheltering in place gave me an ironically interesting opportunity to think through these as a designer and it motivated me to write this article. It made me realize that asking good questions and understanding the big picture is crucial in order to grasp the situation unbiased, so that I can take the correct actions with confidence.

  • Can I get a big picture of past pandemics in our history?
  • Do I know the impact of influenza every year in volume?
  • How many people die every year worldwide for what causes?
  • Why is social distancing important?
  • What can I do to help myself, my family, and others?

The whole situation reminded me of Rachel Carson’s quote from her famous book, Silent Spring, which I borrowed in a Global Village animation that I wrote about in my previous article.

The human race is challenged more than ever before to demonstrate our mastery, not over nature but of ourselves.

Rachel Carson, Silent Spring 1962

I feel like we as the human race are challenged to not only care about ourselves but also care for others. To demonstrate our mastery, understanding is one of the first important steps. I took this step, and now I feel more prepared than before.


This article was published on Medium in Nightingale, the Journal of the Data Visualization Society, as a collaboration article with Nightingale’s editor and healthcare data visualization expert, Amanda Makulec, and Jason Forrest, Nightingale’s editor in chief.

If you are interested in data visualization, check out the following articles too!