How I Adopted the Atomic Design Method to Streamline the Design Process and Boost Productivity for a Startup's Digital Appearance

Web Design

10 min read

2023

Product Design

User Research

Figma

Wireframe

Atomic Design Method

Prototyping

Context

Despite numerous client revisions, user research constraints and completing an end-to-end web design project using Figma for the first time, I utilised the Atomic Design Method to create an effective and engaging web design. Make It! is my first gig after completing a High Diploma from Dublin City University during the challenging two years of the pandemic. Make It! is an art and craft lesson provider, was also established during these difficult times, needed a professional online appearance to enhance credibility and attract more bookings. It was a perfect fit. I designed and built their website with adaptability to diverse screen sizes and supported all digital forms of their brand strategy.

Challenges

As a new designer, I diligently followed the Double Diamond process and felt confident with the clear guidelines from my studies. However, the reality was that finalizing the define phase proved to be very challenging when the discovery phase was constantly evolving. As a result, whenever I was eager to start designing, I often had to go back and redefine elements based on new research and information discovered early in the project. The logo itself was changed over ten times, and the primary colors of aqua and coral, requested by the business owner, had significant accessibility contrast issues. Each time I needed to make a change in my Figma design, it was time-consuming.

To stay updated with industry trends and continue learning in this new profession, I made it a daily routine to read on Medium, Dribbble, and follow other UX designers on LinkedIn. Through this, I learned about the Atomic Design Method. I began setting up the smallest atoms in my Figma canvas and created components, variants, and component sets with micro-interactions. It was a game changer for me. My Figma files became much more organized, and I no longer needed to manually make the same changes repeatedly.

More Challenges

The primary venue for Make It! is at local schools, where unauthorized or unvetted personnel are not permitted on school grounds. The secondary venue for the service is an hourly rental location, primarily used for festive arts and crafts sessions. These constraints posed significant challenges for me in observing the service in action, capturing high-quality images for design materials, and most importantly, conducting proper user research. In the early design stage, I could only base my design on the business owners' requirements and interviews with the business owner's daughter and a couple of their friends.

One of the top qualities for a UX designer is problem-solving skills! With some persuasion and preparation, I convinced the business owners to host a special event, free of charge, at one of their homes. Customers were invited to volunteer for the event, where they received free T-shirts with the Make It! logo as gifts, which also served as good advertising for the business. During the event, I integrated my questions for the children into their usual art and craft activities, such as asking them to select the most appealing colours or visuals. I then conducted semi-structured interviews with the parents.

By the time the event took place, I already had a mockup to test with some of the parents. The event was a great success, and I gained invaluable insights that I couldn't have known otherwise. For example, I learned about the keywords people use to search for such services, the motivation for children to participate in art and craft classes, the preferred and trusted payment processes, and how people would like to receive communication from the service.

Actions

With the information gained, I created user personas, storyboards, and refined the prototype, addressing issues I discovered through usability testing using the cognitive walkthrough method. For example, the decorated hamburger symbol that the business owner initially thought was a nice touch proved to be confusing for real users. Another issue was the excessively large header on the landing page for mobile devices, which limited the space available for users to access the main content. Despite this, the owner prioritized a prominent, upfront logo to establish a strong first impression.

To address this, I attempted to design a header that would dynamically shrink upon scrolling, using animation options in Figma's prototype mode. Unfortunately, Figma does not currently offer an animation-on-scroll feature. Ultimately, I implemented an overlay frame to preserve the initial appearance of a prominent, centered logo while reducing the header size to improve accessibility to the landing page's content.

Reflection

This project was a rewarding learning experience for me! My past career and experience really put into use when helping and supporting Make It! with branding and business strategies. My Figma skills were miles better than at the start of the project. Initially, I found Figma's "Auto-layout" feature to be confusing and complicated. However, through practice, I've come to appreciate its power and now feel extremely comfortable incorporating "Auto-layout" into my design work routinely. The adoption of the Atomic design method was instrumental in guiding the organisation of my design workspace. This approach not only streamlined my workflow but also proved to be a significant time-saver during the iterative design and feedback process.

Another key takeaway from this project was the firsthand experience of the benefits of early testing and iteration. While theoretical knowledge about these practices provided a foundation, it was the practical application that truly brought home their value. Engaging in this process allowed me to view my work from a new perspective, uncovering user flow issues and other problems that were not immediately apparent. Repeated usability testing and cognitive walkthroughs, coupled with the use of automated tools to check for WCAG compliance, were instrumental in refining the design. Furthermore, designing for a target audience that includes children presented unique challenges in conducting thorough user research. These experiences underscored the importance of flexibility and creativity in design research, particularly when working with diverse and specific user groups.

Overall, this project has not only enhanced my technical skills but also deepened my understanding of the user-centered design process. It has taught me the importance of patience, rigorous testing, and the willingness to embrace feedback at every stage. I look forward to carrying these lessons forward into future projects, continuously refining my approach to design to meet users' needs more effectively.

Get in touch.

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Next
Next

Quantitative Research