by tarek.marzouki -

IMPULSE #2: Design Patterns for AI Interfaces

With more tools adopting AI — generative text, code assistants, smart search, content creation — there’s a rush to “add AI” to every product. Without good UI/UX, many of these additions end up confusing or frustrating users. The patterns from this talk offer a more sustainable, user-centric approach to AI integration. As a UI UX designer working with a product team trying to explore AI features, these insights help avoid common pitfalls during research and practice.

The traditional chatbot (a blank text box, open prompt) is often insufficient; it places too much burden on the user to guess what to ask for, how to phrase it, what input format works. Instead, AI UIs should provide structure — templates, guided inputs, preset actions — that shape user intent and make the AI’s capabilities and limitations clear.

Structured Input & Output UX

  • Input UX: Rather than free-form prompts, designers can use structured templates, presets, or guided flows so users don’t need to “guess” how to phrase their request. This improves usability and broadens the accessibility of AI tools to non-expert users.
  • Output UX: AI responses — often long, verbose, or ambiguous — should be presented in a digestible way. Use of rich formatting (e.g. collapsible reasoning traces, style lenses, ranking, color-coding) helps users find value quickly.

Why These Patterns Matter and What They Solve

Lowering friction and cognitive load: Many people don’t know how to “talk to AI.” Structured inputs/templates reduce the intimidation and guesswork.

Making AI more reliable and trustworthy: By clarifying what AI can (and can’t) do, and giving users control (via refinements, options, transparency), designers can avoid “hallucinations,” miscommunication, and user frustration.

Delivering value quickly and predictably: Well-designed AI interfaces help users get useful results with minimal effort — increasing adoption and satisfaction.

Supporting diverse user types: Not everyone is a “power user.” Good patterns make AI accessible to novices while still serving experienced users.

First results from AI often need tuning. Good AI interfaces let users refine — through follow-up prompts, filter buttons, adjustment sliders (e.g. “temperature” or style), or iterative flows — to get closer to what they need. This is more powerful than expecting a single perfect answer.

Rather than isolating AI in a separate “assistant” screen, embed AI features where they feel natural: side-panels, overlays, inline suggestions, context-aware widgets — wherever they support the user’s task flow. This makes AI feel like a seamless extension, not a tacked-on add-on.

Design Patterns For AI Interfaces — Smashing Magazine

Design Patterns for AI Interfaces by Vitaly Friedman

by tarek.marzouki -

IMPULSE #1: Creating an effective & beautiful data visualisation from scratch

It is amazing to me personally that this talk was almost entirely about introducing one
of the most underrated coding language in data viz, D3.js, which is a lang that should
be a staple in every team that wants to create bespoke charts and design beautiful yet
functional dashboards from scratch and proudly enough my master’s thesis main topic
is about a SaaS that has a dashboard that will be created entirely by the unpopular D3.js.

I was and will be involved in designing all the components needed for the dashboard and also in the appropriate research to find out how to develop those components on a web app level which is was done later by a fellow full stack developer.

What is the talk about

  • The talk shows how to build a unique, effective — and “beautiful” — data visualization from nothing but a blank browser window, using D3.js.
  • The goal isn’t simply to produce a standard chart, but to think creatively and intentionally — using “out-of-the-box thinking” and code — combining design sense with technical implementation.

Nadieh’s background: she trained in astronomy, worked in data science, but found her passion in data visualization. Over time she developed a distinct style of data-driven “data art” rather than generic graphs.

Data → Story → Visual

A recurring theme: good visualizations start with a story — or a question — not just with data. You ask: what insight or narrative do you want to reveal? That shapes how you approach the data and what kind of visual you will build.

Nadieh emphasizes that often the best question emerges after a bit of data exploration — so the “question” evolves.

Before designing, you have to understand what the data actually contains: its type (quantitative, categorical, etc.), structure, quirks, what’s important — and who will be reading the visualization. This affects choices like chart type, level of detail, labels, readability.

Not all charts fit all data: pick a visual representation that expresses clearly what you want to communicate — trends, distributions, comparisons, relationships, etc. Sometimes that means abandoning “standard” charts in favor of more creative or custom visuals.

