In a rapidly digitising world where our daily lives are intertwined with digital experiences, ensuring user engagement is crucial. So, if you’re dreaming about creating an award-winning app design, there are a few steps you need to take care of that we will cover in today’s interview.
I’m engaging in another conversation with Dawid, our Head of Product Design at TeaCode, to provide insights into the realm of app user interface (UI) design.
Dawid’s journey in design began in his early years, evolving into a passion that has grown through over 12 years of diverse design experiences. Whether crafting designs for mobile applications, developing websites, or immersing himself in video game design, Dawid has actively participated in numerous design projects, showcasing his expertise and creativity in the digital domain!
Can we start by exploring the golden rules and elements that characterise effective User Interface (UI) design? How do these rules contribute to the overall User Experience (UX)?
I would emphasise four elements while designing a User Interface for an optimal user experience: understanding your audience, remembering about accessibility, testing your solutions and staying updated.
Could you elaborate on each of those elements? Let’s start with the audience.
Sure. In the creation of an application intended for widespread use, it’s important to lean on established design conventions. Rather than reinventing the wheel, our aim should be to enhance users’ experiences by providing a straightforward interface with familiar interactions.
However, while tailoring an application for a specific demographic, we can go a little crazy. A prime example of this approach is evident in Andy’s applications https://www.andy.works/. These diverge from conventional paradigms and prioritise the pure enjoyment of usage. Crafted primarily for tech enthusiasts, they align perfectly with their preferences (including mine ;)). This is what I mean by understanding your target audience!
What User Interface guidelines should we follow in the context of accessibility?
Designers need to consider the importance of distinct contrasts, enlarging font sizes, and the option to skip animations.
These elements contribute not only to the benefit of users with health restrictions but also cater to the power users.
Power users are those within your user base possessing extensive product knowledge and representing the most engaged, expressive, and influential members.
For example, limiting animations for accessibility might reduce visual appeal, but it enables faster interactions, aligning with the preferences of power users. On the other hand, features like keyboard navigation or shortcuts, seemingly designed for power users, also benefit individuals with motor limitations, enabling them to navigate the interface more easily.
How can we assess and validate whether our design solutions are effective?
We can do that at different stages of designing user interfaces. We can start at the very beginning when we have nothing more but a few elements. That’s the moment when we usually make decisions on the visual design so we can create a few variations and ask users for opinions on their preferences.
The creation of interactive, high-fidelity prototypes proves invaluable in validating our solutions, particularly when they involve non-standard interactions or the design is sophisticated.
Observing and actively listening to users whenever possible is crucial to gather meaningful insights.
The last element was to stay updated. What do you mean by that?
I can’t imagine a day without keeping up with design updates on Twitter (now X), checking mastodon.design, or browsing my newsletter subscriptions. The realm of technology undergoes rapid transformations, and staying updated on these changes and actively participating in them enables us to stay inspired and open to new, often better solutions.
Fair enough, I see how everything changes according to social media and marketing trends. My next question is, how do you ensure that UI design aligns with the brand identity and message of the app or company it represents?
The apparent solution would be to align with the company’s corporate identity (CI) and create consistency.
However, there might be instances where the chosen fonts do not display well on mobile devices or the colour palette lacks sufficient contrast. As designers, it is necessary to be attentive to these considerations. While starting with consistency is important, it’s essential to educate the client that an overly rigid adherence to consistency, as appreciated in their marketing department, can be detrimental to the final digital product.
At a strategic stage in the design process, it is beneficial to consult with the client’s marketing department. This involves assessing whether the application resonates with the appropriate tone of voice and ensuring that elements such as illustrations align seamlessly with their established communication style. By incorporating these insights, our application can effectively serve as a cohesive extension of the client’s broader communication ecosystem.
That makes sense. Can you provide examples of apps with well-designed user interfaces and explain what makes them stand out in terms of usability and aesthetics?
Sure. There are many well-designed applications that I use on a daily basis, but I will mention two that, thanks to their design, I use every day.
First is Arc Browser. It is a web browser that fundamentally broke with all accepted rules. Tab bar anchored to the right side, tabs disappearing after 12 hours, and the inclusion of a built-in split view operated through a command bar. It redefines the user’s browsing experience.
The interface itself is not only original but also invites users to explore and play with the browser. It is enriched with micro animations that add a delightful touch. The team from the browser company can surprise you with new improvements every week without hesitation to challenge established norms. For those seeking a fresh and dynamic browsing experience, I highly recommend Arc!
The other one is Craft Docs. This is an application for note-taking and document creation, adopting a block-based approach similar to Notion or Confluence. While styling options may be limited, the default design is brilliantly executed, facilitating the swift and pleasant creation of documents. The shared documents simply always look good, contributing to a more enjoyable recipient experience.
Craft Docs excels in catering to power users, offering a command bar for streamlined selection minimising the need for mouse interactions. In short, Craft is like Notion but stripped of all the over-the-top things like libraries. It focuses on being pleasant to use for an ordinary user. Craft focuses on simplicity and responsiveness as a native application, which significantly enhances its overall reception.
How do you approach the process of creating user personas and understanding user behaviour to inform your UI design decisions?
There are two paths to consider.
The first one involves crafting personas through extensive user interviews, a method that can be both costly and time-intensive. However, clients may not always have the budget or time to spare for this approach. You can read more about creating buyer personas in Kasia’s article.
The second and more commonly used method is the creation of proto-personas. These are personas derived from a combination of research findings and assumptions. In my experience, proto-personas prove invaluable when collaborating within a team, especially while introducing individuals, such as developers, who may not be closely involved in the initial user discovery process.
However, I’d advise revisiting and refining these prototypical personas multiple times throughout the product development cycle, such as after initial user tests or any opportunities to engage with end users directly.
What tools and software do you typically use for your UI designs, and why do you prefer them over others?
After many years and testing all possible solutions, I always come back to one tool. In my opinion, it has no competition at the moment, and this is, of course, Figma. Its unmatched combination of development speed, collaborative features, and an active community places it leagues ahead of the competition.
When it comes to crafting high-fidelity interactive mockups, my go-to choices are ProtoPie and Principle, each offering unique strengths.
Additionally, I embrace the support of AI for generating placeholder texts in mockups, streamlining the design process.
Lastly, Raycast was a game-changer for me and I can’t imagine working on my computer without it. It’s like a supercharged version of Spotlight on Mac, serving as a command centre for power users. It allows me to control various aspects of my system contextually, from arranging app windows to quickly changing text using AI, generating random text for interfaces, extracting colours, searching for GIFs, joining meetings, making quick notes, or turning on sleep mode. With robust extension support and regular updates, Raycast is an indispensable and great tool.
Could you share some tips on designing for various platforms (e.g., iOS, Android, web) and the challenges or considerations specific to each platform?
This is a tricky topic, and we probably don’t have time to go into details right now, but here’s a key piece of advice. If we want our application to have a strong native feeling, it’s crucial to possess extensive experience with a given platform.
Even though there are more apples in my house than in the orchard (yes, I am an Apple fanboy), I have a Google Pixel in my drawer, which I try to use regularly to gain a deeper understanding of the Android system. Without deep knowledge of the system, designing a native application for Android users can be a daunting task. The elusive native feeling distinguishes good applications from exceptional ones.
In addition, keeping up to date with the Human Interface Guidelines from Apple and Material Design from Google is paramount. Regularly refreshing our knowledge with each major software release ensures our designs align seamlessly with evolving platform standards.
Great tips! From your experience, what are some common UI design mistakes that developers and designers should avoid when creating mobile or web apps?
I think facilitating robust communication between developers and designers is crucial and shouldn’t be neglected.
For example, while expediting the release of an initial application version, it proves beneficial to design with developer constraints in mind. I’d recommend opting for a ready-made design system to establish a Minimum Viable Product (MVP) swiftly and not stray too far from its original design. For custom components, structuring them using smaller elements from the design system significantly speeds up the development process, enabling the developer to swiftly understand and implement it.
Moreover, I frequently observe an undue reliance on benchmarks. Designers should be cautious, acknowledging that solutions gained from competitors may be evolving unbeknownst to them. They need to critically evaluate and compare these solutions within the context of the product, making informed choices rather than blindly copying them.
That’s actually quite interesting. Thanks for mentioning that! I just need to clarify one more thing… a few times, you’ve mentioned the design system thing. What’s that? It seems important in a designer’s work.
Of course! First, it’s crucial to differentiate between a Design System and a UI Kit, a common mistake among junior designers. A UI Kit is a set of pre-defined components used to quickly assemble interfaces within design tools like Figma or Sketch. It’s often employed for smaller projects or rapid prototyping.
On the other hand, a Design System is essentially a set of guidelines not only for designers but for the entire team. The core of a Design System lies in documentation, often found in tools like Storybook or Notion. This documentation outlines the philosophy behind the application’s design, detailing each element both visually and, importantly, in terms of how it’s implemented in code.
Design Systems often leverage existing solutions like Material-UI or Ant Design. This ensures that both designers and developers start from the same foundation (the same library), enabling them to work cohesively. While having a Design System facilitates rapid development, it requires a deep understanding of the documentation. From my experience, not every project needs a Design System, but it becomes indispensable as a product evolves.
Great, thanks. I think I understand that way better now. Let’s get back to the main thread. How do you balance the need for a visually appealing UI with the need for a highly functional and user-friendly interface?
Certainly, achieving the mentioned balance is crucial in creating a user-friendly interface. I firmly believe that an application should offer not just efficient functionality but also a visually appealing and user-friendly interface. A significant aspect of this is considering how the application looks and the interactions it incorporates.
In this scenario, it’s important to tailor the User Interface to the devices the application will be used on. For example, if our application heavily features tables and is primarily intended for mobile use, breaking from convention and opting for cards is a strategic choice. Cards provide greater design flexibility, enabling us to strike the desired balance between aesthetics and functionality.
It’s hard for me to imagine what you’re referring to saying about breaking the convention and using cards. Could you share an example of that? Something well-known so it would be understandable to our readers.
Sure! Users don’t necessarily expect tables to look the same on mobile devices and desktops, but they do expect the essential functions they rely on to be present in both. The challenge arises with horizontal scrolling on mobile devices, which can be inefficient and counterintuitive.
In this context, breaking away from the traditional paradigm of horizontally-scrollable tables on mobile, designers might consider transforming each row into an individual card. This is a more user-friendly approach that aligns with mobile interaction patterns.
Okay, now I get it! Can we switch to the importance of responsive design in UI? How do you ensure that the User Interface design works seamlessly across different devices and screen sizes?
In the realm of web applications, responsiveness is fundamental. It’s imperative to ensure that the application seamlessly adapts to a diverse array of resolutions, aspect ratios, and devices. In an ideal situation, the application should provide the same features consistently, regardless of the screen width.
Breakpoints representing moments when the layout transitions to a different configuration, such as going from three columns on desktop to two on tablet and one on mobile, should not affect the core functionalities.
However, practical considerations may sometimes challenge this ideal design principle. It’s crucial to assess how users engage with our application. For example, a complex dashboard system with extensive tables may predominantly attract desktop users. In such cases, optimising the user experience and functionality specifically for desktop resolutions becomes a viable option.
On the other hand, while designing for mobile (e.g. iOS), a hybrid approach is beneficial. This entails responsive design within a specific group of devices, such as iPhones, with varied aspect ratios and adaptive design between distinct groups of devices. This means we approach designing for the iPad in a completely different way – a device that is used slightly differently than the iPhone.
Adaptive design is such an approach where designers do not merely scale between aspect ratios but tailor the design individually to each of the devices within a group.
That sounds like a lot of things to address. My next question is, how do you gather user feedback and handle iteration in the UI design process to continuously improve the app’s user experience?
I believe the most effective method is straightforward: user testing. It involves moderated task scenarios and engaging in casual conversations with as many users as possible. This approach provides valuable insights into the user experience: Is the application enjoyable to use? Is everything clear and comprehensible? Following each round of user testing, we can proceed to iteration.
If recruiting external users is not feasible, conducting tests within the organisation, especially among individuals outside your team, is a viable alternative. However, it’s important to recognise that such individuals may not be actual users of the application, so their feedback should be filtered through this lens.
How do you implement the conclusions from feedback into the design? I think it’s quite easy when conceptualising the app’s first version, but how do you approach that when you already have an app built? What happens if the required change is vast and affects the whole app?
In essence, my principle is that if an element repeats more than once, I turn it into a component – a master element with duplicates across the design. This way, modifying the master component automatically updates all instances throughout. Figma’s fantastic features, like nested components, variants, and auto layout, come into play here. With well-structured files, we can introduce global changes with just a few clicks.
This solution extends to how we code in TeaCode – React also relies heavily on components. In some projects, our component coverage in code aligns almost perfectly with Figma, making global changes a breeze. So, here’s a tip for all designers: keep your layer tree very purple (Disclaimer: a purple layer represents a component or part of a component).
Thanks! You told me already that you need to be up-to-date with the latest design news. So, what are your thoughts on trends in UI design, and how do you decide when to incorporate these trends into your designs to stay current?
I prefer not to adhere to trends as they change quickly strictly. However, staying updated with developments in the design and application landscape is essential.
I’d recommend following large companies like Apple, Google, or Microsoft. Given that their services cater to the largest user base, aligning with their visual principles serves as a sensible benchmark. Users are accustomed to the visual philosophies of iOS or Material Design, finding comfort in them and possessing a familiarity that enhances usability.
To sum up – don’t mindlessly copy trends. Think about all these trends in design through the lens of your product and what you can gain from it.
Let’s move to real-life examples. Let’s say I’m creating my own application without any design background, is it worth using ready-made UI templates? Or is it better to hire someone who will actually create the application design from scratch?
If you lack a strictly visual background, using pre-made assets, UI kits, or system designs is certainly an option, but a sound understanding of UX is necessary. Without this knowledge, there’s a risk of crafting an aesthetically pleasing yet non-functional and, at times, impractical application.
I’d advise you to collaborate with specialists who possess expertise in both visual and user experience aspects, guiding you through the entire design process. While the visual aspect of the application is undoubtedly important, it’s also the icing on the cake, and the groundwork during the discovery process is critical.
In our practice, we frequently leverage existing solutions like MUI, a design system based on Material Design. These tools provide a solid foundation that we customise for specific projects, ensuring a quick and harmonious collaboration with developers from the outset.
Thank you. I want to ask you about your approach to UI design in MVP projects. Is it different from building the whole app from the very beginning?
Absolutely, it does depend! In many cases, especially during the MVP phase when specific functionalities need testing, leveraging pre-existing Design Systems or UI kits proves advantageous. This allows us to concentrate on critical features, refining usability and streamlining the workload, aligning with the essence of MVP – swiftly testing assumptions with real users.
However, if the core of our product centres around its visual appeal, the approach shifts. Here, the emphasis lies on paring down functionality and dedicating efforts to crafting a visually compelling and user-friendly experience. Although this latter approach may be less common, working on such a product always brings an exhilarating dimension to the design process.
You’ve told me a lot about the UI process. But when working in a team, how do you collaborate with developers and other stakeholders to ensure the successful implementation of your UI designs?
A valuable addition we’ve implemented in TeaCode (and that has proven highly effective within our team) is the mandatory recording of work walkthroughs. This serves as a crucial element in defining the completion of a design task.
Upon internal project acceptance within the Design Team, the designer creates a concise video for the developer or stakeholder. In these recordings, the designer elaborates on the functionalities, providing detailed explanations.
This practice significantly enhances project comprehension and often expedites the entire handoff process. In some cases, when time is constrained, this approach may even replace the need for written documentation. Interestingly, I recently discovered that developers appreciate watching our recordings at double speed. This might explain why they think I speak too slowly during all the Google meetings!
True, we are great at optimising work systems! But can you describe a particularly challenging UI design project you’ve worked on and the strategies you used to overcome those challenges?
At a certain point in my career, I decided to devote myself to my second passion alongside design – video games. During this period, my focus predominantly gravitated towards mobile games, drawing on my experience in designing mobile applications. This venture proved to be an extraordinary experience, as designing game interfaces operates on an entirely different level. It necessitated acquiring new skills in both visual and functional aspects.
In the realm of free-to-play mobile games, monetisation takes priority. Interfaces are meticulously crafted to make every click exceptionally satisfying. Paying close attention to feedback, appearance, and animations of each button becomes critical, directly influencing a game’s financial success.
This often involves employing patterns that may not necessarily align with moral considerations, such as leveraging emotions and a sense of guilt in the interface. For example, when a user loses, they receive messages like, “Hey, you lost (your character/pet has died), you can watch an ad to continue/resurrect.” In this scenario, the player faces a decision: either let their character or pet die, sacrificing their progress, or watch an ad to avoid feeling guilty or experiencing a loss.
Transitioning from designing conventional colourful buttons behind rounded corners to interfaces often sketched by hand was refreshing yet immensely demanding.
From this experience, I gained valuable insights, particularly in implementing a bit of “fun” into UI design – a lesson that often proves beneficial in designing more traditional applications.
A fundamental question: how do you stay inspired and motivated in a constantly evolving field like UI design, and where do you find sources of inspiration for your work?
I make it a habit to regularly check X and mastodon.design to stay updated on the latest happenings in our design world. Following numerous outstanding designers keeps me in the loop with industry news.
Additionally, I subscribe to several valuable newsletters such as Figmalion, UX Collective, UX Tools, and Nicelydone. Also, my design book collection is ever-expanding, with my current read being “Microcopy” by Kinneret Yifrah.
Despite these resources, my greatest source of inspiration comes from exploring new applications, learning about them, and integrating them into my daily routine. If you ever need recommendations for the best note-taking apps or to-do lists, I could practically host an entire podcast episode on the subject!
And speaking of podcasts, I might indulge in way too many of them! Listening to shows like The Vergecast, Upgrade, ATP, or Cortex helps me stay updated with technology. They often delve into design issues from a user’s perspective, which I find particularly intriguing. For strictly design-focused podcasts, I recommend Design Details, Deep Dives by Dive, and, unfortunately, the recently closed Layout podcast.
Now I understand why you admitted last time we talked that you have so many apps installed on your mobile!
Dawid, a big thank you for sharing your User Interface expertise with us! I am confident to say that our readers gained new insights and found inspiration for their projects through your valuable insights.
Finally, for those of you intrigued by User Experience app design and the art of striking the perfect balance between simplicity and uniqueness, I strongly encourage you to explore our previous interview with Dawid, where he delves into UX in apps.
If you need help with creating the design of your app, don’t hesitate to contact Dawid via email at dawid.fratczak@teacode.io or catch him on LinkedIn. He’ll be much more than happy to help you achieve all of your design goals and steer your app’s courses towards success and prosperity!
.svg){kind=icon}
