Atomic Design: A hack that'll solve 3 common problems in UX design

Remember your high school chemistry class? 

...Me either. 

But when you start thinking about Atomic Design, those long nights trying to memorize the periodic table start coming to mind.

alt

What is atomic web design?

atomic-design-process

Atomic web design is a methodology made up of five stages: Atoms, molecules, organisms, templates, and web pages. It is an approach to build better user interfaces that make for driven, strong, and valuable user experiences for end-users. Because UX design today is all about delivering memorable experiences that keep people from bouncing within seconds, solutions like the atomic design process need to be leveraged. Good thing we have your back! The atomic web design process starts at the most basic level and merges each level after that to build more complex solutions for the needs of your users. That way if one part of the process goes wrong, then you’ll know the steps that led up to the bump in the road. Are you able to backtrack efficiently within your UX design process when you run into problems?

 

Assessing your UX strategy for gaps

When there are gaps to fill in your UX strategy, it's more than likely that your UX strategy is facing at least one of the 3 problems I’m about to introduce. Let’s jump in!

 

1. Nothing about your UX strategy is feasible

Users want an experience that is practical and capable of helping them achieve what they’re looking for. For example, if a user is unable to get to your contact page without encountering bumps in the road, then feasibility was not achieved. It’s like buying a new GPS system that makes it difficult to get from one place to another. This is why it’s crucial to create a roadmap with pit stops along the way for designers and any other internal departments involved to have a firm understanding of the idea behind the UX design process.

 

2. Presenting an incomplete customer journey

In UX design, it is common to design mock-ups of what the website pages should look like after the design process is complete. The ultimate goal is to create a user experience that embodies the customer journey for any business, blog, or website. The problem is being inconsistent when other people get involved and not having the groundwork, or blueprint, available to prevent longer feedback cycles, duplication of efforts, and different components within the UX process that ruin the customer journey.

 

3. Lack of component reusability

The coexisting building blocks in atomic web design that define the design system as a whole are important. We here at Webstacks are stans for atomic design because every building block become reusable. A UX strategy that isn’t built on reusable components lacks the ability to move along the roadmap and locate any  inconsistencies that are affecting the scalability of your design. Reusable components save designers time, effort, and creativity that can be applied to other projects such as using the same components to build something even better.

 

How is UX involved in atomic web design?

Load speed is the most common characteristic tied to UX design since it involves cultivating the true user experience. But in atomic web design, UX is more than load speed and getting users from point A to point B. In an article that I read, the author compared the difference between UI and UX using a house. The author used this analogy to describe the process of web design, establishing UI as the interior design (style, color, look) and UX as the architecture (planning, structure). This is 100% facts in atomic web design—Here’s why.

atomic design process, house blueprint

Because atomic design is often portrayed as a design process for UI design, it deals more with merging basic components into larger beings to create the user interface. But as the analogy suggested, you must work from a structure or plan to deliver the quality that your users deserve. This is why UX is more important in the atomic web design process than ever before!

 

In the atomic design process, designers start small and work their way up by building reusable components piece-by-piece. This gives designers more power to focus on the strategy and research side of things while also taking charge of styles and colors if needed. You can’t build a house without having a blueprint, just like you can’t build a web page without basic components.

 

Merging atomic web design with UX is a no brainer

atomic design process, reusable content

The next step would be to learn how the benefits of using atomic web design will solve the woes of your UX strategy. Again, the ultimate goal is to use atoms to build complex organisms that eventually shape into working maps for your UX strategy.

 

1. Quick, reliable, and reusable components

Atomic web design enables designers to work faster, smarter, and more diligently. When designers are pressed for time and pages need to be built for event marketing, content marketing, or company announcement purposes, who are you going to call? Not Ghostbusters, but certainly those stored components that are waiting to be reused.

 

2. Reusable components alleviate inconsistencies

Today, people notice the smallest details you think will go unnoticed. This is why it’s crucial to uphold consistency throughout website pages, blog posts, and templates. Reusable components will maintain consistency. Ensure prospects consume the same modules and templates by storing every component built using the atomic design process.

 

3. A customer journey that excites and succeeds

Just like designers being ecstatic about component reusability brought by atomic web design, end-users will be stoked when the webpages they land on have a purpose. Although users won’t have an idea of what design process is being used to construct the page, they will always have the final word. The atomic design process at least allows designers to start on the right foot, building a customer journey that is structured, researched, and executed properly.

 

*Bonus*

Your ROI will love every second of it. The ROI in UX design through the atomic web design process is $100 for every $1 invested. This methodology will help you leverage your UX strategy for a positive ROI impact.

 

A methodology that’ll revitalize your UX strategy

UX strategy, UX design process

For UX designers who are at any company, stakeholders can now recognize the value design systems bring to the table when everything is structured and planned. The consistency that atomic web design offers is a plus. Next time introduce the atomic design process by asking your peers or boss if they too don’t remember anything from Chemistry class.

Do you remember Chemistry class?

Apologies if we brought back terrible teenage memories. It was all for Atomic Design.
careers-image

Posts you might also like

How responsive design brings marketing and development teams together for better scalability
February 23, 2021
How responsive design brings marketing and development teams together for better scalability
HubSpot workflows that will help improve your lead nurturing process
February 8, 2021
HubSpot workflows that will help improve your lead nurturing process
Why your organization needs a MarTech stack in 2021
January 28, 2021
Why your organization needs a MarTech stack in 2021
How to build a Slack app using the Slack bolt framework
January 25, 2021
How to build a Slack app using the Slack bolt framework
Webstacks named a HubSpot Elite Partner, becoming #10 ranked partner globally
January 15, 2021
Webstacks named a HubSpot Elite Partner, becoming #10 ranked partner globally