The Elements of UX & UI Visualized

Image for post
Image for post


As Digital Product Designers we’re always seeking out workflow improvements and new innovative ways to exceed the brief. However as the UX & UI universe expands it’s becoming almost impossible to consider all the tools, inputs, outputs and methods to maximize aesthetics and functionality. Missing an element that adversely effects product design is a very real risk. With this in mind we undertook the monumental task of creating a concentric circle data visualization you can hang on the wall of your agency. One which can be a go to when pondering new approaches for your clients.

Concentric Circle Data Visualisation

A 15 second plug on why we picked the infographical element we did… Concentric Circle infographics supports visualising categories or channels of connected information. We selected it because we could visualise the complete spectrum UX & UI tools. Allowing viewers eyes to move from the centre and follow a silo of topics outward as it becomes more granular.

Download A0 Poster

If you’d like to download the A0 poster to print and hang on your studio wall you may download it free here.

Image for post
Image for post

In Summary

The diagram is divided into several top level categories. These present a jump off point for designers to consider before undertaking a new product design. Let’s summarise each of these to highlight how we navigate the UI & UX wheel to derive the approach define a workflow and set of tools.


UX & UI Tools slice the pie presenting the digital tools designers can call on to support the process. From wireframing through to high fidelity mock-up through demo creation. There is a tool to fit the job and personal preference of every designer.

Action Buttons

UX & UI patterns have solidified a common set of recognizable controls whether it be an add to cart icon or other UI controls. Having these key patterns front and centre will support better usability during your design process.

Input Device

New input devices are coming into the limelight constantly. For example new VR goggles have one button to control interactions providing new challenges for product designers. In this section of the pie we list out input devices helping you brainstorm how device capability can synthesize with your product.

Output Device

Output devices are another UI & UX design consideration that is constantly evolving. Depending on your medium whether it be TV, PC, Smartphone or one of the many other media like wearables or goggle, you should prioritize your product design in line with your target users adoption rate of a specific medium.

User Controls

Different standard and custom app controls which form most of the possible interactions users are accustomed to using. Like drop down menus through to custom mobile interactions like Snapchat has in play.

Visual Design

Visual design are the top level methods of communication images, fonts, colour… that form the basis of your design.


Methods of working together from a design thinking perspective to design better UX & UI.


Here at a glance we have the sketching and wireframing tools we all love for quickly iterating on different ideas when designing a digital product.

Site Mapping

Is the paragon of UX planning and there are various forms it takes depending on the view you wish to communicate to your team and stakeholders.

User Satisfaction & User Testing

The new benchmark in UX & UI services is to undertake rigorous product testing. Although user testing isn’t a new concept, its profile has been bolstered to a level of prominence spurred in some respects by Agile and Lean practices that make user feedback a central factor. In our diagram we cover a host of user testing solutions to support your workflow.


Prototyping is fast becoming an expanding area of innovation. Products like Adobe Experience Design, Invision and UX Pin are seeing high growth for good reason. They are very handy for product designers. It gives you precode feedback that presents an opportunity to gather valuable insights by developing product designs in an interactive capacity before a single line of code is written.


Is the King of all design projects. Content comes in a vast number of forms and having different content types front and centre can serve as a trigger for ideation of possible communication and interaction options.

Data Analytics

If content is king then analytics is its faithful privy council. Providing insights to alter content and design to meet new goals and get insights into avenues for continual improvement.


We hope our UX & UI infographic presents avenues of inspiration for your next product design project. Consider it a gift from Bankai for your studio. Please send us any feedback. We’re always looking to improve and benefit from the community.

Written by

We help companies design human centered products

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store