06/01/2022No Comments

What’s Wrong with the Atomic Design System?

Atomic Design is a way of organising a design system from small components to large components. These components are referred to as atoms, molecules, organisms, templates, and pages. They all work together to create an effective interface design system. An atom is the smallest building block and combines with other atoms to form molecules. A button is considered to be an atom and when combined with other elements like an input field it will create a form which is considered to be a molecule.

UI elements

The Atomic Design System Flaw

Sounds great eh? But wait, Atomic Design has one flaw that makes it difficult to work with.

So you've organised your design components into atoms, molecules, organisms, templates and you feel like some kind of design god. Then you come to look for those components when building a design like a form on a website. In your design god head, buttons and more complicated things a dropdown button are fairly similar. But according to Atomic Design they sit in two different categories. We have now encountered the problem that is technically know as, "Is this an atom or a molecule, what the hell is it, Jimmy?".

They are both navigational tools that should sit somewhere in the same group but in Atomic Design they are split based on their complexity. It would make more sense to organise components into groups based on their functionality.

Atomic Design's flaw

At Bridge Studio we encountered this problem when creating a design system from scratch for one of our clients. Atomic Design was actually a useful frame work to use when creating the components. We started with the smallest components then worked our way up to combining them to create more complicated molecules and organisms. However, halfway through this we realised it's flaw. We decided to finish creating the components in this manner and then reorganised them in a more logical way after.

Our design system

This is how we organised our design system for our fintech clients.


This is the core of our design system and will effect everything going forward. It contains the following elements:

  • Colour
  • Typography
  • Spacing
  • The grid


These are the building blocks we use to create our pages. They are then divided into sub groups based on functionality. This section also include things like modal windows that contain various smaller elements. Here are just some examples components:

  • Buttons > Buttons with icons, dropdowns, dropdowns with search, etc.
  • Icons
  • Input fields > Search, text inputs, date inputs
  • Selectors > Check boxes, Radios, Toggles
  • Date picker
  • Modal popup > basic alerts, popups with text inputs


These are pages that have examples of the most common UI elements. They show how the design system works and also serves as starting templates when creating new designs. Here are some examples:

  • Home page
  • Sign up page
  • Contact page

This is how we went about organising our design system but I'm sure there are many other ways of doing it. This is just what suited us at the time.

Advantages of this design system:

No illogical boundaries between sections.

Disadvantages of this design system:

It can create long lists of components that take a while to search.

At the end of the day design systems are humongous beasts that will take some time to tame. Because of their complex nature they will always be difficult to organise. It does take time to get to know how to use them but if created correctly they will be a great asset for your team.

Want to know how Bridge Studio could help you with digital products?

Contact us

17/11/2021Comments are off for this post.

The Beauties and the Beasts of Financial Branding

The financial services industry has been undergoing a slow and painful transformation in the last 20 years. A new generation of fintech brands have lit a fire under traditional banks’ arses not only go digital, but to also think about visual website and app identity, user experience and overall branding. This digitalisation push has been further catapulted by the millennial head down generation of smartphone addicts and the recent pandemic which has given consumers a not-so-gentle nudge to interact digitally with their banks. A recent study found that today, 57% of consumers prefer internet banking and 55% prefer banking mobile apps. 
Man on mobile while waiting for a train.

While banks are scrambling to improve their digital presence, Fintechs are light years ahead focusing not only on their brand and products, but overall UX and UI usability. Why? Because they understand the importance of providing their customers with a positive experience which in turn strengthens their loyalty. Knowing this, Fintech brands make it rain and invest heavily in their end user. According to 2020 S&P Global research, traditional banks spent $30 billion on digital transformation while Fintechs spent $111 billion.

Let’s take a look at what differentiates the Beauties from the Beasts in the world of branding and UX.

The beastly traditional bank user experience