Because people are visual, design elements matter. But they must serve the data, not overshadow it. Use color thoughtfully (e.g., for differentiation, accessibility), maintain consistent palettes, use spacing, hierarchy, alignments to make it easy to read.

Nadieh’s own work often uses vibrant palettes and custom design touches — she argues that if you’re building by hand (e.g., using D3 + SVG), you can push beyond default library charts to create something truly expressive yet still accurate.

Why This Talk Stands Out

This talk offers something beyond standard data-viz best-practices or template-driven dashboards: it’s about treating data visualisation as a creative process, a blend of design, storytelling, and coding.

Seeing the creation from an empty browser to a full chart helps demystify the building process — it shows that you don’t need heavy software or prebuilt templates to produce something expressive and meaningful. You just need data, a clear purpose, and willingness to think visually + code.. This talk is inspiring to me on many levels because my research is based on creating meaningful data visualizations rather than just “reports” or “dashboards”

https://slideslive.com/39043157/creating-an-effective-beautiful-data-visualisation-from-scratch?ref=folder-188701

https://www.geeksforgeeks.org/data-visualization/6-tips-for-creating-effective-data-visualizations

https://pixelpioneers.co/blog/designing-data-visualisations-an-interview-with-nadieh-bremer?utm_source=chatgpt.com

by tarek.marzouki -

Task III: Proseminar Master’s Thesis

Creating the Photographic Film Look:
Intricacies and Misconceptions of Film vs Digital

Author: Niklas Maximillian Dostal
Year: 2024

Overall presentation quality 9/10

The presentation quality of this thesis has surprised me by how much the author researched about the industry of cinematography and tried to look through every crevice to find material that supported his theory and practice, which resulted in a meticulous and astounding presentation of every perspective cited and all the contentions that has been written.

Degree of innovation 8/10

Coming from a photography and filmmaking enthusiasts as myself, I can testify that this thesis is a collection of perspectives and technicalities both from the digital and film realms that were collected attentively, although, the author explored and delved into the eternal question of Digital vs Film which is a subject that is explored and talked about by many people around the globe and still to this day sparks differences of narratives and opinions that sometimes lead to heated debates, however, the thesis still has a significant contribution to the field.

Independence 9/10

There is a unique aspect to this thesis which is that one of the main challenges of the topic that was discussed and detailed in the theory and narratives part was converted into practice in the later stage, which gives an originality to the overall work.

Organization and structure 9/10

The thesis was clear and concise and gave an inside look of the technological shifts in Cinema as well as the perspectives on Film vs Digital, even a beginner can get a decent idea about the subject given the simplicity of how the author presented everything, he presented the narratives logically from both ends inserting screenshots from different films along with citations from well respected cinematographers and filmmakers, finalized by his on the field work, incorporating both technics using the digital to shoot and Davinci Resolve to create the film look in post-production.

Communication 9/10

The human factor in writing and presenting every chapter gave the thesis an organic and realistic approach to the subject, which goes hand in hand with the whole ethos of the work which made the delivery effective to both professionals, connoisseurs and beginners.

Scope 9/10

I believe that the length of the thesis is balanced, not too short to make it shallow and not too long to make it redundant. In terms of depth, it has enough depth both theoretically and practically and when the author delved deep into understanding film explaining all the nuances of Grain, Colours, Halations etc.. he kept it relevant and summarized it well at the end.

Accuracy and attention to detail 8/10

The linguistic and vocabulary aspects of the thesis are above average and were used correctly in accordance with the content of every chapter.

Literature 10/10

The quality of materials used was good enough, from screenshots to illustrations and they were always relevant to what it discussed and cited along with the appropriate description and all the sources at the end.

by tarek.marzouki -

Creating an effective & beautiful data visualisation from scratch

It is amazing to me personally that this talk was almost entirely about introducing one of the most underrated coding language in data viz, D3.js, which is a lang that should be a staple in every team that wants to create bespoke charts and design beautiful yet functional dashboards from scratch and proudly enough my master’s thesis main topic is about a SaaS that has a dashboard that was created entirely by the unpopular D3.js.
I was involved in designing all the components needed for the dashboard which is called “Steering” and also in the appropriate research to find out how to develop those components on a web app level which is was done later by a fellow full stack developer.

by tarek.marzouki -

Design Patterns for Search UX in 2025

One of the main reflections that I took from this talk is the fact that search UX patterns are often overlooked and misused, even in very important websites like governmental
websites or e-commerce web shops you will struggle to find what you’re looking for and the speaker emphasized something that is really important in fixing this issue which is that searching, filtering and sorting should be treated as one UX pattern both on a design and development level.

Also the notion of selective scanning which is a mental behavior that users use intentially and unintentially to scan interfaces for information relevant to them which highlights the importance of using visual hierarchy along with real usability testing to determine the right UI patterns.

by tarek.marzouki -

Business Management x Customer Experience x Data Visualisation: 1st prototype

In the current digital era, Customer Experience has evolved with multichannel support, chatbots, self-care, and virtual assistants to reduce customer effort, driving the development of Customer Relationship Management tools. However, while significant investments have focused on empowering AI-assisted agents, the role of managers has been largely underserved.​

I’m designing a solution to empower the “Augmented Manager”, equipping leaders with advanced tools and analytics to optimize real-time-onsite–remote-team performances and deliver outstanding results in an increasingly complex, tech-driven customer experience ecosystem.

Beside.you is a Software As A Service (SaaS) solution, is developed to simplify decision-making and boost efficiency for managers.

By solving the biggest business challenges, with intuitive functionalities simplifying Steering, Performance management, and resources’ Growth, it is shaping a future whereall business tools work seamlessly together, unlocking unmatched operational excellence for organizations everywhere.

This small demo showcases some parts of the product experience that is offered beginning with Steering on its macro micro levels:

by tarek.marzouki -

Testing & Iterating using Lean UX: ‘Macro’ Steering Dashboard

As part of my SaaS project, one of the user interfaces that had to be done is the Steering dashboard but it required a lot of back and fourth of feedback, iterations and meetings to finally come to a great enough version in terms of functionality and business but as a product designer and using Lean UX as a methodolgy , at some stage I had to do an iteration test.

Macro and Steering are the fundamentals of what consists this interface, they serve the business internally as much as they serve it externally with clients and prospects.

Macro: refers to the holistic overview of an insights dashboard and its part of the macro-micro dynamic that I’m using as a system thinking for the whole project.

Steering: provides a real-time view of every KPI needed to make better decisions and steer the business towards a better course.

This testing/iteration process shows the first level of a user interface that required little user interview, user feedback and zero iteration but it served as a good foundation and a stepping stone to a later version that will pave the way to the “final” iteration.

The first version was even called ‘Adherence Planning’ which was an innacurate term of what we are trying to achieve and also because it defined only one aspect of the whole dashboard.

It had the basic insights that we want to show without much output but it was limited, inefficient and not value driven on a business level.

So after much stakeholder’s feedback we iterated that version to a much effective version that visualised the data in a much more functional manner and I did that through designing the work force performance gauge chart, rearranging the cards to suit the data monitoring priority, tweaked the charts and their colors on a UI level for more effective anomaly identification, streamlied the data visualisation with proper alerts identification and finally made the 3 dots ‘kebab’ compartment the drawer where every additional setting is hidden, and here is where I arrived:

The Steering Dashboard is now much more structured and serves the decision making business goal on a decent level, every KPI can be checked and monitored in real time along with checking the business performance in terms of profit and loss through the “Work force performance” gauge.

What I learned

A disruptive data vizualisation product can never be done, but through proper UI UX design, testing, iterating and coming up with the optimal solutions, it can reach a certain level of efficient structure that will propel it to achieve some of the business goals that were far further in the roadmap of the product experience and all of the above can only be done through collaboration and proper communication within a team.

All and all, I’m just getting started and i’m thrilled to work more on the refinement of both my skills and everything that I get involved in

by tarek.marzouki -

What I learned as the Best Practices For Designing an Intuitive Mobile Dashboard

A mobile dashboard may not offer the full functionality of its desktop counterpart, but it can still provide users with a scannable view of top-line data and statistics to let them make informed decisions. It can also give managers and executives the necessary tooling to quickly approve orders, contracts, and procedure and policy documents.