Let’s look at an actual experience my friend (let’s call him James) had recently. James lives in Spain because he loves beer & tapas and naturally he has an account with a Spanish bank from the north of the country to pay for his vices. He wanted to use the bank app for a simple (at least that's what he thought) transaction–change his pin. Once James logged in, this is what the main menu looked like:

Menu UI

Pure horror! The menu is crowded and confusing. The icons are inconsistent and not intuitive. Which one changes the pin? Beats me.

And let’s talk about these colours… cold, sterile, no life or personality. The overall feel is confusing, stuffy and corporate. 

As smart as James is, he couldn't figure out how to change his pin so he decided to have a chat with customer service. Let’s look at the chat bar.

Chat UI

The chat menu UI changes completely from the main menu. Is that intentional or an oversight? Who knows… And what’s up with the huge grey space between SEARCH and SALIR. 

In the end, was James able to reset his pin? Well……. Yes and no…. He wasn't able to do it online nor did the chat customer service provide him with any “service”, but he did take an hour out of his work day to walk to his bank branch where he manually changed his pin. Customer service, UX and UI at it’s best! Major fail.

The new sexy fintech brand beauties

The financial sector was never considered a “sexy” industry, but the fintech industry changed all that. The new kids on the financial block are creating ripples in the world of apps, branding and UX to keep up with needs of end users who are seeking easier and friendlier digital tools and experience. To cater to their customers, fintech brands such as Revolut, Wise, Monzo and N26 have raised the bar for app design, branding, UX and UI, making the sector nouveau-sexy.  How? Here area just a few things…

User-friendly experience 

While the finance world can be complex, confusing and overwhelming, fintech brands are essentially solving those problems by simplifying the process and information aggregation for the customer. Not only are the apps simple and striking, but the user interface is more intuitive making a customer journey easy and less frustrating. The home section presents everything in one place, with clear design that’s easy to navigate. Fintech brands stick to the “less is more” strategy providing only the essential info and keeping all the complicated data available behind the scenes.

Good UI design

Keep the user experience simple AND easy

Customers want to understand their finances in a quick and digestible way. Fintech brands converted these problems into opportunities by providing “complex” data in a visual and non-complicated way.  The financial info is presented in a simpler and playful way which doesn’t complicate or overwhelm the customer.

Good and bad examples of UX design

Don’t be a square brand

Traditional banks have strict branding guidelines guided by boring colours and literal names (RBS-Royal Bank of Scotland or Bank of England). Fintech brands, on the other hand, think outside the box and push their creative boundaries when it comes to finding catchy names and thinking about their brands. The colors are bright, the names are fun and the overall tone is friendly and inclusive.

Trust is king for fintech brands

Fintechs brands are the new kids on the block, 100% online and lack physical branches where customers can have human interactions and build trust, which is extremely important when it comes to handling money. They rely on social proof to build brand loyalty, communicate their values, solutions and social responsibility. This “social influence” is pivotal and must be visible everywhere: on websites, social media channels, company blogs and all fintech brand communications. Some additional ways fintech brands build trust are customer testimonials, Q&A, and rating.

Bank review on trust pilot
This says it all...

Fintech Brand tone of voice

Along with making fitech brands visually cool and sexy, they have also changed the way they communicate with the customers. While traditional brands adhere to a formal, cold and impersonal tone, fintechs have made it friendly and fun. The language is more “human” and warm, creating an emotional connection with the customer.

Human tone of voice example. "the first online bank you'll love."

Today, having a financial product online is not enough to survive. Keeping brand and user experience in the frontlines is what separates the traditional financial beasts from the user-obsessed fintech beauties. 

If you are creating a new fintech brand or thinking of a make-over, we can help by creating a customised workshop to move your brand forward with a clear set of actions.

By Juliya Obukhovskaya, Bridge Studio Content Writer

13/03/2018No Comments

How to improve your focus


Do you remember that guy who got caught doing that thing to that wolf and the best thing was… oh wait a moment I just got a message… oh yeah, the time when Chris… 2 secs, gotta take this, it’s really important, so sorry… Anyway, the police told me that… shit, I have to go, let’s catch up soon… sorry, when? I’ll pm you on Instagram…

Being able to concentrate for prolonged periods really makes a difference to the outcome of your tasks. Shallow and fragmented thinking is the enemy to good work. I’m going to share with you some of the things that help me get shit done. Some things might be obvious but in any case I hope at least some are helpful.

1 De-clutter to focus more

De-cluttering helps remove distractions. This should be considered in the physical and emotional sense. Let’s start with the mind. Before going to bed I find journalling about the day helps empty my mind of all the nagging clutter. I list all the major events that happened that day, this is a bit like backing up files from your hard-drive before cleaning it. It also helps you remember things to act on the next day.

De-clutter your work space. There has a been a lot said on this already so I won’t go into much detail. You’ll have more space to move and be less stressed. A messy work place is also really distracting, oh look there’s that note I wrote about that wolf a month ago…

2 Block out distractions

Open plan offices are cool but can be really noisy and distracting. Even though my office in Madrid is pretty small it can get quite noisy. Yes, I know how noisy Spanish designers can be…

One way of blocking unwanted p̵e̵o̵p̵l̵e̵ noise is putting on your headphones and selecting your favourite playlist. However, I find it hard to concentrate while listening to music, especially when writing. On www.noisli.com you can create custom background noise. It surprisingly filters out any unwanted noise. If you really want to listen to music there are plenty of playlists on Spotify that have unobtrusive tracks. I find repetitive deep electronic music the best. It makes me feel like a design robot from the year 2000.

You already know this but social media is a rabbit hole of distraction. Of course you just had to check that thing but now your looking at a video of that guy, the wolf and the Tory MP, how did it get to this? (I mean you looking at the video, not the Tory MP and wolf, we kinda already know what they do in their spare time.)

I use the Chrome extension Stay Focused, to stop me laughing all day at dodgy politicians.


3. Organise

It’s easy to get distracted when you have no plan. I use a combination of Trello, Pomello and Google Calendar.

I organise Trello in the following columns. On Hold, This week, Today, Sent for feedback, Approved, Invoice sent, and Paid. I then time block the projects for this week in my Google Calendar. It helps to leave some buffer time as not everything goes to plan. Pomello is a timer that syncs with Trello. It gives you 25 minutes blocks to work on projects then 5 minutes rest. I feel a lot more productive when I know I should be working on something and not wasting my clients time on social media.

It also helps to block in time to read mails as this can really break your working rhythm. I try to keep my inbox down to only mails that need to be acted upon. The rest get filed away.


4. Calmness helps creativity

We all know how meditation helps you focus. For me it’s helped me be more conscious of my thoughts and their origins. Meditating everyday will help you focus on your task by quieting your chattering brain.


“Compared to non-meditators, meditators had more stability in their ventral posteromedial cortex (vPMC). The vPMC, a region linked to spontaneous thoughts and mind-wandering, lies on the underside of the brain, in the middle of your head.” Psychology Today

5. Exercise improves creative focus

If you’re sat down all day you’ll probably need to compensate by having a good workout routine. Exercise can help impulse control by triggering endorphins, which improve the prioritising functions of the brain and in the long term it can help starve off brain ageing and Alzheimer’s.

6. Creative Environment

If these tips above don’t seem to be working try working in a different location. I find my productivity is boosted by spending a few hours working in a cafe or different part of the office.

7. The Drugs

The short term advantages of drinking coffee can be considerable but in the long term you’re just robbing yourself of future energy. Look at it as a kind of nitro boost in a computer game that uses up your fuel faster than normal. Alternatively, tea can give you a more subtle boost without the crash associated with drinking coffee.


If none of the above are working it’s probably Friday afternoon, in which case you should consider swapping the mouse for a pint of some kind of intoxicating liquid, if not the hand of someone close.

Here’s the summary:

1. De-clutter
Journal at night
Keep a clean working space

2. Block out distractions
Spotify — concentration playlists
Stay Focused

3. Organise your day
Time block with Goolge Calendar

4. Calmness & De-stress

5. Exercise

6. Change your environment
Work in a different room or go to a cafe

7. The drugs
Use coffee sparingly and try tea

Would you like more focus in your organisation? Take a look at how we could help you with our workshops.