I drew from experience and other proficient UX Designers some of the best practices and key aspects that designers can use to design better mobile dashboards:

Smooth Navigation

Let’s start with navigation as this is how users will get acquainted with your dashboard and find the information they’re looking for. If the navigation for your mobile dashboard is clumsy or disjointed, or your search bar or navigation menu isn’t well suited to touch-based interactions, you are likely to turn off users.

Visual prioritization is key. Responsive mobile dashboards should communicate information quickly and prioritize it in a clear visual hierarchy. Another dashboard design best practice is using the principle of progressive disclosure to reveal information only when the user needs it.

Consider space, button styles, and the user’s first impression when converting a desktop design into its mobile counterpart. (Coinbase)

This mobile dashboard effectively uses space to prioritize the most essential options. Crucial buttons from the left-hand panel on desktop become the bottom navigation bar on mobile, a standard for mobile menus as the position falls into the “Z” page scanning pattern where users’ attention tends to land.

Responsive Tables and Charts

Designing responsive mobile tables and charts can be a challenge, but in my experience, the customer satisfaction it provides is worth it.

Generally, I advocate for responsive web designs that send a single code set to all devices but use fluid grids and media queries to change the appearance of elements based on a device’s size and orientation. This common and effective method is used in mobile dashboards to collapse table row headers into column headers in a set of stacked, standalone cards that can be scrolled through vertically. The approach offers an elegant mobile presentation that avoids squishing cells, while allowing the user to quickly peruse large amounts of data.

Button Design

Arguably, one of the biggest challenges in creating a responsive mobile dashboard is sizing and arranging buttons. Why? Because, unlike on desktop, you touch them, rather than select them with a cursor or keyboard command. They need to be big enough and spaced out enough to be tapped comfortably, and, due to the limited screen space, some will have to be collapsed into sub-menus or even hidden.

Kebab menus save space on mobile screens by enabling users to access hidden buttons.

Standard button design principles should apply to your mobile designs. I tend to divide button design into two main principles: You should present buttons in a range of styles (sizes, colors, and shapes) that denote their relative importance through visual cues; and the text label or icon associated with a button should connote its semantic meaning and intended function—for instance, whether the button affirms an action, selects a tool, navigates to a new page, or cancels an action.

But you may have important buttons that can’t be hidden. As an alternative to the kebab menu, you could simply increase the button size to meet the mobile guidelines and then stack them vertically. Another alternative would be to leave the most crucial buttons at full size and make secondary buttons smaller by replacing the text label with an icon. When considering which technique to use, decide which buttons are most essential on each page.

Conclusion

When the project scope and budget allow, it’s most efficient to consider how a responsive mobile dashboard will look and function as you’re building out the desktop version. This will save time and development costs later in the product life cycle, and it will also help ensure brand consistency across devices. It’s also paramount to recruit a skilled developer to assess the feasibility of various design approaches, and, where needed, define CSS rules for reconfiguring tables and charts. Above all, try to faithfully recreate as much of the desktop experience as you can: You may have to eliminate some features and functionality, but it’s important not to dumb down the design and to follow the UX design process.

Mobile dashboard UI shouldn’t be an afterthought. If designed with care and foresight, mobile dashboards can provide significant value to users.

by tarek.marzouki -

Empty States: Why They Drive Business Change and Why They Matter in UX

Empty states are often overlooked in UX design, but they can be drivers of substantial business benefits, and if done right, contribute to a more compelling user experience.

One of the UI UX patterns that I came across while working on my data viz project was the pattern/notion of Empty States which can be obsolete for some designers because they may see it as redundant or sometimes they don’t know that its a notion that should be contributing to the user experience as a whole.

Here are a few empty state examples:

Searching for something in Gmail and getting no results.

A new Dropbox screen where no files or folders have been created.

The resulting screen after completing all tasks in a to-do list manager.

Getting an error screen in Slack when a command isn’t supported.

Starting a new social networking account and there are no connections.

Types of Empty States

Here are four types of frequently encountered empty states:

  • First use – Occurs with a new product or service when there is still nothing to show, such as a new Evernote or Dropbox account.
  • User cleared – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
  • Errors – These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems.
  • No results/No data – No data found UI design occurs when there is nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example).

The Benefits of Using Well-designed Empty States

Designing well-thought-out and useful empty state illustrations and screens can help drive product engagement, delight users, and reduce churn. This decreases the chances of losing users to competitor products, thus leaving them frustrated or lost.

When applied to empty state design, these principles can be of great benefit to a business—for example, an increase in product satisfaction, and the lowering of abandonment rates.

Here are three additional areas that can also benefit from good empty state design:

  • User onboarding – Provides an opportunity to build trust and continued use of the product in addition to an elevated user experience.
  • Brand building – Generates awareness and promotes the company in order to build increased brand equity.
  • Personalization – Can be playful, fun, serious, or dynamic in various states of use; creates a sense of a personal touch.

The benefits of well-designed empty states cannot be underestimated. They not only contribute to a compelling customer experience, but as windows of opportunity to keep customers happy and engaged get shorter and shorter, they are just plain good business.

Conclusion

It’s easy to overlook empty states (or empty screens) in UX design because they occur infrequently and aren’t always well understood. However, the benefits to their inclusion are understated because they enhance the user experience and help create a more cohesive product.


by tarek.marzouki -

What I learned as the Core Principles for Designing Better Quantitative Content

Clutter and confusion are not attributes of data—they are shortcomings of design. – Edward Tufte

Michael Friendly defines data visualization as “information which has been abstracted in some schematic form, including attributes or variables for the units of information.” In other words, it is a coherent way to visually communicate quantitative content. Depending on its attributes, the data may be represented in many different ways, such as a line graph, bar chart, pie chart, scatter plot, or map.

It’s important for product designers to adhere to data visualization best practices and determine the best way to present a data set visually. Data visualizations should be useful, visually appealing and never misleading. Especially when working with very large data sets, developing a cohesive format is vital to creating visualizations that are both useful and aesthetic.

Principles

Define a Clear Purpose


Data visualization should answer vital strategic questions, provide real value, and help solve real problems. It can be used to track performance, monitor customer behavior, and measure effectiveness of processes, for instance. Taking time at the outset of a data visualization project to clearly define the purpose and priorities will make the end result more useful and prevent wasting time creating visuals that are unnecessary.

Know the Audience


A data visualization is useless if not designed to communicate clearly with the target audience. It should be compatible with the audience’s expertise and allow viewers to view and process data easily and quickly. Take into account how familiar the audience is with the basic principles being presented by the data, as well as whether they’re likely to have a background in STEM fields, where charts and graphs are more likely to be viewed on a regular basis.

Visual Features to Show the Data Properly


There are so many different types of charts. Deciding what type is best for visualizing the data being presented is an art unto itself. The right chart will not only make the data easier to understand, but also present it in the most accurate light. To make the right choice, consider what type of data you need to convey, and to whom it is being conveyed.

Make Data Visualization Inclusive


Color is used extensively as a way to represent and differentiate information. According to a recent study conducted by Salesforce, it is also a key factor in user decisions.

They analyzed how people responded to different color combinations used in charts, assuming that they would have stronger preferences for palettes that had subtle color variations since it would be more aesthetically appealing.

However, they found that while appealing, subtle palettes made the charts more difficult to analyze and gain insights. That entirely defeats the purpose of creating a visualization to display data.

The font choice can affect the legibility of text, enhancing or detracting from the intended meaning. Because of this, it’s better to avoid display fonts and stick to more basic serif or sans serif typefaces.

Conclusion

Good data visualization should communicate a data set clearly and effectively by using graphics. The best visualizations make it easy to comprehend data at a glance. They take complex information and break it down in a way that makes it simple for the target audience to understand and on which to base their decisions.

As Edward R. Tufte pointed out, “the essential test of design is how well it assists the understanding of the content, not how stylish it is.” Data visualizations, especially, should adhere to this idea. The goal is to enhance the data through design, not draw attention to the design itself.

Keeping these data visualization best practices in mind simplifies the process of designing infographics that are genuinely useful to their audience.