Chat UI design examples

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and more

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and more AoiroStudio Jul 16, 2018 It's that time of the week for our collection of UI/UX interactions to boost your UI inspiration. We are focusing on cool animations, layout designs, UX thinking and more. We are mixing it all from static, dynamic and even live prototypes, this might be a great weekly series to bookmark! This week, we are kicking it off with a very cool combination of colours and UI components designed by Slava Kornilov. You should check out another intuitive UI transition by Ning xiao dong about a Wallet App page. Hope this will give you some inspiration! In this collection we are featuring the work from Slava Kornilov, Hristo Hristov, Adam Przybylski, Shaban Iddrisu™ and more. More Links For more, check out Dribbble Follow my tweets @aoirostudio Follow my pictures on Instagram via Dribbble Design by Slava Kornilov Design by Hristo Hristov Design by Adam Przybylski Design by Shaban Iddrisu™ Design by Yuanxu Design by Robert Felizardo Design by Ning xiao dong Design by Abdullah Un Noman Design by Veera Design by QiYang Design by Aleksandr Lunev Design by Netflayo Design by JUST Team Design by Josh Parenti Design by Christian Puga Design by Boja Design by Graphic Assets Design by Alexandr Kotelevets Design by Sunil kumar Design by Yolanda ju Design by Prometheus x GTR Design by Shekh Al Raihan ✪ Design by JONDesigner Design by Giga Tamarashvili Design by Zahidul Design by Divan Raj ui inspiration UI/UX ui design interaction design

2019 Biggest UI Design Trend

2019 Biggest UI Design Trend abduzeedoJun 20, 2019 So we have a new UI design trend all over us and it deserves a post here on ABDZ. It’s quite clear to notice it, just spend some time on Dribbble and you will spot it right away. This post is literally from three or for Dribbble pages of beautiful mocks. The interesting thing, and what drove me to write this post was when I saw the new Facebook product called Calibra. It features all the same UI patterns, rounded corners that in some way match the phone and screen rounded corners. My interpretation is that as phones become bezeless the screens now match the hardware form, so the software follows the same direction. Apple and Samsung have been exploring this for quite a bit, but now it seems to be all over the place. Anyways, enough talk and here is a collection of designs with the new super rounded corner widgets. UI Design Trends

taxfix :: app for tax declarations

PIXEL-PERFECT ICON SET FOR TAXFIX – Taxfix made tax declarations not just easy but actually fun. The Berlin based company combined a chat-like questionnaire with icons and progress driven animations. The app is available for iOS and Android and lets you do your taxes of the last 4 years. The download is free of charge, only if you are getting a tax refund and decide to send to the tax office, they'll charge you a fix amount. Since 2017, beside some help for the UI, my main focus is illustrating icons for the different usages of the app. The two most prominent ones, are the one for the questionnaire and the different tax exemptions.

Meet Velocity: a UI kit and complete design system by InVision

Meet Velocity: a UI kit and complete design system by InVision AoiroStudioJan 10, 2019 Our friends from InVision is introducing Velocity, a UI kit and complete design system. With more than 300 UI elements, 70+ components and 30 screens; a complete designed kit perfect for building Saas apps or/and for your next design system (Such a trendy term lately!). Available for InVision Studio, Sketch and Photoshop. Again, it's free! Get it now. In their words Designers working on a responsive web experience need to design across small, medium, and large screen sizes to understand how each component should behave in different scenarios. But not all UI kits support that. The best results in design come when you think about the form and function components have across an app ecosystem. Velocity will take care of that for you—and set you up for a scalable source of design truth. This dashboard UI kit is a best-in-class example of how to set up a design system. Take your time, dig deep, and learn how you can apply these ideas to your next project. Understanding how shared components make up a design system will speed up your next project. We know Velocity isn’t a real company, but it could be. This kit includes 10 core layouts with the following templates: Dashboard Home Analytics Vehicles Dashboard Service Reminders Map Chat User Profile Settings Sign In Sign up Beep beep. Meet Velocity, a UI kit and complete design system for an imaginary self-driving car company. Borrow, remix, and remake for your own app. Meet Velocity More Links Get Velocity now Get Velocity now

Website Inspiration: Endless

Conversational One Pager (built with Framer) promoting the Endless design subscription by Daryl Ginn. Neat touches making the work section UI elements interactive, breaking down the how-it-works as a real project conversation and ending with a footer chat-style suggestion to head back to the pricing plans. Full Review

The Future Of Telegram

The first task was to redesign the Telegram chat screen and attachment menu on Android with an emphasis on sharing photos and videos. The second task was to create UI visualizations of voice calls on Telegram. Expected UI animations should demonstrate how a user starts, accepts and ends voice calls.

Top 5 UI fonts for website & mobile apps

Graffiti photograph by Sebastian Spindler“Content is King” — And has been, way before Bill Gates published the essay on Microsoft website in 1996. And with today’s digital consumption, designing a great user interface means offering content in a usable format that encourages reading and engagement. We have often observed that users skip reading if the content is not presented in a legible fashion.The most popular platforms today — Facebook, Whatsapp, Twitter — are all content centric to say the least. Even visual-heavy platforms like Instagram and Pinterest, need an underline of text to add meaning to visuals.“Although many books define the purpose of typography as enhancing the readability of the written word, one of design’s most humane functions is, in actuality, to help readers avoid reading.” ~ Ellen LuptonTypography has never been as essential as today, in the digital era, to define and cater to a user’s requirements. A font’s primary job might seem to inform and facilitate legibility. However, there’s a lot more — personality, tonality, expressions, emphasis, engagement are some of heavier psychological requirements from a font today.In our experience as a UX focused company, a font can easily be the most subtle, and yet powerful differentiator for the next UI we are building. Here are the top 5 UI fonts that you may use in your next website or mobile app.1. Open SansOpen Sans is a humanist sans serif typeface designed by Steve Matteson. Open Sans was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.Best used for: Websites and Mobile Apps for prolonged usage and legibility. Open Sans is easy on eyes and can be good for regular consumption. A great use of Open Sans is in Body Copy or Navigational elements. Try 12–16px for main Content and 24–30px for Headings.Best paired with: Montserrat, Brandon Grotesque, Playfair Display, Georgia and Source Sans ProCurrent Use Case: PaytmFont Source: Google Fonts2. MontserratMontserrat is a new libre sans text typeface for the web, inspired by the signage found in a historical neighborhood of Buenos Aires. Montserrat is a geometric style of type that has subtle optical adjustments. The result is a sans serif family with multiple versions and multiple possibilities, both in the editorial and corporate realm.Best used for: Minimal and modern Websites & Mobile Apps. The geometric type, optimised for digital usage, is best used in minimal User Interfaces. Great for headings, even in caps. Try 14–18px for main Content and 28–34px for Headings.Best paired with: Open Sans, Source Sans Pro, Roboto Slab, Gill Sans and LoraCurrent Use Case: Knowing DesignFont Source: Google Fonts3. Playfair DisplayPlayfair Display is a serif font. This font takes influence from the designs of typeface designer John Baskerville. As the name indicates, Playfair Display is well suited for titling and headlines. It has an extra large x-height and short descenders. It can be set for instance in news headlines, or for stylistic effect in titles.Best used for: Stylised, elegant and sophisticated Websites & Mobile Apps. This stylistic font is best used in agency, portfolio websites, travel and fashion blogs. Great for headings and quotes. Try 34–38px for main Content and 84–92px for Headings.Best paired with: Open Sans, Lato, Roboto , Georgia, Museo Sans and Proxima NovaCurrent Use Cases: Vogue, Spain, BMWFont Source: Google Fonts4. RobotoRoboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.Best used for: Since it has been part of the Google family and served as the default Android font since 2012, it works well as the default app font including chat app, ecommerce and more. Great for body copy text and navigation. Try 14–18px for main Content and 28–34px for Headings.Best paired with: Open Sans, Lato, Roboto , Georgia, Museo Sans and Proxima NovaCurrent Use Cases: Google Material Design, Gmail (future)Font Source: Google Fonts5. Proxima NovaProxima Nova bridges the gap between typefaces like Futura and Akzidenz Grotesk. The result is a hybrid that combines modern proportions with a geometric appearance. Proxima Nova, by many measures has replaced Helvetica as the world’s most popular typeface.Originally released it in 1994 as Proxima Sans (now discontinued), it expanded into a full-featured and versatile family of 48 fonts (eight weights in three widths with italics). In the last few years, Proxima Nova has become one of the most popular web fonts, in use on thousands of websites around the world.Best used for: Modern, Content-centric Websites & Mobile Apps. It’s already a hit font with most of the content platforms. Equally great for headings and body type. Try 12–16px for main Content and 24–30px for Headings.Best paired with: Skolar, Adelle, Adobe Garamond, Georgia, Museo Slab and Playfair DisplayCurrent Use Cases: Buzzfeed, Mashable, CNETFont Source: TypekitHaving spoken to multiple users, it is certain that fonts are one of the most sub-conscious methods of inducing personality in to a UI. Though we have shared Top 5 UI fonts here, we’d love to share more, perhaps in a follow-up post soon. We are also working on a post about Top fonts for branding & communication. Let us know if either of these will interest you.Do you have any favourite fonts for UI? The easiest way to reach us for a quick chat is through Twitter. You may email us as well.You can follow/reach us further on Instagram, Facebook and LinkedIn.Top 5 UI fonts for website & mobile apps was originally published in Muzli -Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Online Resources for self-isolated UI Designers

Slow down and enjoy these amazing design assets!These times are tough.Many articles suggesting that now it’s time to be ultra-productive, what rather results in enhanced anxiety and stress-level. Instead of working crazy hours, you can now finally slow down, be with your loved ones (if you are fortunate enough) and start loving your profession again!Ditch social media and FOMO and make your mind busy with awesome design content. So here is my list:1. Boost your craft with online tutorials!Enhance your design workflow and learn new skillsMeng To’s website is leading this game. The quality of the videos and the unique content is insanely good. DesignCode teaches designers to code and developers to design, moreover it helps you improve your current design processes with this Figma and iOS Design tuts.I am currently watching a comprehensive Webflow tutorial in order to build dynamic websites easily and started to lay eyes on the new Swift UI courses.www.designcode.ioLearn UI Animation with InVision StudioInVision Studio is very handful if you want to create kickass UI animations. Last year, I’ve used it for high-fidelity prototyping very often in order to really show developers what I want.body[data-twttr-rendered="true"] {background-color: transparent;}.twitter-tweet {margin: auto !important;}Fluid interaction made with @InVisionApp Studio app: @usemuzli https://t.co/zzOLQatJ2j — @muckferifunction notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height);resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === "#amp=1" && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: "amp", type: "embed-size", height: height}, "*");}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind('rendered', function (event) {notifyResize();}); twttr.events.bind('resize', function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute("width")); if ( 500 My favourite resources to learn InVision Studio:For the beginner level, I think it’s best to start with the official Exploration videos.For more advanced content you can watch Greg Grog’s tutorials here, or this microsite from MDS.+1 InVision is trying to reach out to the community more and more, so check out their official Dribbble profile where you can find valuable uploaded studio files uploaded by the InVision Design team.2. Read (hands-on) design books and articles!There are tons of design books out there with a great theoretical overview but only a few of them provide actionable tactics.My all-time-favourite is Refactoring UI. This book is pure gold for anyone who wants to understand why certain UIs are working and others don’t. You can learn about using visual hierarchy, personality, colors and much more in your UIs.www.refactoringui.comMy other hero is Erik Kennedy. This guy also offering a kickass course for UI Designers but also useful articles about iOS 13 Guidelines, differences between iOS and Android mobile patterns and many more.www.learnui.design/blogInVision is also offering tons of books on its Desingbetter.co platform. One of my favourite ones is the Animation Handbook, which helps you “replacing “telling” with “showing.”designbetter.co/animation-handbookA more theoretical but must-have book for UI Designers is Don Norman’s book about the Design of everyday things. This book alone helped me understand the importance of affordances and signifiers in UI Design.The Design of Everyday Things by Don NormanFor the daily dose of inspiration, I am reading every day the UI Design section of HeyDesigner and the Sidebar.io newsletter.+1 In case you feel that you spend too much time on social media during the self-quarantine I am strongly recommended the Make Time book by Jake Knapp & John Zeratsky which helps you leave your phone and live the moment.3. Rewatch design conferencesIf you miss design conferences, try to be nostalgic watching the “previous episodes”:All the videos from Dribbble’s Hangtime and Figma’s Config conference are online!https://medium.com/media/09204ba6a0783471711363619dbc40bc/href4. Connect with a communityE-meeting other design folks online is very handy if you are working as a solo designer, but also in cases when you just want to receive feedback or chit-chat about the current trends.Memorisely platform is currently offering bite-sized design content and a Slack community with a few thousand designers worldwide.Another alternative is the Design Social Club by Charles Patterson.www.memorisely.com5. Listen to podcastsListening to podcasts was my daily activity during commuting. Now I am listening to them while washing the dishes. Here are my favourite ones:UI Breakfast — Exciting conversations from Illustration in UX to writing MicrocopyDesignbetter.co Podcast — Let’s dive into a connected workflow and see how large design organizations work.Product Breakfast club — AJ&Smart’s podcast with humor and behind-the-scenes episodes about how “products are designed” and how companies using the Design Sprint process in order to build better products.www.uibreakfast.comWhat is your favourite UI Design content or main source of inspiration? Write down in the comment section below! 🙌Online Resources for self-isolated UI Designers was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Weekly Designers Update #434

via Muzli design inspirationLooking for more daily inspiration?Download Muzli extension — your go-to source for design inspiration!Web design inspirationAll Around Us* Environment Explorer Collection AW 2023Portfolio for AAU product design graduates.Minimalistic, grayscale color scheme, storytelling layout, interactive elements, non-traditional typography..ButtermaxOnline store for a footwear brand.Monochrome palette, product-centric layout, bold typography, simple navigation, photographic elements..KidSuper WorldDigital platform showcasing KidSuper’s creative universe.Surrealism-inspired, vibrant colors, animated elements, interactive layout, playful typography..Oovra | Dedicated Sales & Support For Professional ArtistsWebsite for a sound licensing and music curation company.Elegant, monochrome design, dynamic layout, audio-visual interactivity, classy typography..Design ResourcesInteriorry — Interior design Webflow Website TemplateInteriorry is a Webflow template for Architecture and Construction Companies, Interior Design Studios and Architecture Studios with modern design. Perfect for growing your business..Gilbbert — Portfolio Webflow Website TemplateIntroducing Gilbbert — a modern Webflow template designed for designers who want to showcase their work through a portfolio website with a touch of aesthetic minimalism and sophistication..Moore — One Page Webflow Website TemplateMoore is a professional template for agencies, startups and consultancies. With a strong focus on clean aesthetics and smooth interactions it serves as the perfect foundation for showcasing your business in an appealing way..TEasy Todo: TaskList & Calendar App UI KitEasy Todo: TaskList & Calendar App UI Kit we design in Figma.Laptop Office Desk MockupEditable PSD Mockups of Laptop Screens on Office Desk.SmartBot — Saas WebsiteSmartBot is a powerful Framer template for AI-powered products, seamlessly enhancing your startup or SaaS offering. Unlock the potential of AI with this powerful template..Product SpotlightAI Logo Designer — Ai MagicxCraft distinctive and personalized logos without depending on stock designs. Harness the prowess of A.I. to guide every facet of your logo design journey with.Typist — animated typing text for forms and chat UITypist helps make your prototypes look so so real by turning text layers into animated, typing text components. No more super-fake janky forms! Bring that chat interface you’re working on to life!.Uiverse.ioExplore 3000+ Free UI Elements: CSS & Tailwind.FeedbackWizard.aiAI Magic in Figma, at your fingertips — design wisdom applied to your design, in seconds. See the demo at feedbackwizard.ai.Design inspirationDaise — Flower Shop Landing Page Figma Template by Ahmad S. Afandi for Peterdraw StudioFinance Management Dashboard by Bogdan Falin for QClayMolecule — Smart Home Mobile App & UX UI Design by RondesignlabFintech App UI by Ofspace UX/UIDSTT kitchenware Logo | Visual identify | packaging厨具包装 by zwqy .lab and zwqy. LIDINCalligraphy Manuals: Blackletter — Rotunda by 0. itemzero, XESTA STUDIODiscovery Coffee Pack by BANG BANGOIOLAB® by HUGMUN ­­ ­Life Stills by viction:ary .December 6 | Poster 3D by Duong NguynRetro Sneakers | Lettering & illustration by Ana MorenoWeekly Designers Update #434 was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redefining Dating Apps — UX/UI Case Study

Redefining Dating Apps — UX/UI Case StudyIntroductionToday a lot of dating apps in the market focus on matching users and provide a texting platform. They do so in different ways, but their focus is on providing their users with introductions to each other. As such, those can be described as matching-apps. Their main fault is their matching-dating ratio, which stands on an average of 150:1. As such, people who look for in-person dates might find it hard to achieve those through dating apps.ProblemI formulated precisely the problem that Kama came to solve according to the familiar pattern: who it is about, what they are trying to do, what is actually happening, why it is happening that way and what it makes them feel.Young adults with little free time who are looking to make a romantic relationship try to optimize the time it takes them to find a partner through dating apps. They fail to do that and set up real-world dates because the apps only help to initiate texting conversations and not everyone manages to take it to the physical realm, which makes them feel fatigued and frustrated.ResearchSurveys and InterviewsI started the research phase with surveys. The survey was conducted among 300 single American students. Here are some of the significant data that received:User PersonasBased on the surveys and interviews conducted with several potential users, I formulated two personas:Pain PointAs mentioned, the main problem is the difficulty of turning the matches into dates. For the solution to solve this problem, I summarized the research into 4 main pain points that cause difficulty for the users:Lack of texting skills: Frustration by users who lack texting articulation skills, due to interactions on dating apps built entirely on texting skills.Fear of rejection: Fear of rejection eliminates the chance that one of the individuals will take a step and offer to meet for a date.Swiping without purpose: Since swiping requires no commitment, matching without purpose is very common, leading to a low match-to-date conversion rate.Date’s logistics: Difficulty determining specific place and time. In most cases it ends with: “let’s get drinks some time”.SketchesAt the ideate stage, the main focus was on the main screen. I put a lot of thought into the swiping mechanics, the display of potential profiles to match, the preview of the user’s dates, and more.WireframesAfter the general idea was formulated in the sketchings, I moved on to the wireframes phase. At this point I concentrate only on the functionality and usability of the app when the goal is to create an intuitive experience with as few frictions as possible.BrandingThe design of the screens is derived directly from the company’s branding and since Kama didn’t have one, I was given the responsibility to create it. Kama’s story is very simple: creating real-life relationships easily and quickly, without all the noise that is usually around it.So I chose two main colors: red and yellowish-orange. The red color symbolizes the fact that Kama does not try to be sophisticated, it concentrates on the simple thing — love. The yellowish-orange color and the arrow-shaped symbol gives a sense of fast pace. No nonsense, straight to the point.The origin of the name Kama is in the Hindu god of human love, Kamadeva. According to the stories, he walks around with a bow and arrow like Cupid’s.Final DesignOnboarding FlowIn this section, it is essential to explain what sets this app apart from any other dating app. The user understands that the emphasis is on dating, that he can get discounts and continue to use the app for additional dates.Onboarding screensMain ScreenThis screen is the heart of the app. I put a lot of thought into finding the right pattern that would meet all the needs. At the top in the red rectangle are the Date Spots. The user is limited to 5 dates at a time to increase the importance of choosing the right date. The familiar swiping got a twist and instead of right and left, it is up and down. Dragging the profile up creates a feeling that you are putting moving it to the Date Spots. The profiles appear one by one but unlike other applications — in a horizontal carousel. This means that you don’t have to decide if you approve or reject people and you can continue scrolling. This solves a big problem: once the user runs out of places on the Date Spots, he can no longer swipe profiles up. But what he can do is filtering — swipe down the profiles he didn’t like from the potential profiles list. Once a spot becomes available, the user will be able to swipe up profiles from the remaining once.Main screenIt’s a date!As soon as two people swipe each other up — a date has been set for them! The system automatically and wisely selects the place and time according to each user’s preferences. On the dates screen, it was vital not to make it a regular chat lobby but to give the date much more expression than the texting. Same on the date/chat screen — the details of the date appear first in a big and clear way and only then can you slide up and start chatting.From left to right: matching screen, dates screen, date/chat screenSign UpKama is all about setting the most accurate dates, so the registration process is not short and requires a lot of details. In order not to discourage the user, I’ve added an element of progress that pushes the user to create a perfect profile and fill in all the details. The prize for those who reach 100 percent is an option to increase the dating quota from 4 to 5.Sign up screensConclusionsThe work on the app was fascinating. Although the dating app market is flooded with loads of apps that look the same, Kama brings something different to the table. It allows people to bridge the technological gap and test their connections in real life. Together with the guys from Kama, we carried out an end-to-end process — from understanding the users’ real needs to implementing it in an attractive and thoughtful interface.That’s all for this time, thanks for reading it to the end! If you enjoyed this article please click the clap button or leave a comment below — I would love to hear your feedback (Did you know? You can give up to 50 Claps on an article! Just hold the clap button for a few seconds 😉)Feel free to reach out to me on LinkedIn!You can find more case studies like this on my portfolio: www.nadavpapay.comRedefining Dating Apps — UX/UI Case Study was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing the Future of Banking: Actionable UI/UX Tips for Neo Banks

IntroductionWe have all witnessed how the COVID-19 pandemic has accelerated the pace of digital transformation across industries, and banking is no exception. With social distancing measures and lockdowns in place, consumers increasingly turned to digital banking channels to manage their finances. As a result, we’ve seen a surge in the popularity of Neo-banks, which have disrupted traditional banking models by providing a better user experience through innovative UIUX design.Since we have already explained how UIUX design plays a critical role in the success of Neo-banks, in our previous article, we decided to share some of the best UIUX design tips which can help you design a successful Neo-banks platform in this blog.If you’re a UIUX designer working in the Fin-tech industry or a business owner looking to launch a Neo-bank, this article will provide you with a comprehensive overview of the key UIUX design tips you can implement for the success of the neo-banking landscape & share what does the future of UIUX design hold for neo banks.Let’s begin,5 Actionable UI/UX Design Tips for Neo-banks to overcome user experience challenges:Seamless Onboarding: A crucial element of UI/UX Design for Neo BanksThe first impression is the last. The onboarding process is the first and critical step towards building a relationship with a user. So, ensure the process is streamlined and easy for the user.From simple sign-up forms to personalized welcome messages and tutorials, every aspect of the onboarding experience should be designed with the user in mind. This means ensuring that your design is easy to access for people with disabilities, including those who are visually impaired or have limited dexterity.We recommend avoiding the traditional way of authentication, like entering passwords and one-time codes; instead, incorporating technologies like biometric authentication and digital signatures can help make the onboarding process faster and more secure as banking users are low in patience to check or execute their financial transactions.Revolut, for example, uses AI-powered facial recognition technology to verify users’ identities, making the onboarding process a breeze.2. Simplicity is Key: Prioritize a clean and intuitive dashboardPoor UIUX can impact the success of the neo-bank. So, it is wise to focus on the hallmark of neo-banks which is creating a minimalistic design. Start by identifying the user scenarios and use cases, i.e. if the user handles multiple accounts, design an intuitive user journey to switch from one account to another with ease second, and ensure that the important information is always at the user’s fingertips by preserving a mobile-first design approach.For instance, post logging in, any neo-bank customer would like first to check all their critical financial status information upfront, like balances, transactions and so on. Hence thoughtful information architecture, visual hierarchy, effective use of whitespace, designing for smaller screens, touch interactions, and optimizing for speed is vital. Keeping the design simple and user-friendly can reduce user frustration and improve the overall satisfaction of the customer.Monzo is an excellent example of a neo-bank with a simple and intuitive UI design emphasising ease of use.3. Give a personal touch: Tailor the User Experience to boost engagement and loyaltyIn today’s highly competitive Neo-banking landscape, offering a personalized user experience can be a game-changer for boosting engagement and building customer loyalty. By using data analytics and insights, UX designers can create personalized experiences for their users based on their transaction history, location, and other factors. Neo-banks can provide this by incorporating personalized messaging, customized dashboards, and targeted offers and promotions.For example, the N26 platform has a feature that automatically categorizes users’ spending based on their transaction history, making it easier for them to track their spending habits and plan their further expenses accordingly.3. Engage Users with micro-interactions: Include small animations & gamificationBy adding subtle animations, such as a loading spinner or a checkmark when a task is completed, UIUX designers can enhance the user experience and engage users, improving personality and brand identity; however, animations shouldn’t be overwhelming and distracting to users. Gamification, to is an effective way to increase user engagement and create a fun and interactive user experience by incorporating challenges, rewards, and badges.Chime, for example, rewards users with “Chime Coins” for making purchases with their debit cards.4. Provide Real-time Feedback:Real-time feedback is essential for neo-banks to build trust and confidence with their users. Providing real-time feedback on transactions, balances, and other activities can help users feel in control of their finances, reducing the hustle of visiting the bank or waiting till the end of the day for their transaction status update. According to the nudge theory, banking AI context-based suggestions, which are powered by analytics & big data, can provide an amazing customer experience.For this, you can check how Starling Bank provides real-time transaction notifications and balance updates, helping users stay on top of their finances.5. Streamlining Payment Workflows: For Faster Payment ProcessingProviding quick and efficient payment processing is crucial for Neo Banks to stay competitive. With the rise of instant messaging apps and other fast-paced technologies, users expect payments to be processed quickly and seamlessly.UIUX designers can play a key role in improving payment processing times by simplifying the payment process and reducing the required steps. Additionally, integrating with third-party payment providers and leveraging cutting-edge payment technologies can further improve payment processing times. Ultimately, providing payments faster than instant messaging can be a key differentiator for neo-banks, increasing customer satisfaction and loyalty.Future of UIUX Design for Neo BanksThe future of UI/UX design for neo-banks is likely to be influenced by a number of trends, including personalization, voice and chat interfaces, data visualization, security, and seamless integration.As neo-banks continue to grow in popularity and expand their services, UI/UX designers must stay up-to-date with these trends and find new ways to create interfaces that meet the evolving needs of users and the industry.Overall, the focus will be on creating personalized, intuitive, and secure interfaces that provide a seamless experience for users while also leveraging new technologies and data visualization techniques to help users better understand their financial situation. By embracing these trends and staying ahead of the curve, UI/UX designers can help neo-banks continue to innovate and provide value to their customers in the years to come.Conclusion:Neo-banks need to focus on creating a user-friendly and intuitive interface to make a mark in the digital banking space. By following these tips and incorporating real-life examples, neo-banks can create a compelling and engaging user experience that keeps users coming back.Designing the Future of Banking: Actionable UI/UX Tips for Neo Banks was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Weekly Design Inspiration #293

via Muzli design inspirationDesign by Marco OggianDesigners’ Secret SourceThe best design inspiration — expertly curated for you.Muzli is a new-tab Chrome extension that instantly delivers relevant design stories and inspiration. Learn moreSocial Chat by AfterglowOptimizer App by Sandro TavartkiladzePill Speaker Website by Halo UI/UXSmart Home Manager App by by Dmitry LauretskySiopp 📦 | Cargo tracking app by Alexander Plyuto 🎲heart by Alexandra ZuttoSunset on Mars (fine glitch art) by Nina GeometrievaCooking with Grandma by Mathieu L.Bhttps://medium.com/media/b124085903eb4c374694d1c91e3c4b0a/hrefGoogle Doodle World Cup in Russia Edition (Part Two) by valsPacific&Co. by Marco OggianCLIENT ERROR 4xx v02 by RETOKAKINSA Organic Skincare by Lara Scarrwhiskey concept by Vadim BriksinSerration Object by found / FoundedWeekly Design Inspiration #293 was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

ChatGPT & Beyond: A Next-Gen Wave in Personalized UX/UI Design

Illustration by Joana RicardoIn the realm of digital design, generative AI emerges as a transformative force, poised to revolutionized the way UX/UI designers craft exceptional user experiences. This remarkable tool, with its autonomous content generation capabilities, holds the promise of automating repetitive tasks, fostering creative co-creation, and unlocking personalized, adaptive, and dynamically evolving user interfaces. As generative AI continues to evolve, its impact on UX/UI design is poised to transcend boundaries, shaping the future of digital interactions in profound ways.AI’s Influence on UI ParadigmsIn the ever-evolving landscape of UX/UI design, the convergence of artificial intelligence (AI) brings forth a multitude of challenges and opportunities. This discourse isn’t about AI replacing design tools; it’s an exploration of AI’s substantial impact on UX/UI design. Our task as designers is to uncover effective strategies for harnessing AI’s potential to craft engaging and user-centric digital experiences.Jacob Nielsen’s prophetic vision foresees a future where AI significantly shapes user interfaces. This impending transformation prompts a comprehensive revaluation of the UI paradigms that have underpinned design for decades.Understanding the evolution of these paradigms offers invaluable insights. Let’s revisit the historical progression. Nielsen’s quote underscores a pivotal shift: “ User interfaces will be imbued with more AI than ever before”. This compositional change inherently alters the roles of UX professionals. To comprehend this shift holistically, it’s crucial to trace the trajectory of UI paradigms.The first paradigm traces back to the era of batch processing. Specifications were handed to computers, and outcomes were produced after extensive processing periods.Image via effectrodeThe second paradigm, which reigns supreme today, revolves around command-based interaction. Users initiate actions, manipulate outputs, and iteratively steer towards desired outcomes.Photo by freestocks on UnsplashHowever, the advent of AI introduces a paradigm that transcends mere command-based interactions. Enter the third paradigm: intent and outcome-based interactions. This paradigm is exemplified by contemporary AI-driven tools, particularly evident in image generation. Consider the AI-driven image creation process, where the DALL-E-inspired design philosophy reigns supreme. This approach pivots from a command-driven structure to a more conversational interface. An essential feature of this new interface mindset is the introduction of a prompt at the core of the input. Herein lies the transformation — a shift in the user’s role.No longer are users instructed step-by-step; instead, they articulate the desired outcome. This marks the emergence of the intent-based outcome specification — the third UI paradigm.AI & Machine Learning Will Change UX Research & Design (Video)Exploring third paradigmTo delve into the third paradigm in our current landscape, let’s examine a prime example: ChatGPT. With the public release of ChatGPT, a new era of content generation and interaction has emerged. While the concept of chatbots and digital assistants isn’t novel, what sets ChatGPT apart is its ability to deliver more personalized and higher-quality responses to user queries. This remarkable capability has spurred numerous platforms to seize the opportunity and integrate generative AI features.However, a prevalent issue among these applications lies in the flawed input methods employed. As we’ve previously discussed, the third paradigm emphasizes intent and outcome expectations. Yet, current applications predominantly utilize a chat box method for input with AI systems. Consider the recent feature of the Bunq app, introducing Finn, an AI assistant within a banking app. While Finn claims to assist with recognizing spending patterns and budgeting, it appears constrained by the chat box interaction method.Finn promotionl material from Bunq.For instance, the feature could enhance user experience by integrating financial projections directly into the app, rather than relying solely on user queries. The chatbot design, by confining itself to a specific interaction method, limits the potential of generative AI models in elevating individual aspects of an application.Another illustrative example involves the use of generative AI in media. AI models have been leveraged to create images and videos, revealing a friction between intent and generated results. Experimenting with these models highlights the significance of context clues and knowledge in our daily lives.For instance, when I asked Microsoft Bing to generate images of a Star Wars-inspired café, the initial results fell short of my expectations.Initial Results from first promptWith additional iterations and contextual information, the AI eventually produced results that aligned more closely with my preferences. Below I have shown some of the examples that comes closer to what I wanted when I gave the initial prompt.Final results gathered from multiple prompt iterationsThis scenario in my opinion is a glowing example of constraints of chat box style of interaction method and struggle with third dilemma within the design space for generative AI currently. The first set of images generated serves as a good result of prompt I had given but it fails to consider my personal knowledge set and preferences.I as a user have no understanding of the what toolsets the AI will be using and its understanding of its my current preferences and needs. I would be in need for a retro vibe today but in a years times, my preference can change and become a new standard. This creates a scenario where as my knowledge set and preferences changes but the initial query I had will be same with different expected results. Since the input method creates an expectation of receiving the result envisioned by user, this interaction can ultimately lead to feeling of disappointed form the interaction carried out.One way to mitigate this problem of AI’s understanding of knowledge set of user, is to allow them to give custom data to AI so they can adapt to the user preferences. OpenAI to recently added custom data set for the ChatGPT so it can have a base level of understanding from a custom data set but it still is limited with the level of understanding provided from it. It also brings the issue related to the preferences in data sets that AI has been trained on creating preferences for certain data. In the next section we will discuss some ways that can help with challenging the paradigm.Rethinking AI InteractionAdobe has been exploring various methods to assist designers in generating content within their Creative Cloud applications. Their approach in Photoshop involves an additional layer of interaction before the text input box, allowing users to select a specific area and instruct the AI to generate content within those boundaries, taking into account the existing image content and adapting to the prompt provided.Adobe photoshop showcasing the generative fill feature. Image form AdobeThis selection menu serves two purposes: it focuses the AI’s attention on a particular section of the image, providing more context, and it guides users towards achieving more specific results.These efforts echo similar AI integration challenges we’ve encountered in the past. Google Lens, an AI-powered tool that identifies objects and text in the real world, comes to mind. Adrian Zumbrunnen, in a compelling presentation on context-based interfaces and AI, addressed the difficulty in keeping users engaged while the camera scans and processes the surrounding environment. He explained that a lack of visual feedback can make the process feel unresponsive and confusing.Visual lookup feature showing the white dots around objects being scanned. image from GoogleZumbrunnen’s solution was to introduce an animation that visualizes the AI’s object identification process, providing users with a clear understanding of what’s happening behind the scenes. This visual feedback fosters engagement and encourages users to interact more actively with the AI tool. We can try to bridge the gap with some of the lessons we have learned currency to bring more context to the interface for AI. This exercise highlights the importance of considering input methods and user intent when designing AI interfaces.https://medium.com/media/c1bf8c2d9d53d69109e9d57f16c57cab/hrefWe can draw inspiration from Spark AI, which enables users to prompt the AI to assist in composing emails. While the implementation still encourages an iterative approach and introduces some ambiguity, it partially addresses this by providing options for proofreading, response length, and tone. These defined context points help users anticipate the outcome with greater clarity.Spark AI feature list, Image via SparkGoogle Duet AI, which recently debuted, offers similar features for word processing applications. However, it still faces the challenge of understanding contextual nuances. For instance, when selecting the option “make text sound more casual,” individual users may have varying interpretations of “casual.” This lack of shared understanding can limit the usefulness of these features. One potential solution is to provide more explicit descriptions for each option, clarifying their intended effect and the range of potential outcomes.A more ambitious approach involves introducing visual representations of the AI’s decision-making process. Seeing the AI “work” (represented visually) can enhance understanding and provide users with a greater sense of control over the AI’s actions. Animations showcasing image generation or text creation after a prompt is provided can effectively convey the AI’s workings and foster trust in its capabilities.As Zumbrunnen’s research suggests, without proper animations, automation and AI can be perceived as less responsive. His studies indicate that users generally prefer animations over instant results, as they provide a glimpse into the underlying processes.Current AI implementations often fall short in this regard, as the AI’s decision-making process often involves multiple steps. When users lack insights into these decisions and how they can influence them, the interaction becomes a guessing game. This lack of transparency can lead to disappointment and uncertainty in the UX.Apple Visual lookup feature showing contextual information form the images. Image via AppleApple’s approach to AI integration offers valuable lessons. Their Photos app has been regularly updated with useful features like plant identification and laundry instructions. Apple calls this feature “Visual Lookup,” and it seamlessly identifies specific objects in photos, such as animals, plants, and landmarks, providing relevant context information.In contrast to current AI interactions that rely on chat boxes, Visual Lookup is integrated directly into the Photos app, without the need for explicit user input. The AI’s findings are presented within the app’s “Info” section, accompanied by clear explanations of the identified objects and their significance. This approach makes it easy for users to understand how the AI arrived at its conclusions and fosters trust in its capabilities.ConclusionBridging the gap between users and AI requires a multi-pronged approach that combines clear input methods, visual representations of AI processes, and seamless integration into existing workflows. By adopting these strategies, we can create AI interfaces that are more intuitive, engaging, and responsive, ultimately enhancing the overall user experience.ChatGPT & Beyond: A Next-Gen Wave in Personalized UX/UI Design was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

UI/UX case study: Hybrid event platform for mobile.

Detailed documentation of the process and approach that was taken to create this mobile application.Background StoryA few months ago while attending an online event, I met some interesting people with similar interests. After the event ended, it appeared that I can no longer text them. The first thing that came to my mind was “why do I need to move to another platform to stay connected is it good for the app user base?” so naturally I started exploring other online events platforms after a while it was clear that there is almost no such platform exist that has chatting feature after the event has ended not only that I saw a lot of flaws in them, there exist almost no platform that provides hybrid events i.e the event one can attend online as well as offline, not only that there are only a few event apps that exist and only one that has hybrid events. After talking to other people who generally attend events I came across these problems.What is Treffen?Treffen is a hybrid event app that allows users to attain events offline and online simultaneously. The name translates meet up in german.👀ProblemsAfter doing research I found that people don’t visit event platforms, whatever event the users attend they get to know about it through social media ads or through suggestions which is the main reason why event platforms have a lower user base compared to other web apps.Navigating inside the events on the web is easier but there are so many things inside an event it is comparatively tough to implement everything in a mobile app.how do we quickly navigate from the inside of the event to the marketplace and quickly navigate between different events?DeliverablesI have mostly focused on creating 2 different user journies.1. Surfing through the event marketplace to booking an event.Users can scroll through the list of events, sort and search them based on filter, connect with people, chat with them, see events created by the people they follow and create their own event.2. Look and feel for the hybrid event.Contains Reception which has event details and sponsors list, number of participants and their list, event speakers, booths, stages which have a mainstage where the main event is happening and backstage where different booths are live and users can interact one on one with each other or engage in a group meeting.🔍ResearchBefore jumping directly into the design it was necessary to understand what other online event apps provide and how they work, few questions arise such as:what are the most important things in an online event?How do users generally get to know about events?Do users browse through the event marketplace?How can we interact with people present on-site while we are attending the event online?To get the answer to these questions I contacted a few more people and asked what do they seek from an online event what is important to them and what is not, Showed them the journey of competitors and what they like in them and whatnot, after gathering some data through interviews it was time to get the data on graphs and make data-driven decisions.Here are the results of the questions asked to a group of people:After gathering data from the users it was not time to do some competitive analysis.I went through 10 different online event platforms CMX Summit, Adobe events, Hopin, Eventbrite, Collison app, Evolve, Hubilo, GlSR, Smashup & Spotme.Noted their patterns, data, and flow. A few of them have some really good features like group chats, Levels, and many more. I wanted to keep things simple for the first draft and decided to go with some limited but important features.😀User Personas.Based on the user interviews and research I have designed 3 personas who are the potential users of this app.💡Information Architecture.https://medium.com/media/93b34beeead6f01d9015494ade1acb65/href🖊WireFraming.Before getting on Figma I started with sketching and did a lot of iterations. Few of them were looking good on paper but were not practical in the long run. Designs were changed a lot in the end product.📝Iterations.I follow the atomic design system so I started with creating smaller components such as user detail cards, navigations, event cards, and so on.📱Final DesignSo without wasting much time here is the final prototype.https://medium.com/media/91a486e3d5571b93bab158bcb8bd1851/hrefNote for PC users: Press Z or select scale down to fit from the options menu on the top right cornerFor Mobile users: Click on the prototype and use it on a new window for a better experienceThis design does not contain all the screens and only follows the two main flows.HooksTo motivate the users to attend more events, I have introduced T-coins they work like a digital currency that you can only gain by buying more tickets. Not only that the users can even make their payments using them.The main purpose of this app was user engagement, so to make the users keep visiting the app I have allowed in after-event messages they work similarly to any other messaging apps.The users would get notified when an event is created by someone they follow.👓Conclusion & LearningsAfter completing the designs I’ve learned that reviews and iterations are really important even when you are done with all the prototyping getting designs tested getting reviews and improving the product is what makes the product successful.UI/UX case study: Hybrid event platform for mobile. was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Death of User Interfaces

Dive into how product design has shifted towards a UI focus and how the AI “revolution” is gradually phasing out the “traditional user interfaces.”Hello, friends 👋It’s been a while, but life hasn’t been easy lately. Lots of work, thankfully 🙏This time, I’m discussing how I feel our beloved field of product design is changing and where it might be heading. To be clear, these are just my opinions, and I could be wrong (I most likely am), so please take them with a grain of salt. I’m no expert in futurology, and I wouldn’t stake my life on any predictions I’ll make below. However, I found thinking about it exciting, and honestly, it has been enjoyable pondering over it. So, I guess I just want to share these thoughts!Shall we begin?The Death of “Traditional” User InterfacesLife was simpler before “blinking RGB bordered buttons”… I remember when I started working on what I didn’t realize was product design. It was about 8 years ago when I launched my first startup, EzyCities. It was essentially a platform for booking experiences, similar to Airbnb Experiences, which, incidentally, edged us out of the market. Back then, I had to design the entire platform, both web and apps, all by myself 🤯. I started with Illustrator because it was easier for me at the time. Sketch was somewhat “new,” and Figma, although it already existed, wasn’t on my radar.Looking back, my job focused more on how people could quickly create and purchase experiences rather than on the app’s appearance or its components.I get the impression that product design was more concerned with the user experience and conversion rates than aesthetics, but maybe I’m mistaken. Don’t misunderstand; aesthetics have always been crucial for attracting users to a product, but I firmly believe they weren’t the top priority. Consider the major players back then, like eBay, Amazon, or Craigslist. Their focus was on making it fast and easy for users to perform actions on their websites, with less emphasis on minimalism, animations, and sleek components.It seems to me that a lot has changed in the last 8 years. We’ve reached a point where, sometimes, appearance matters more than functionality. This shift may be partly due to the increase in digital product offerings and some markets becoming saturated. However, I also attribute it to today’s “show-off” culture. Nowadays, it appears the shinier a product is, the more attention it garners, regardless of its functionality. Designers seek content for their social media, so a button with RGB blinking border animations gets more likes.Re-reading this, I sound like an old grumpy man lamenting the new era — I’m not (though I do have the back pain to match).Before you joke about my grey hairs, let me clarify: I appreciate a well-executed micro-interaction. What irks me are the “macro interactions” (have I just coined a term?).Have you ever visited a site or landing page where everything moves? It’s overwhelming, like a carnival without the food — the fun part. It makes me dizzy — and I assure you, I’m not that old.But let’s get back on track. I’m not saying animations or interactions are inherently bad; it’s just that we might be overdoing it a bit.Yet, I don’t believe designers are solely to blame. Users also play a role, as they now prioritize aesthetics over functionality. I’ve had friends tell me they signed up for services simply because they looked cool. While this underscores the value of design — we create cool things — it also highlights a part of our job that involves simplifying things and making users’ lives easier.The End of User InterfacesWhat a headline, right? It’s not entirely accurate, but I liked how it sounded, so it stayed.Let me explain…Lately, I’ve noticed a trend in digital products aiming to “erase boring internet tasks.” Software and apps like Arch Search and another one I can’t remember right now are designed to search the internet for you or perform tasks on websites using AI.For instance, Arc Search (the creators of that cool Arc browser) recently launched what they call a “Google competitor” (if such a thing truly exists), with the promise to “Find Everything, Faster.” Their software lets you enter a question or keywords, and it navigates and reads the top 3 or 4 search results using AI. Then, it creates a simple, text-based “site” summarizing information from those sources.Arc Search for iOSAnother software doing something similar is MultiOn, a new AI start-up that promises to “make daily tasks quicker and easier”. It basically does things for you in your browser, like booking cabs or getting groceries, so you don’t have to. You just tell MultiOn what you need by giving it a prompt, and it bypasses all the page's UI to do those tasks with little to no interaction needed from your side. You can watch how MultiOn works in this video.This shift towards functionality over form raises questions about the future role of UI design. If trends continue in this direction (which I could bet an arm it will), we might see a landscape where the aesthetic elements of a website become secondary to how efficiently a task can be performed. This doesn’t mean the end of UI design but rather a transformation. UI designers might need to adapt by focusing more on creating interfaces that integrate seamlessly with AI technologies, ensuring that the user experience is not just for users but also machines (and web crawlers).Imagine a future where UI design is not about the most eye-catching button or the slickest transition but about creating an ecosystem where AI and design work hand in hand to provide users with what they need before they even know they need it. The challenge for designers will be to innovate within these constraints, finding new ways to make the interface engaging and intuitive without relying solely on visual appeal.You might be wondering (as I was): What about the UI for these UI “killer” tools? Well, they would be among the last to shake up the UI world in the apocalyptic scenario of UI’s end — okay, I’m being a bit dramatic. But, returning to reality, if the AI revolution has taught us one thing, it’s how to achieve greatness without relying on complex or flashy UI designs. Consider these two examples from the leading AI innovators out there:ChatGPT: It’s essentially just a chat interface with a few buttons, nothing flashy, and almost no animations. Even their landing page is remarkably straightforward. Additionally, creating your own “version” of ChatGPT is done through the chat interface — no special UI for it.MidJourney: These guys embraced a minimalist approach to UI by not having one in the traditional sense. They use a third-party UI (Discord) to run their software. Even though they have millions of users and generate millions of dollars.Just want to highlight that both these platforms have gained immense popularity without depending on fancy visual effects like border gradients on their elements. Instead, they prioritize simplifying the user’s experience, saving them the hassle of navigating websites, using different software, or clicking through numerous buttons and links — emphasizing more UX than UI.So, while the provocative title ‘The End of UI’ might not be entirely accurate, it was meant to highlight a significant shift in our approach to and interaction with digital products. It might not mean that UI is dead, but that our concept and interaction with digital products are about to change.That’s not all…If you thought that this was “bad enough” for UI designers, wait until I tell you about Humane AI Pin and Rabbit R1…These aren’t characters from Star Wars but rather hardware and software that aim to eliminate your interaction with the “traditional UI”. Think of voice-activated devices that let you interact with websites, and APIs, read images, “click” buttons, “fill in” forms, and complete tasks. Yes, they can do all these things and probably more. It’s like if Alexa and Siri took AI steroids!To give you a better idea of what I’m talking about, let me quickly explain (or try) what both these pieces of hardware (and software, of course) do.Starting with Humane AI Pin: Released on Nov. 9th, this gadget envisioned by two former Apple execs is a visionary gadget aiming for a screen-free future. It’s a small device that clips onto your clothes and acts as a voice-activated assistant using AI. It can handle tasks like answering questions, making calls, and sending texts. It features a camera for recognizing items and providing information, a “Trust Light” for privacy awareness, and a mini projector for displaying visuals on your hand.Credit: HumaneYou can learn everything about it on the Humane website, or in this cool article about it.Rabbit R1 (my personal favorite), on the other hand, has more resemblances with a phone (even though it isn’t a phone), meaning that it will probably also have more “early adopters” (check my article on familiarity biases to understand why). It is a fun-sized, smart orange, and beautiful box (designed by the cool folks of Teenage Engineering) that wants to simplify how you use apps with the help of AI. It’s not a phone (they need to make this clear), but a personal assistant that fits in your hand. Instead of swiping and tapping on apps, you talk to it to get things done — like ordering pizza or playing music on Spotify, using a special AI to learn how to do tasks by itself. Plus, it can even make phone calls (not a phone).If you got as excited by it as I did, check out their website or watch their video presentation on CES 2024.So, now that you know about this, you can start worrying (I’m joking of course).What’s left for UI/UX designers?If you ask me to look into the future, I’d say the world of product design is about to see some big changes, but it’s not going anywhere. UI design, too, isn’t going away anytime soon. However, what we as designers focus on is going to shift. We’re going to spend more time thinking about how people interact with the data and features in our apps, rather than just making sure everything looks pretty.We’re also going to need to learn new skills or get better at things like voice control, sound effects, and haptics, which are all about how things feel when you touch them. It’s about looking beyond just the screen and buttons and thinking more about the whole experience someone has when they use our products. Plus, we’ll need to find creative ways to make our products stand out and be easy to use without just adding more visuals like flashy buttons, fancy fonts, and bright colors.Another big thing is that we have to design not only for people but also for computers and AI. This means we have to make our websites and apps easy for AI to use too, with writing that’s clear, links that make sense, and information that’s easy to find and understand.For someone who loves to learn and try new things, like me, all these changes in product design are pretty exciting. I’ve seen a lot of change since I started working in this field, and this is just another new challenge. The best part is, that product designers are good at adapting to new things, so I’m confident we’ll all do just fine with whatever comes our way.So, there you have it. Product design is changing, and we’ve got to change with it. We’re going to learn new stuff and think differently about how we design. But I’m excited, and you should be too. It’s a chance for us to do some cool things.I’m curious about what you think. How do you see the future of UI? Drop your thoughts in the comments.If you liked this article, please give it a clap 👏. It helps more people find it, and don’t forget to follow me here, X (Twitter), and LinkedIn. You’ll be the first to know when I post something new, and check my work (outside writing). You can also throw in some ideas for articles or just talk about design and products with me.Catch you later 👋The Death of User Interfaces was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Runeterra Map Visual Explorations by Efflam Mercier

Concept art and look development of the interactive WebGL Runeterra Map. These we used to define the art style, chat with the UI/UX artists and build up a style guide for outsourcing. Link to WebGL map : https://map.leagueoflegends.com/en_US Launch Trailer: https://www.youtube.com/watch?v=MaDfg5BhIcY

Learn fundamentals of UI design through cinema

Movies have been prevalent among our society as a form of art long before people started to study visual design or simply, design as a discipline. The first-ever film was released in 1888, called Roundhay Garden Scene, which was a short silent actuality film (2 seconds) recorded by French inventor Louis Le Prince.Since then the world went through many revolutions, wars, inventions, and pandemics. Each of these events made a special impact on the film industry as a whole one way or the other, making it what it is today.With the evolution of visual communication comes visual design. Since ‘design’ actually refers to problem-solving and more than just creating appealing artifacts, and every problem-solving technique has some fundamental laws/principles/theories/formulae, based on which that technique is approached, so does visual design.Soon after the evolution of cinema(~100 years) as a commercial industry as well as an art major in colleges, people started booking tickets for the shows using digital devices with interfaces. Now, these devices have to be made easier to use and learn, which in itself was a problem. To overcome this, a new design discipline came into the picture, namely User Interface Design.Now, this wasn’t exactly the cause that led to giving birth to a whole new design field. But, it is indeed one of the many ways by how cinema and UI design are connected. Let’s jump straight to understanding the very fundamentals of UI design with some of our favorite films.BalanceIt is a very common thing that can be noted in any stable design unless it is explicitly made out of balance.Balance can be understood as the distribution of the visual weight of objects, colors, textures, and space. If there is a lot of content on the screen then it should be balanced to make a design feel stable.Now, symmetry is one way to achieve balance in visual design. Nature loves it, and so does our eyes. Symmetrically balanced elements help to reduce the noise from the image and make it familiar to us.Cinematographers have been using symmetry as a powerful tool for a very long time to capture visually stable shots in movies. But balance can be achieved in non-symmetrical images as well, with the help of colors, objects, space, and texture.Similarly in UI, to make it balanced, elements are placed accordingly on the canvas as per their weights to visually stabilize all the objects present on the screen.Balance in user interfaceEmphasisWe see emphasis used in most fields of design, including architecture, landscape design, and fashion design. Similarly, it is an obvious thing to be noted in filmography as well. Filmmakers use all sorts of techniques to put the light on the subject they want the audience to look at.Emphasis is a strategy that aims to draw the viewer’s attention to a specific design element. That could be to an area of content, to an image, to a link, or a button, etc.In cinema, the use of focus, contrast, etc, can be found to create emphasis on an element on the screen. This is done to convey a part of the story relevant to that emphasized object.Now, UI Design also has storytelling just like any other designed object. When we want to put an element in focus, we highlight it using any of several methods to convey what we want it to convey and to stand out among the rest of other elements.Emphasis created in UI designHierarchyThe meaning of cinema differs from person to person. How we conclude a film is dependent on the form of art we have been consuming over time and how it has framed our perspective. This is not in control of the filmmaker but they can control to drive our eyes from one point to the other by understanding simple behavioral patterns.Hierarchy is the control of visual information in an arrangement or presentation to imply importance. It influences the order in which the human eye perceives what it sees.In every film, makers apply some form of hierarchical pattern to drag the audience’s eyes from one point to the other. This is usually done to tell the story in a required order.When users interact through screens, it becomes important to drive their attention in the right order. What comes first in order needs to have a connection to its successor element for a good design, and so it needs to have with its predecessor.Most of the apps and websites we browse apply the same principle to arrange the elements in the right order. The parent element is usually placed either on top of its child or left to it.Elements arranged according to their hierarchyRepetitionAs humans, we tend to stick to rhythms more when it comes to finding patterns in unknown objects. Rhythms in image, sound, videos are formed with the help of repetitions in the arrangement of elements on screen.The principle of repetition simply means the reusing of the same or similar elements throughout your design. Repetition of certain design elements in a design will bring a clear sense of unity, consistency, and cohesiveness.It is as significant in cinema as it is any other design field. Filmmakers use repetition of elements to form a visual rhythm. Pattern is simply a repetition of more than one design element working in concert with each other.In Nolan’s films, someone with an eye for design can easily notice how beautifully he manages to hold the narrative with visual rhythm, whereas Wes Anderson is louder with his rhythms and audience who are not aware of these design principles can as well easily locate them.Similarly, repetition in interfaces creates a visual rhythm which helps user to find patterns, hence making user stick to the platform i.e. more engagement. Listings, menus, posts, etc are some of the sections where repetition is evident.Repetition in user interfaceProximityWhen we are watching a story, it is important to understand what it represents to articulate a meaning out of it. Proximity in cinematography plays a vital role when something has to be segregated from the rest of the things to put it as a central subject for that moment.The principle of proximity is the process of ensuring that related design elements are placed together. Close proximity indicates that items are connected or have a relationship with each other and become one visual unit that helps to organize or give structure to a layout.In cinema, this can be done using colors, focusing techniques, and object arrangement. Here are more dimensions available to filmmakers as they have z-axis to help themselves.However, even though with the evolution of 3D in the user interface, most of them make use of 2D layouts so it can perform easily on any screen. Therefore, space, styles, and shapes become significant while creating proximity within objects in the user interface.Proximity in user interfaceProportionUsually, on canvas, there can be a lot of elements that are placed taking up any proportion of the screen. But, it has to be made sure that the amount of space on canvas they take during a moment has strong significance with its relevance to the story, that’s good design!Proportion is the relationship of two or more elements in a composition and how they compare to one another with respect to size, color, quantity, degree, setting, etc.; i.e. ratio.If a particular element takes more space than needed then it directly impacts the hierarchy and fails to make an impact or even convey what it has to. A character or an object is given the required amount of space on canvas as needed for the story at that particular moment, so does elements in the user interface.It would be really awful if the support chat box takes up the same width as the nav bar, or amazon’s logo takes up the same space as the search bar. Proportion has a direct connection with hierarchy. Both of them play their roles in supporting each other along the story-line.Proportion in UI designAnd that’s how we understood the principles of visual design through cinema. The movies that I referred to are some of my favorite ones and would recommend you to watch them if you haven’t. I keep looking out for these principles in any movie I watch. I’d recommend you for any next movie/show that you’ll be watching after reading this, pause the video where you think the visuals are beautiful and do a quick analysis of why it looks so good, does it have any of the above six principles or the filmmakers were shooting blanks. I guess it has now become a little more clear about how all design disciplines are interconnected.Fun fact: All six phenomena exist in UI as well as film examples I referred to, even if they might not have been directly talking about them. If you missed go check it out again, its fun.If you’re a film geek or a design geek like me, do share this articles with your friends. Your claps give me motivation to keep writing more, and would love to hear from you in the notes :)Let’s talk more on LinkedIn.Learn fundamentals of UI design through cinema🎥 was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

High-Voltage Buttons, AI Assisted Design, and an Animated Airplane Mode

This week's CodePen community highlights include a couple of answers to Andreas Storm's electrified button tweet, a UI design mockup assisted by Midjourney from CJ Gammon, a css-doodle inspired by ChatGPT branding by yuanchuan, and a high-flying airplane mode toggle from Jon Kantner. Plus, Fabio Ottaviani brings us a "Supah" slick travel carousel, and on our latest podcast, CodePen co-founders Chris & Alex chat about the pursuit of "solving problems forever". Carousel with drag and wheel "No frameworks, no fuss – just pure and fast performance, powered by CSS variables." Fabio Ottaviani shares a positively gorgeous travel carousel with smooth scroll and drag features. AI01: Vista CJ Gammon gets a pleasing pastel design assist from Midjourney in this UI mockup, created as part of a "collection of interactive interfaces designed and built using AI". Check out CJ's YouTube walkthrough of the process for insight on how it was made. ChatGPT Plus Cover yuanchuan recreates the noisy minimal art on the ChatGPT Plus website with the splendid css-doodle web component. Click to generate a new pattern inside the lines. Gravity Cursor with :has() Jhey Tompkins makes clever use of :has() in this cursor-grabbing Pen. The trick is using ":has() to detect when a galaxy is being :hovered and set the custom cursor coordinates". CSS only image switcher "A CSS only image switcher powered by the :has() selector and a few CSS variables tricks. Click anywhere on the image to update it. The animation effect depends on the cursor position." From Temani Afif. Andreas Storm button jwktje takes a crack at Andreas Storm's high voltage button challenge with SCSS. See also: Team GreenSock's rendition. CodePen Radio #399: Data Munging On the latest CodePen Radio, co-founders Chris Coyier & Alex Vazquez chat about the ideal of "fixing problems forever", and what it's like to actually try to do that while fixing a data problem. #CodePenChallenge: New Color The final week of the January "New CSS" challenge was all about color! Browse through our colorful collection from week one, including Pens by Max Swann, Ashraff Hathibelagal, David Aerne, and Andrii Rodzyk. Airplane Mode Animation Get ready for takeoff with this fun airplane mode toggle concept from Jon Kantner, complete with puffy contrail clouds. Kate Rose Morely's 12bit rainbow pallet Explore swatch samples of the colors in Kate Rose Morely's 12-bit rainbow palette in Jim Roberts' Pen. The color palette "uses a 12-bit color depth, so each color requires only four characters when specified as a hexadecimal color code in CSS and SVG". Glitchy Circles move and distort behind glitchy lines in this canvas animation from prisoner849. Sit back and watch the scene shift and glitch endlessly. Typography Poster #3 Paulo Nunes brings us a little dose of "Fluid-typography, grid and the cascade". This is the third in a series of typography demos from Paulo; check out #1 and #2, too.

Shopify Releases The Boring Edition: Winter 2025

Shopify’s 2025 Edition, humorously titled The Boring Edition, takes a no-nonsense approach to improving its platform. Instead of introducing flashy new features, Shopify is doubling down on making its existing tools faster, more customizable, and more efficient. Whether you’re a merchant or a developer, this release promises significant upgrades to help you save time, reduce friction, and grow your business. What’s New for Merchants? Faster, Smarter Checkouts The Shopify Checkout experience is now up to 50% faster, ensuring customers can complete their purchases quickly. Cart loading times have been dramatically reduced, and checkout buttons are up to 58% faster. These speed boosts are vital in reducing cart abandonment and improving the overall shopping experience. Shopify has also added more customization options: Checkout Blocks are now available on all plans, allowing merchants to personalize their thank-you pages or add promotional offers post-checkout. Chat Integration enables customers to get live support directly during checkout, smoothing out any last-minute hesitations. Draft Orders Expansion: Merchants can now bundle products, apply special pricing, and use Shopify Functions seamlessly in draft orders. This is particularly valuable for B2B merchants managing complex transactions. Customer Account Upgrades Shopify’s new Customer Account Extensions make it easier for customers to log in, track their orders, and handle returns—all from one streamlined interface. For merchants, these accounts offer new ways to collect feedback directly from customers, helping you fine-tune your offerings. For B2B businesses, customer accounts now include features like self-service for invoices and quotes, making it easier for wholesale buyers to manage their accounts. Enhanced In-Store Selling Tools Shopify POS (Point of Sale) has received several key updates: Product Bundling: Merchants can now sell product bundles directly through POS, simplifying promotions and package deals. Split-Screen Checkout: Staff can search for products while keeping the cart visible, speeding up in-person transactions. Metafields Integration: Merchants can collect and use specific customer data at the point of sale, enabling more personalized service. Time-Saving Automations with Shopify Flow Shopify Flow now automates even more tasks, making it easier to manage your store: Handle returns and exchanges without manual input. Set up marketing campaigns like abandoned cart emails using pre-built templates. Automate targeting with segment-based triggers, allowing you to engage specific customer groups effortlessly. What’s New for Developers? Streamlined Checkout Development Shopify has made checkout development faster and more flexible: Checkout buttons and carts now load significantly faster. Developers can embed chat apps directly into checkout and thank-you pages using new Chat UI components. Draft orders now support Shopify Functions and checkout extensions, providing a consistent, customizable experience across all sales channels. More Powerful Storefront Tools Developers building storefronts will benefit from several major upgrades: Liquid DX Enhancements: A new developer experience with features like autocomplete and better debugging tools, available through an improved VS Code extension. Unified GraphQL API: Manage multiple elements of your storefront with fewer API calls, saving time and reducing complexity. Faster Shopify CLI: The CLI has been rebuilt for instant server startup and no longer depends on Ruby, making it easier to set up and maintain. Other Notable Features in the 2025 Edition Chat Apps in Checkout: Provide real-time customer support to increase checkout conversions. Returns Management: Automate the returns process with new triggers in Shopify Flow. POS Hardware Integration: Enhanced support for Shopify’s POS hardware, ensuring smooth operations for brick-and-mortar stores. Marketing Simplified: Pre-designed templates for marketing automation allow you to set up campaigns quickly and effectively. Improved Personalization: Use customer data to deliver tailored offers and experiences, whether online or in-store. Why Call It “The Boring Edition”? Shopify leaned into the humor with this name, but it reflects the practical focus of the update. Instead of flashy features, Shopify concentrated on improving the tools you use every day. It’s about making things work better, faster, and with less friction. Whether you’re a merchant looking for smoother workflows or a developer building better storefronts, Shopify’s 2025 Edition is all about efficiency and reliability. Sometimes, boring is exactly what you need to get things done. See the Shopify 2025 Winter Edition

Why Most UI/UX Designers Fail Before They Even Open Figma

Hello there, designers! 👋 Asking the right questions before starting a new project has been a game-changer for me.I know it’s easy to skip the chit-chat and go right into Figma, but trust me: with over 6 years of UI/UX experience, I’ve found that the right questions are the building blocks of every successful design project.They’re like the GPS that stops you from driving off a cliff — or at least into an area of endless revisions.So take a coffee and let’s talk about why this is important, what questions to ask, and how to ask them like a pro.I’ll even cover some stories and pro suggestions that you can use. Ready? Let’s go!👀 Don’t just stare — Click & follow!Why Most Design Projects Fail (And How to Avoid It)Over two-thirds of projects fail because no one tries to get everyone on the same page from the very start. What about the fallout? Wasted time, money delays, and confusion lead to a cooked mess.I’ve had the experience of designing a feature only to discover that it couldn’t be built because of an unknown old system. Oof.Here’s where questions come in handy. Asking the correct questions at the start helps to avoid unfortunate events by setting targets, sharing limits, and keeping everyone on the same page.Do you want an idea of what I’m saying? Take an infographic titled “The Cost of Skipping Questions”: one side shows a smooth project schedule with smiling people (time and money saved), while the other shows an irregular pattern of delays and dollar signs flying out the window (chaos and rework).Spoiler: you want the first one.Here’s my tried-and-true checklist of pre-project questions for designers.I’ve divided them into six main groups (plus a few more!), with detailed examples and an explanation of “why it matters” from my personal experience. Let’s go in.1. Project Goals & Business ImpactWhat is the main business goal? (e.g., boost conversions and decrease abandonment)What is the one statistic that defines success in this project?Who are the important stakeholders, and what do they expect?Why This Matters: I previously thought that the client cared more about aesthetics than their value, but talking about goals early saved me from a complete revision.Pro tip: Ask stakeholders what are their top goals. Unresolved problems here could put at risk the project later.2. User Research & Target AudienceWho is the main user group? (Age, location, behavior, and pain points.)Have we done any user research or surveys?What are some common feedback from consumers in this industry?No personas? If you can do a quick user interview that would be helpful.Pro Tip: For a recent SaaS project, asking for user personas upfront led to an onboarding flow that users loved.3. Competitive & Market AnalysisWho are the top competitors, and what works well in their UX?What makes this product/service stand out?What 3 things do users hate about competitors’ products?Should we follow industry trends or break them?I’ve seen projects fail because no one asked about competitors — don’t sleep on this.Explain your response! This can help set your project apart.4. Project Scope & DeliverablesWhat specific screens, pages, or features are needed?Which platforms will this design run on? (Mobile, Web, Tablet, SaaS)Are there any tech stack limits or frameworks to consider?What is the needed level of interaction and animation?These questions once helped to clarify a confusing feedback loop during a tight deadline contract.5. Content & Branding GuidelinesDo we have a brand style guide? (Colors, typography, imagery)What type of content will be included? (Text, images, videos)Is there a tone of voice to align with?Who’s handling copywriting and image selection?I continually confirm content timelines — once, a “rush job” delayed because no copy was available.6. Development & Technical ConstraintsWhat tech stack is the dev team using?Are there CMS, backend, or third-party integration limits?What’s the performance/load time standard?Invite a dev to your all meetings at least once a week. I once designed a feature that couldn’t be built. 🤦Bonus 7. Post-Launch & Iteration StrategyHow will success be measured post-launch? (Metrics, A/B testing, Heatmaps)Is there a plan to collect user feedback?Will there be continued design support?Pro Tip: Asking this shows you’re thinking long-term — it wows clients every time.How to Ask Questions Like a ProIt’s not only important to ask, but also how. You don’t want to sound like someone who is questioning someone suspicious, right? Here’s how to get meaningful responses without feeling awkward:Collaborative Speaking: “What’s success?” vs “How can we define success together?” It is less combative and more team-oriented.Timing Tips: Set goals at the very start and save limits for planning sessions.Go more deeply: If they reply, “Make it user-friendly,” ask, “What does that mean for you? Do you have an example?Building trust is the goal, not just giving answers. Do this, and you’ll be the designer everyone wants to work with.Personal Trick: I usually ask for examples of designs they enjoy (or dislike). It’s related to a cheat code for aligning expectations.Pro Mistakes to Avoid (Lessons from My Experience)I messed up so you didn’t have to. Here are two important ones:Mistake #1: Assuming Stakeholders Agree on GoalsArrange a “Goal Prioritization” voting session during the start. When the top three goals are not aligned, it serves as a warning sign.Mistake 2: Skipping Technical Chats with Developers.Involve a developer in discovery meetings. I once planned a feature that could not be built because of CMS limitations, resulting in a whole redesign. Yikes.How to Scale This Process (For Agencies & Teams)Have a team or agency? Here’s how you make this work:Document everything: Set up a “Project Kickoff Hub” in Notion or Confluence to collect all answers. It’s a lifesaver for onboarding and mid-project updates.Mentor juniors: Teach them to ask “Why?” five times to get to the bottom of the problem. It improves critical thinking fast.Template it: Here’s an email-friendly stakeholder interview starter: Subject: Let’s Crush This Project- Quick Questions to Start Body: “Hi, [Name], I’m excited to get started! Could you please share your opinions on [insert 2–3 critical questions] to ensure that we are on the same page?After 6+ years of improvement, this strategy is quite working.Final WordsAsking the correct questions not only avoids disasters but also helps you to do well. This approach will help you create better designs, stay on schedule with projects, and wow customers (and colleagues).Try these on the next task and feel the difference.Choose 5 questions from this list, apply them to your next project, and then tag me on Instagram with the results for a free design review!Oh, and what is your must-ask question? Please share your thoughts in the comments section below; I’d appreciate hearing them!Thanks for reading! If you enjoyed this post, give it a clap and follow for more content.……Want even more inspiration?Follow us on social media for your daily dose of design, innovation, and creativity right in your feed!Linkedin | Instagram | TwitterWhy Most UI/UX Designers Fail Before They Even Open Figma was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dating Apps: 6 UI/UX Design Tips for Modern-Day Cupids

Whether you admit it or not, our need to have a partner represents a fundamental instinct — the software created for us by Mother Nature. All of us are searching for a partner to march hand in hand into the future, complement each other, share the satisfaction, and enjoy life together.It’s also true that it’s hard for busy modern people to spend quality time searching for the right person. As a result, dating apps have become a necessary evil for millions. However, is it a real reason for creating dating apps?Technologies are changing the world. We’ve started communicating with them so naturally, that they impact our daily life in all its manifestations. And relationships aren’t the exception.The saturation of the dating app market. Get ready to struggleToday, millions of people meet each other online. As dating apps are increasing in demand, matchmaking mobile apps look like a promising business. However, the market is becoming saturated. From farmers-only dating apps to apps for people with the same musical tastes, there are millions of dating apps across the world. So, if you’re going to create one, prepare for competition.How to win a user’s heart with your dating app?Dating app developers and designers are the modern-day Cupids bringing love (short- and long-term) through their digital products to the entire generation. To build a dating app which is able to win a user’s heart you should keep abreast with what’s going on the market. Surely, to create a dating app you should follow the latest mobile app development trends. However, dating apps have some peculiarities. So without any further ado, let’s have a look at 6 tips that’ll help you build a dating app that’s fit for 2019.Build Empathy for the End-UsersYour tools aren’t only pixels and creative wit, but also a whole lot of empathy. As there is no universal rule on how to build relationships, the same can be said about dating app design. There can’t be a one-size-fits-all matching template or user experience design. All people are different.Dating app designers should have a deep understanding of the human psyche and mating models. To create a successful dating app design is not as easy as it may seem. You should virtually embody a user to tailor UI design able to interact with human feelings and emotions.Figure out the prototypical life situations to understand what kind of people are going to meet, why they decide to do this and how they agree on it. Your main mission is just to make this decision-making process easier for people.Tinder’s swipe left/right mechanics is a shining example of how people would like to behave in real life. You don’t know if someone has swiped left or not, so it’s not so stressful since you don’t have the fear to be rejected. And you don’t feel guilty too when rejecting someone. Instead, Tinder makes users feel good when they receive a match.Meet user’s expectations. Investigate how to match the right peopleNearly half of online daters are looking for someone they have something in common with. You can match people by interests or by things both of them hate. A shining example of this is the Hater app that helps meet people who ‘hate the same stuff.’ Badoo has a section where a user can look for their celebrity crush lookalike.Besides interests, there are also other matching options. For instance, Dine app has a very special matching style, integrating with Yelp. You can opt for three bars or restaurants and the app will offer you up to 5 matches who have chosen the same places today, so theoretically you can request to meet with a person right at this restaurant.Locali app offers a great solution for people who plan to travel to certain places. It founds matches around places you plan to visit.Give your users a feeling of safetyLet’s consider the Bumble app. It’s a great example of a women-friendly app. Here, women message first. Men have only 24 hours to answer after the match expires. There is also an option when one woman messages another woman. In this case, either party can respond first. However, you should consider some compromises, since not all men want to wait for the moment when somebody will message them first.Hinge app offers a wonderful solution for shy people who often don’t know how to start a conversation. Besides photos, users can include into their profile favorite food, two truths, and a lie or similar info tidbits. Such details help people to start the conversation by asking a question or commenting on something.This application has one more peculiarity — the two-tabbed interface that allows toggling between the chat and the profile. When chatting with someone you can come back to profile to check, for example, information about birth, dream vacation and so on.That’s not a secret, most of us aren’t honest in our profiles. Badoo app gives a great solution for it — a live video chat option for matched users. It helps to avoid stress caused by disappointment got when you meet a matched person in the real world.Pay special attention to a user profileSwipex app design by Fireart StudioA user profile should give enough information about a person and at the same time, it should be minimalist and not to overload a user with the long-filling forms. Do your best to make it intuitively understood.A user profile on Tinder seems minimalist, but does it really give enough information? On the contrary, Hinge app’s users should fill out long forms, but it allows to create a very detailed user profile. The best option is to keep a balance between Tinder’s minimalism and Hinge’s too detailed user information.Anyway, there are some core components that are obligatory on a dating app’s user profile such as photos, age, gender, interests, and other information that users might like to share.Design the messaging logic wiselyCredits to InVisionSo, you received a match. What will happen further? Communication, of course. Messenger is one of the most important things in the dating app’s UX and UI design. Design it wisely. You can use push notifications in order to prevent users from missing out on a possible romance. Another great option is smart real-time alerts about events within your application such as messages, matches, reminders, etc.Set the right mood with the color paletteIf your dating application promotes hot and passionate relationships, then consider red-color palette in your visual design.However, you can play on the safe side of happiness by using yellow colors like designers of Bumble app have done. BeLinked, an app connected to Linkedin, creates the mood of more serious relationships built on trust, thanks to a purple-red UI design. If you’d like to motivate your users to build efficient and long-term relationships, try to use the green palette.Final thoughtsInvest in the uniqueness of your dating app in order to get a chance to stand out of the crowd of Tinder’s clones.Dating app designer’s mission is very important in the modern-day world. According to The Economist, dating apps increase the rate of interracial marriage. One-sixth of all first marriages are via dating apps. And 70% of same-sex relationships start online.You can create a digital product that opens up a chance to feel pleasure, necessity, and even love. These aren’t just positive emotions. We’re talking about feelings that are fundamental for building a better future and raise our overall satisfaction from life.Dating Apps: 6 UI/UX Design Tips for Modern-Day Cupids was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Airbnb Wishlist Revamp-Collaborative trip planning made easier (UI/UX case study)

My process and solution for improving the wishlist feature to help you and your friends plan trips on Airbnb.It’s the season! Everybody’s stepping out of their homes, backpacks ready, flight tickets in their hands, hotels booked, and hearts pumped up with excitement. After a long fight against the pandemic, things are finally getting a bit back to normal, and people are already on long-overdue trips with their friends.Illustration courtesy: Me💃Obviously, I’m filled to the brink with jealousy, looking at everyone’s Insta stories and Snaps of people on their crazy adventure. I swear half the people I know are holed up in Manali or Rishikesh, while I’m stuck in my dingy room. But it’s okay. Apna time aaega. 🙂👍So it’s no surprise that I started my UX journey with something related to travel. I found it to be a relevant field to tap into because the travel industry will boom once the pandemic abates, as people(like me) are very eager and ready to go out after being confined at home for a long time. Thus I began to look for what relevant problems I can address and decided to go forward with the challenge:How a group of friends can plan and book their mutual tripI decide to solve for this on the Airbnb platform, as it is an app used primarily by the millennial and Gen Z peeps, and I have better access to them, making it more relatable.Heads up! Please do view on a bigger screen(preferably desktop) for a better experienceLet’s understand the ProblemIt’s summer vacation, and Satabdi and her friends want to beat the heat by escaping to Ooty🛫🔎They are looking for places that are unique and homely and want to stay away from the crowd, so they decide to search on Airbnb🧐 Satabdi opens Airbnb to look for suitable homestay options💬 She finds one that she likes, and she shares it on the group chat on Whatsapp🙅‍♀️ Her friends have multiple opinions on it. Some want to stay in a place that offers a different experience, some are not sure about the pricing, and some want more options🤓 So Satabdi again goes back to Airbnb to look for more hotels and shares more options on the group. Her friends have also done the same👀 Now there are so many options! It’s becoming difficult to navigate as they have to click on the link repeatedly and go to the app to know what features the stay provides⏱ This whole process is messy, which leads to delay in decision makingThis is the ideal problem-story that I thought a typical user would face. Then I realized that this can be assumed for every app, not particularly Airbnb. So to get more in-depth understanding, I would need to go through the app thoroughly and also get the opinions of other users. So on to the next step - Researching!🔍1. App Analysis📲I have used the Airbnb app before but had never gone in-depth in finding out what features the app has to offer. So I began exploring the whole discovery and booking process.The whole process is pretty seamless, but I’m pretty much sure that there’s no step in the process that includes any form of collaboration. Or is there?I found this little thing which kinda misses the eye, termed as Wishlists!Wishlists feature in AirbnbTurns out that Airbnb has already worked around bringing collaboration into the platform by introducing wishlists, where you can:Like stays and save them in one placeSegregate different stays in different wishlistsInvite friends to view and add to the wishlistWishlisting in AirbnbWishlisting is pretty easy, and you can compile some of your favorite places in a jiffy! But in contrast, inviting is not as intuitive. The invite option is hidden inside the three dots (googled it, it’s called vertical ellipsis), and as such, the page itself gives no indication that it can be shared or that you can add friends.Inviting via the ‘send an invite’ optionInviting via the share iconThe key reason may be that Airbnb didn't prioritize ‘inviting’ here, putting more focus on ‘wishlisting’, but my main aim here is collaboration, I feel that this flow needs more hints that the user can pick up easily to facilitate the same.2. User Research👥Since I am working on improving the experience for a group of friends, I need to directly get the feedback of the people. So I whipped up a google survey form and shared it across my peer network. I got my feedback from more than 80 people, who were largely in the age group of 18–24.The key questions were:What are the challenges for planning group travel (with friends, family) when using a travel app?Which form of the decision-making process do you like best?Do you know of the “Wishlists” feature in Airbnb and that it can be shared with other people? If you haven’t used the share option, why not?Important Insights🔬It’s not easy to choose anything in the initial stage when considering everyone’s choices! It makes more sense that people choose whatever they like and then put them in a single place where they can communicate and proceed furtherMaking the final decision is a tough thing. Even the user is in conflict whether they prefer to vote unilaterally or give the decision-making choice to a single person(leader)The wishlist feature was introduced with the aim to let people come together and create an inventory of their favorite places, but it goes largely unnoticed! Among those who know about and use wishlists, only around 9% actually knew they could share it and invite people into the listThe last insight also answers our previous question “Airbnb has already worked out a solution, why are we still here?”The answer: It’s not functioning the way it should😕Most people do not use wishlists, and the few who do are not even aware of the working of wishlists with its share/invite option, owing to its poor discoverability.Wishlists just seem like a place to store your favorite stays, and there isn't much encouragement to share it, thus keeping the users in the dark about what they can do when they share the list.How do we proceed from here?🏃‍♀️Whichever way you try solutioning, the key thing is for there to be an enhancement in the experience. This can be in the form of introducing a whole new feature or improving upon an existing one.For this situation, it’s better to ideate upon the Wishlists experience as:Improving on an existing feature has the advantage that it has a lesser learning gap than introducing a new feature altogether.People are not very comfortable with big changes, and thus this seems a more viable option.Airbnb has tried to solve this problem with the wishlists thing, which is a smart move, but the execution part has been a bit lacking, or maybe it hasn’t been explored properly yet.The conclusion I came to is to iterate upon the wishlist feature and include some more options which are multitude-focused.Goal🎯I got the general idea of what I wanted to do, and in a nutshell, it would beUpgrading the Wishlists feature by :improving discoverability👓building a comparison matrix📃guiding users to help in making a decision🏹integrating a chat option💬Let’s see how well I can accomplish these!Ideating and Sketching ✍OK, to be honest, I jumped on making the UI rather than sketching out my ideas-like a total noob. Which was a huge mistake. What could’ve taken me a few days, went on for weeks, till I was berated and told to go back to the basics. It was then I started creating the User flows and Wireframes for the application. I integrated the flows with the wireframes to get a better understanding.Learnings: User Flows are a visual representation of the path the user can follow to achieve a goal. Wireframes serve as visual guidelines for the design of a given page on a website or app. In practice, you might want to use wireframes as a tool to help you illustrate user flow. It’s easier and wiser to make changes on this level because it saves you time and energy from making more costly changes later on.I didn't 100% follow what I'd sketched out, neither were my user-flows strictly accurate in the conventional sense, but it gave me a clear vision of the general working and where I wanted what. This made the UI building process much simpler!User Flow+WireframingHow did I solve:Improving discoverability👓I didn’t do anything extravagant. Airbnb is still one of the leading platforms with a great design that connects travelers with awesome homestays. So maintaining the initial flow of the discovery process was non-negotiable. But encouraging people to use Wishlists was the first step to help them explore the feature and discover collaboration! So it was important to bring attention to this thing.When you land on a stay’s screen, a tool-tip (with visual contrast layer over the screen) pops up to let the user know about the feature and what it offersThe whole flow of searching for rooms stay the same, and this pop up will appear only for a few seconds, which can also be closed by the user by tapping anywhere on the blacked-out screenThe invite button is taken out of the ellipsis and displayed just beside it, giving a clear indication that this list can be shared,The rest is the same as the original invitation procedureThe people in the list are displayed instead of the invite button once they have joined and can be accessed and edited by directly clicking on itBuilding a comparison matrix📃One would think of displaying the selected listing side by side so that users can directly compare. But doing that in a mobile app is tough because of its limited real estate. The list might get overwhelmingly long, or some details might get lost because of too much visual overload. Thus filtering options based on important criteria is the best option in this case.Added more filter tabsThe ‘Dates’ and ‘Guests’ criteria were already present, so it wasn’t too much of a sweat to add more, following the same hierarchyHere, I have introduced ‘Locality’ and ‘Amenities’, as they are the most important things that people search for while browsingLocalities tell us about the areas present in the list and you can choose from themAmenities will have the whole list of different facilities that are available/not in that stayDifferent options to filter choices fromFilter tabs and amenities shown after picking criteriaThe selected options are highlighted in the same filter tabs for dates, guests, and localitiesThe listings will be displayed in the descending order of which stay satisfies the most criteria to the leastBeneath every stay’s card, the corresponding amenities will be displayedI took the decision to only show the amenities that are not available+the ones that need elaboration, cuz in the case of a user selecting 10–15 options, it will create a mess displaying all of themGuiding users to help them make a decision🤝We all are creatures that value our own opinions. But we still need to come to a point where we have to agree on something, otherwise that trip to Goa will still be pending, even after 1.5 years.I did consider putting in a voting mechanism, but that won't be of much help cuz there are always more than 1 places that a person likes a lot, and the chances of two or more places getting the same number of votes is pretty high. A simple indication that a person likes a place is enough just to figure out which places are liked by the majority, after which they can be discussed out and decided upon.1. Viewing other group members’ likes💖Like button showing how many people like that stayThe number of likes a stay gets will be indicated as shown above, and will only be visible for the particular wishlistThe stays in the list will be sorted from the most likes to the least2. Integrating a chat option💬Chat in Airbnb!The Chat option is shown beside the Map button, as they come under the same hierarchy, and is also easy to access at the bottomThe red circle indicates that there is a new unread chatDifferent wishlists will have different chat histories, the primary function of chat here is to communicate and decide on which stay to choosehttps://medium.com/media/7d717d8d766d0f0b88e331ca2f5cdc93/hrefThe chat mechanism is pretty basic and inspired by that of Pinterest, with no function to add external images/videos as it is not fundamentally needed hereThe only added option is the home-heart icon that inserts the homestay’s detail card in the chatbox. This will be needed from time to time so that they don't have to go back to the older message where the homestay was first brought into the chatThe page that pops up on clicking the home icon will display the stays that are on the wishlist they are currently on, as well as a ‘Recommended’ section that will show stays similar to the ones on the wishlist, wrt. to location, criteria selected, etc.The purpose of the chat option is to facilitate communication here, i.e., it might not be used much after the trip planning has been completed, and thus made with that simplicity in mind.How is it reflected in the booking process?So eventually, you all have decided on a place that suits at least the majority! Woohoo!But still, there are so many questions:Who books the place? Will the trip booked show up in everyone’s profile? How will I know that the trip has been booked if someone else has done it?Fret not, simply adding the place to a wishlist while booking will do the trick! And yes, it will show up in everyone’s profile, as long as they are part of the same wishlist.https://medium.com/media/68ab99b8bf1e3a1714a01613faf41297/hrefDuring the booking process, an option will be available to add the trip to your wishlist, which is similar to the ‘Is this a work trip?’ optionSelect the wishlist that is related to your trip from the list, and it will be displayed on the pageNow go ahead, book your long-awaited vacation!Once booked, the trip will be reflected in the Wishlist and be visible to all the members throughout, from ‘Wishlists’ ➡ ‘Trips’You can now fight over who is going to pay the food+drinks bill and who will take the best room, and how much luggage you need to bring! XDAnd that, folks, is my take on discovering and promoting collaboration on Airbnb, using the Wishlists feature! Obviously, there could have been many more changes, be it on the UI or adding more features, but that’s a story for a different day🌞OK wait…So we have finished with the solutions, how do we know if it’s gonna work? I can’t test this out right now(anyone who can make this a reality hmu), but we can certainly point out a few of the Key Metrics that can indicate a successful outputIf the number of people who use wishlists goes upIf the number of impressions on ‘Invite’ increasesIf there is a good number of conversions from wishlists ➡ trips in terms of bookingsFuture Scope and Improvements🔨The next step would be the ability to book multiple Stays and Experiences(events that one could book and participate in) and connect them together to plan a whole itinerary!A budgeting option that splits the expenditure made in the whole trip would also be a nice addition and would make more sense after the previous step has been implemented.Often, while choosing a stay, people refer to other apps(like google maps) to check out the surrounding areas and see what activities/sites it has to offer. This could be integrated within the Airbnb app so that the hassle of traveling in and out of the app is reduced.There could have been more explorations on how the booked trip is reflected in the Wishlist.Probably the most important one, I could have done more user research, talked to more people, basically focus more on qualitative rather than quantitative research. Will have to brush up on my research skills!Wrapping Up🎁If you're still here, then thanks! This project was a long process in the making, and it means a lot that you’ve gone through the whole article. If you have any questions or suggestions, do comment below or ping me at:📧 xsatabdi@gmail.com🔗 LinkedIn🐣 TwitterWe could have a hearty discussion on this project, or about design, or maybe about anime if you’re into it!😉Airbnb Wishlist Revamp-Collaborative trip planning made easier (UI/UX case study) was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing Wysa’s Illustration guide

Keeping hand-drawn styles alive — a brief case studyContextI interned as a UI/UX Designer at Touchkin during the summer of 2017. Touchkin’s primary product is Wysa — A mental health AI chat-bot. I wasn’t a very seasoned designer back then, but I realized that illustrations were a vital part of this product, because:AI chat can feel very robotic (Oh the irony!). Graphics like images, GIFs, and stickers are a fitting break to the mechanical feel of the user experience of a chat-bot. This gives the AI a human touch. ( Imagine WhatsApp without emojis. Scary.)I went through several user reviews on Play/App store and found that the cutesy GIFs Wysa sends occasionally can make a sad soul feel 10x (Okay maybe 5x, sue me) times better than before.At that time, Wysa’s GIFs were not created in-house. We used Chibird’s content. One of my many missions during this internship was to create a whole new set of GIF’s in my own unique style, in-sync with both the product and brand. At the end of my 2-month internship, I’d created almost a 100 GIFs for the chat-bot (it’s true).Setting the style — Jeez enough of flats and isometrics!Let’s look at illustration trends nowadays (since 2017):Images tagged ‘illustration’ on DribbbleImages tagged ‘illustration’ on BehanceWell, lookie here. Designers are slowly but surely adopting flat, isometric styles with bold gradients and vibrant colors. There’s nothing wrong with this; In fact, I swoon over too many such illustrations each day. However, Wysa is a heavily people-centric product (Isn’t everything these days?) and dealing with mental health is a sensitive issue which requires utmost empathy. My manager would always stress on how the entire product was centered around empathy — which is truly the crux of Wysa. All designs should be user-centric, but for Wysa, it was insanely vital because the users themselves were half the product.‘Empathy’ is the modus operandi of a mental health AI chat-botSo now I had to empathize with the user through illustrations, presented through GIFs, in an AI chat-bot. Phew. The above trending styles seemed to lack empathy. They were(are) amazing, aesthetic and beautiful UI, but didn’t feel all that “human”.From my previous works on the product, I already had an understanding of the various user persons. My first thought was — “How would these people relate to graphic images? Keeping in mind that they are unstable, what kind of colors and/or images would they prefer to see?” (I immediately thought of baby and cute cat GIFs — funny and soul soothing 😌).I presumed that people relate to artwork which looks more like something they themselves would draw (I’m talking about normal, hand-drawn stuff). Logical enough right? I confirmed this assumption from multiple sources including past user activity, reviews, and team inputs.People loved the existing Chibird’s style. It was simple yet powerful, light yet impactful, and more importantly, they were motivating and uplifting. This was added to my list of inspirations. I went ahead with some research to add more to this list:A few references collected for various hand-drawn styles and different moodsTwo days in and I felt a huge rush of inspiration. I designed the characters using my Wacom One ❤ and Photoshop. As I designed for the content provided by my team, new characters and themes came up. It was an exciting time to be in 👽*Drum roll*….Aaand here’s a couple of my GIFs and the complete illustration guide:A few GIFs I made for WysaWysa illustration guide.pdfNote: All the above GIFs and the Illustration guide are copyright of Touchkin E-services Pvt Ltd and cannot be used without permission.ConclusionI’m not an illustrator or a graphic designer, but design is about solving a “people-problem” (be it art, code or politics) and that’s what I’d hoped to achieve. I hope this article left you all with a sense of learning and inspiration to help you with your next illustration project ✌️P.S. Take a look at Grant Snider’s comics. They’re an absolute delight.I’d deeply appreciate any feedback and criticism about both my writing and what I have to say. See more of my stuff: Medium, Dribbble, Behance, Touchtalent. Promise I won’t bore you 😀Designing Wysa’s Illustration guide was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Baggage Repair Service Platform Design Case

App design conceptsFireart Studio, an award-winning UX/UI design & product development company, has released its next product design case. This is a baggage repair service platform design case for Dolfi, a company that specializes in repairing baggage. The project activities also cover airline claims, warranty repairs, and personal cases.Dolf iAppDolfi is a company whose deal is to operate from 5 European repair hubs. Their managers and support specialists, as well as craftsmen, help each and every client individually by using their unique resources like door-to-door services, time-proven repair techniques, etc., to solve the users’ baggage issues.“Our task was to develop a complex seamless service for 3 groups of users.” — admits the project team.As a result, the services for the following three groups of users were developed: Dolfi’s customers who wanted to claim their damaged baggage, accessors who received their claims and needed to elaborate them, and airlines who wanted to manage and control all the processes.User Flow fragmentsThe whole digital product development process was long and included various stages of research and development. Several groups of User Personals were created during the study: The Customer side, the Assessors team, and the Airlines. Detailed User Flows based on Personas were deliberately developed to find and eliminate all the roadblocks to simplify the claiming process as much as possible.Among the other product design artifacts, Wireframes were developed to showcase the user interface design and functionality.Dolfi wireframe illustrationAs a result, the team developed a user-friendly chat-based interface, allowing users to claim damaged luggage in a few clicks and receive monetary compensation or a new suitcase in less than 2 minutes. Now users can achieve their goals without any complicated bureaucratic procedures and endless waiting on the airline phone call lines.Fireart Studio keeps its position as a leading UX/UI design studio with a proven reputation both in Poland and expert overseas. After dealing with unusual and challenging design issues for more than ten years, the team can successfully demonstrate its top-notch software design services in any niche. They help to produce exquisite and highly functional designs for corporate companies, small businesses, and individuals who open doors for the digital world.More on BehanceFireart Studio has already managed to cater to both the giants like Google, Atlassian, Huawei, or Swisscom and the most promising startups or business newborns. The possibilities are endless, with more than 80 highly qualified IT specialists on board and years of company experience. Do not hesitate to get in touch each time you need expert design solutions for good.Originally published at https://fireart.studio on May 10, 2023.Baggage Repair Service Platform Design Case was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

AI’s Invisible UI: Designing for Intent, Not Interfaces

Why the future of product design may have less to do with screens and more with systems of trust.When I first began learning product design earlier this year, I expected to spend hours crafting beautiful UIs — selecting the perfect gradients, obsessing over typography, and studying how apps like Notion or Pinterest use space and rhythm.And I did.But it didn’t take long before the ground started shifting.Suddenly, Figma wasn’t just where I arranged components — it became where AI helped generate layouts. I could describe an interface and get a usable wireframe in seconds. The interfaces I was learning to design were, in some cases, being built by the tools themselves.But this shift didn’t discourage me.It reframed everything.If screens are no longer the only touchpoint, what are we really designing?The answer — I’ve come to believe — is intent.From Screens to SystemsTraditionally, UI design has been about what users see and touch. It’s visual. Concrete. It responds to our taps and scrolls.But AI-driven experiences — think ChatGPT, Siri, or even a smart fridge — blur the lines between interface and intelligence. Often, there’s no visible UI at all.This is the age of the invisible interface, where interactions become conversations, predictions, or actions that happen without explicit input. You don’t select a button labeled “remind me tomorrow” — your calendar just knows based on the context of your chat.For designers, this is a radical shift. We’re no longer just arranging elements on a screen; we’re designing decision flows, contextual triggers, and trust loops.And most of that doesn’t live inside a layout. It lives in the logic underneath.Designing for Invisible Interfaces Means Designing for ContextTake Google Now or Apple’s Siri Suggestions. These don’t present traditional interfaces like a music player or calendar app does. Instead, they offer something at just the right time — a map when you’re leaving for work, a podcast when you plug in your headphones, a reminder based on your emails.There’s an elegance in this kind of design. It’s subtle. It respects the user’s cognitive load.But it’s also incredibly complex.To design for context, we need to:Understand user habits and timingMap intentions, not just actionsConsider edge cases where the AI might get it wrongDefine how the system fails gracefully without frustrating usersAnd most importantly, we need to do all this without relying on screens as crutches.This is what makes invisible UI so challenging — and so exciting.Intuition Over InstructionIn traditional UIs, we guide users:“Click here.” “Start now.” “Add to cart.”Invisible UIs flip the model. They have to anticipate, interpret, and adapt.That means designing systems that understand, not just systems that display.In the world of AI-powered products, a good design isn’t one that gets users to finish a flow faster. It’s one that understands why the user is here in the first place — and then adapts the flow in real time.This means:Prioritising predictive UX (like autocomplete or smart defaults)Embracing non-linear flowsShaping systems that respond to vague input with clarityA prompt like “reschedule my meeting” shouldn’t ask which one if the context makes it clear. And if it’s not clear? The system should ask the right clarifying question — not bombard the user with dropdowns and options.Design, in this case, is dialogue.And good dialogue starts with understanding.Trust Is the New UIHere’s a lesson I’m still learning:In AI-powered interfaces, trust is everything.Why? Because the more power we give to AI, the more users need to believe that the system will act in their best interest — even when they can’t see how it works.There’s no pixel-perfect UI to fall back on. No lovingly crafted empty states or playful animations to reassure the user. The experience happens beneath the surface.That means designers have a new job: designing for trust.This involves:Transparency: Making it clear what the AI knows and how it decidesControl: Giving users a way to override or correct the systemFeedback: Letting users know their actions shaped future outcomesBoundaries: Designing ethical defaults, especially around data and privacyWhen trust breaks, the whole system collapses — no matter how smart the AI is.Invisible Doesn’t Mean ImpersonalThere’s a risk in all of this:That in stripping away interfaces, we also strip away personality. That we create sterile, robotic flows where once there was human warmth.But it doesn’t have to be this way.Designing for invisible UI means bringing in tone, voice, timing, and emotion — the invisible elements of experience. Think about the joy in a well-timed Slack emoji reaction, or the quiet comfort of Duolingo’s gentle reminders. These aren’t traditional UIs, but they’re deeply human.The best invisible interfaces don’t disappear — they become part of the user’s rhythm.What the Future Might Look LikeHere’s a vision I keep coming back to:A journaling app that gently nudges you with questions based on your emotional toneA productivity tool that rearranges your to-do list after reading your sleep dataA language app that adapts your learning style without asking you to define itA design tool that watches how you iterate and subtly adjusts your spacing rules or layout suggestionsIn each of these, there’s no visible “interface” in the traditional sense — just a system tuned to you.We’re not there yet.But we’re closer than we think.What it means For New Designers (Like Me)I used to worry that AI would make my design skills obsolete. If a tool can generate UI faster than I can sketch it, where do I fit in?But here’s what I’ve realised:AI doesn’t eliminate design — it shifts the playing field. It demands better systems thinking, sharper ethics, and deeper empathy.It forces us to ask not “how should this screen look?”But:“What does the user need right now, and how can we meet them without asking them to find the right button?”And that’s not just a new challenge.It’s a new creative frontier.This kind of design demands more from us. Not just visually, but intellectually. Emotionally. Philosophically.We’re designing conversations.Designing decisions.Designing behaviours.Designing the Invisible Starts with Seeing DifferentlyTo design for invisible UI is to shift focus:From layout to logicFrom aesthetics to intentFrom features to flows of understandingIt’s harder. It’s messier.And for someone like me — still learning, still asking questions — it feels like the most exciting place to be.Because when we stop designing for screens and start designing for intent,we’re not just making better products.We’re making better experiences.More responsive. More personal. More real.Even when they’re invisible.……💡 Stay Inspired Every Day!Follow us for a daily stream of design, creativity, and innovation.Linkedin | Instagram | TwitterAI’s Invisible UI: Designing for Intent, Not Interfaces was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Viber iOS 7 Concept user flat

Viber iOS 7 Concept user flat chat 7 ux ramotion design application interface ui experience iphone app ios

Top 10 Design Feedback Tools Every Designer Should Use in 2023

Credit: FreePikThe web design process has evolved significantly over the past couple of years. More and more agencies now work with remote clients and team members, which underscores the need to streamline the process and ensure creative collaboration between the two.Miscommunication or improper feedback could affect your workflow, delay timelines, and may even lead to work that requires heavy iteration before it’s accepted. To prevent this from happening, it’s imperative that you use design feedback tools.These tools allowed people to collaborate from geographically scattered places and work together overcoming space and time constraints.What are Design Feedback Tools?Design feedback tools effectively replace the conventional note-taking process when gathering feedback from clients. Instead of having clients explain each and every point, a design feedback tool allows them to offer more accurate feedback on individual elements, from subtle changes to the color palette to aligning smaller elements on the screen.Most design feedback tools have a built-in communication module that lets clients explain to designers what it is that they want. Some even have project management functionality built-in, which helps to reduce repetition and offers more transparency in the design process.In short, design feedback tools reduce back and forth between clients, and allow designers to understand exactly what the client wants.What To Consider For A Suitable Design Feedback Tool?Following are some of the key factors you should consider while choosing appropriate design feedback tools.Support for many file typesMarkup toolsVersioningCollaborationStatus trackingWorkflow automationComplianceReview and approvalIntegrationsNow, let’s check the best Design feedback tools & Annotation tools designers should use in 2023.The Best Design Feedback & Annotation ToolsFollowing are some of the best Design feedback tools as well as annotation tools. However, it can be a bit of a challenge to choose the appropriate design review tool and get website design feedback when there are hundred other tools out there.Here, in this collection, we’ll highlight the key features for you to consider when choosing design feedback software and then present the best free and premium tools to compare.Do note that, all design feedback software is created differently. For example, some tools offer support for limited file types, so they might be unsuitable if you are going to have other file types. Some tools let you add comments but not annotations, so the entire review and approval process becomes tricky. So, choose wisely.AtarimAtarim is a design feedback tool designed specifically for digital agencies and distributed teams. It has a handy plugin that designers can install on their clients’ WordPress websites, allowing them to pinpoint the exact changes that they want and leave comments on specific points.Designers can review those screenshots, turn them into tasks, and assign them to specific team members. Any activity updates and comments by the client can be viewed in the dashboard tool by the agency owner and team members.Why Choose Atarim?Can start collaborating within seconds for freeAuto-login lets you quickly log into all of your clients’ sitesExcellent support and a motivated team that regularly adds new featuresReduces the need to use other project management toolsExcellent team tracking options to assign tasks, track progress, time, and performanceRequest live-view screenshots of their website or a specific page, to see exactly what the client sees, including browser version and screen sizePricing:FreeStarter: $16/month — Ideal for a team of 5Expert: $29/month — Team of 10Agency: $41/month — Team of 15Enterprise: CustomizedInVisionInVision is a prototyping, collaboration, and workflow tool powering the world’s best user experiences. It lets you control your design process and allows you to create interactive mockups for your wireframes and designs.Each mockup can be rendered to give a more accurate representation of how the finished product will look. Clients don’t even have to sign up to InVision to leave their feedback; anyone can do so with a link.Once designers share a link, clients can review the mockups and leave their feedback. From replacing icons to changing active elements like the hover state or a popup window, InVision makes it easy for designers to gather feedback before moving ahead.Why choose Invision?Supports various file types, including graphics, video, audio, coding, text, spreadsheets, presentations, and fonts.Collaborate in real-time on the digital whiteboard.Provide in-context feedback on any documentManage and review design status in Kanban-style columns — On hold, In progress, Needs review, and Approved.Create rich, interactive prototypes. Import from Sketch, then gather feedback from any deviceProvides integrations with Sketch, Photoshop, JIRA, Storybook, and more.Limitations:Only available in DSM enterprise.Pricing & Plans:Free: Free foreverPro: $7.95/user/monthEnterprise: Pricing by requestFree trial: Try Pro for freeAlong with the Designer feedback tool, you can also use the User Interface Kits as well. They also help to boost your design process. For example, you can check the Sneat Figma Admin Dashboard Builder UI Kit.Sneat– Figma Admin Dashboard Builder & UI Kit (Best Figma Design System Template & UI kit🤩)The most feature-rich material design system with ready-to-use components and elements for building a seamless user experience.Sneat Figma Admin Dashboard Builder UI Kit consists of 500+ organized components. Besides, this Figma Admin Template UI kit is built with an atomic design system & auto layout. Furthermore, this Figma Design System template also offers 3 dashboards, 100+ Screens, and light & dark modes.You can now kick-start your next Figma project by using just dragging & drop the pre-made components from the Assets panel. Also, you can configure them in the right sidebar. Fast and simple, as it should be.In addition, it also helps you to easily set up colors, typography & border-radius that changes everywhere instantly in UI Kit. Also, this Figma admin dashboard UI Kit template allows you to easily update the state of the component.You don’t need to be afraid to change a variant if you edit a component. The settings you have configured will be saved, such as text, icons, and even size. Thus, it is one of the best Figma UI Kits you will ever need.Features:Atomic DesignAuto LayoutEasy to Customize500+ ComponentsText VariablesWell Organized100% VectorLight & Dark LayoutPixel Perfect100+ Screens and much more…!!Muzli Colors:Muzli color is a library where you can find many ideas and amazing color schemes. You can also discover the best web design inspiration, best websites, best logos, web trends, best mobiles sites and applications, minimalist websites, brutalist websites, innovative illustrations, design features, unique websites, photography projects, and visual art, as well as opinions and articles from design experts across the web and around the world.You can upload the image and pick the color or you can simply select it from the option. This is an endless source of ideas for designers and creative professionals.DesignDropDesignDrop helps designers capture and organize feedback, making the review process significantly more effective and less painful.Why Choose DesignDrop?Draw visual annotations directly onto the image and add comments in the sidebar to specify detailed feedback on the design.Share each design anywhere via a short URL. See the comments and annotations appear in real-time.Use one single reference point for all feedback instead of sifting through multiple email threadsLimitations:JPG and PNG files only.Pricing & Plans :FreeMockFlowMockFlow is a cloud-based tool for brainstorming user interfaces, including UI design mockups, sitemaps, documentation, and design approvals.Why Choose Mockflow?Draw UI collaboratively using role-based permissions, real-time editing, annotated comments, design approvals, and more.Organize each screen in a project by status to give a clear picture of the design’s outcome.Auto-generate design specifications and documentation from wireframes.Easily provide annotated feedback and approve the best variations.Provides integrations with Slack, Confluence, and Trello to provide a seamless workflow for UI collaboration.You can extend your UI workflow with 30+ addons called Power-ups.Pricing & Plans:Basic: freeWireframing: $14/user/monthProduct Design: $16/user/month.Enterprise: Pricing by request.ScreenlightScreenlight offers designers and videographers a simple way to collect clear creative feedback and move their projects forward.Why Choose Screenlight?File types: Upload video, audio, or images.Markup tools: Add comments at the precise timecode and keep the conversation all in one place with threaded comments.Versioning: Upload a new version and we’ll let your project team know there’s a new version for review. (You can also carry over all previous comments to ensure that each change has been made.)Collaboration: Set permissions for each individual, then share the link with relevant stakeholders. Password protects your project or set an expiry date for added security.Pricing:Screenlight has three subscription plans:Free: $0/monthProfessional: $9/user/monthEnterprise: From $500/monthHelioHelio offers a variety of features, including built-in tools for screenshots, annotation markups, presentations, project management, user testing, and prototyping. Additionally, if you’re the sort who likes to develop sites in the browser, you can collaborate on coded sites as well as flat prototypes.Why Choose Helio?Test prototypes, screens, and design ideas with ease and learn from real people in minutes.Create feedback loops, make decisions more quickly, and validate product concepts before investing time into engineering or design.Get reactions to copy, screens, images, or videos wherever you are in your production cycle.FilestageFilestage is a content review platform that gives designers and other creative professionals the power to seamlessly manage the review and approval process. Say goodbye to endless email threads: designers can upload and share their files with stakeholders in a matter of seconds. Those users can then click to add comments directly on your designs.The tool generates an automatic to-do list based on the comments, too, so that you never miss an important piece of feedback. Annotation tools can also help your stakeholders to articulate their thoughts and deliver constructive rather than confusing feedback.Filestage also helps you to track the status of your designs and get documented approval from all of your stakeholders.Key features:Collect clear and in-context annotations on your designsClients and partners can comment without having to sign upStrong version control features to track your designsAn integrated to-do list boosts productivityBounceUsing Bounce, you can easily share ideas on websites, making it ideal if you want to review web pages. Simply enter a URL, and Bounce will take a screenshot of the page. (Or, you can just upload an image file.) Then, you can mark rectangular areas, add comments, and share your reviewed file via a link.Why Choose Bounce?Simple, barebones functionality designed for the sole purpose of gathering feedbackSupports Web pages and images.Click anywhere on your screenshot, and type in what you want to say.Review screenshots, make notes, save them, and bounce them!Limitations:No Integration SupportPricing:Free to useRed PenRed Pen claims to be the fastest feedback tool for visual teams. Simply drag in a design (or a bunch of related designs), and then everyone can collaborate effortlessly.Why Choose Redpen?Markup tools: Point and click to give feedback. Everyone sees comments live as they happen.Versioning: Update or replace each image for every iteration.Collaboration: Ask colleagues and clients for feedback by giving them a private link or inviting them via email.Status tracking: Keeps your team updated about comments, additions, and new versions.Limitations:Supports Only designs and image files.Pricing & Plans:Free Trial for 14 days5 projects: $20/month10 projects: $30/month25 projects: $60/month40 projects: $90/monthThere’s also a free, basic version with no projects — just single uploads that you can share and last for 20 days.DiigoApart from the design feedback tool, Diigo is also an annotation tool that lets you save resources, like web pages, and annotate them from within your browser. Besides, It has an excellent outlining tool that you can use to quickly structure references and links, and then share them with colleagues or clients.It also offers tagging and sticky notes. Clients can even highlight specific text or features and then annotate them. Besides, it is lightweight so easily world with almost any browser and adds a host of different features.Why Choose Diigo?Simple extension with no learning curveIdeal for getting feedback from non-technical clientsOffers all core features at zero chargeSimple annotation-based toolPricing & Plans:Free TrialStandard: $40/yearProfessional: 59/yearBusiness: 120/year/userRuttlruttl is one of the most popular design feedback tools used by over 7000+ teams, that allows your design team to collaborate and easily share visual feedback.Instead of having to remember feedback or scroll through threads of emails to find that one comment, you can easily have everything in one place. All you have to do is add any URL, PDF, or image that you want to review and just start commenting on it. You can even make edits on live websites and toggle between different versions as and when required.Key featuresComment on live websitesMake live CSS changes with Edit modeGuests don’t need to sign up to commentCollaboration with teammatesVideo commentingReview both desktop and mobile webProofhubProofHub is packed with innovative features and is used by designers and developers from many industries. It allows managers to assign tasks and schedule them for team members and also includes several task views.Clients can access wireframes or prototypes, and share their feedback from within the tool itself. ProofHub also has an in-built chat function that clients can use to share their feedback.ProofHub brings scattered files and project-related information all under one roof, helping save precious time for development teams.Why Choose Proofhub?Easy to define custom roles and give access to team membersDirect messaging moduleBuilt-in markup toolsBillable hour trackingIt lets you do proofing, discussion, chat, mention, announcement, email & much morePricing & Plans:Free TrialEssential: $45/month — 40 projects, 15 GB storageUltimate: $150/month — Unlimited projects, 100 GB storageUsersnapUsersnap is a versatile user feedback platform that lets you share visual feedback right in your browser by using point-and-click annotation tools. You can use it for collaborating on new ideas, tracking bugs, and sharing the vision of your product or idea.Why Choose Usersnap?Supported file types are: Click, screenshot, and send. That’s how easy it is to send in-app visual feedback.You can pin comments on the screenshots directly.It also automatically captures Metadata such as URLs, browser info, and console logs.You can prepare product roadmap planning by referencing customer feedback and requesting trends directly.Assign, label, comment, search, and filter feedback to match your team’s workflow.Group, upvote, and assign issues and suggestions in one dashboard so that you can prioritize feedback.It comes with integrated support for JIRA, Azure DevOps, Asana, Github, Trello, Intercom, or 1,500 other third-party integrations.Pricing & Plans:Free Trial for 15 DaysBasic: $9/monthStartup: $69/monthCompany: $129/monthPremium: $249/monthEnterprise: Custom plans from $949/monthCloudAppCloudApp is an all-in-one screen recording tool to capture and embed HD videos, GIFs, screencasts, screenshots, and marked-up images throughout business workflows. You can record your screen as a video with your voice and face, an annotated image, or a GIF and instantly share it as a link to get your point across.Why Choose CloudApp?Add deeper context with annotation.Capture, annotate feedback, and share an instant link with your teammates.It offers powerful integrations with Atlassian JIRA, Slack, Trello, Zendesk, and more.Limitations:Supports only screen recording file typePricing & Plans:FreeIndividual: $9.95/monthTeam: $8/user/month.Enterprise: Pricing by request.Conclusion:Using a design feedback tool is just the first step. To reduce friction and back and forth, it’s also important that you know how to get good feedback. When working with larger clients, always choose specific points of contact, primarily those who know a thing or two about web design.More importantly, it’s best to ask for feedback that you think will help move the project along. Always keep some goals in mind when asking for feedback, and try to ask for examples so you have a better idea of what the client wants.Top 10 Design Feedback Tools 🛠 Every Designer Should Use in 2023 🤘🏻 was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

UI Interactions of the week #161

via Muzli design inspirationDesigners’ Secret SourceThe best design inspiration — expertly curated for you.Muzli is a new-tab Chrome extension that instantly delivers relevant design stories and inspiration. Learn moreChat interface by Hotpot for CoCohttps://medium.com/media/69e618a89af3cceaf2e9734fecf423da/hrefhttps://medium.com/media/c0c70a473620521eacc380bfd8e90a0a/hrefhttps://medium.com/media/2de722d431ce360b21de30c336ca21a1/hrefeCommerce App Design — Cards Interaction 🔥 by Tasin Ahmedhttps://medium.com/media/66b20ac07e5950d6ebbb8e43dee2a8d8/hrefhttps://medium.com/media/9a75433e81a2cb17e8298590f88860a0/hrefhttps://medium.com/media/13d00f2d332041a4b61b784906e5c0e0/hrefhttps://medium.com/media/d8389bdb5f5315510531f84f901654f0/hrefhttps://medium.com/media/a3fb5f8d53aa0b28d623f830907876d3/hrefhttps://medium.com/media/60e0db2260390fbedfef887fb24c4e7f/hrefhttps://medium.com/media/047ebc7d4dda81d6af03f3f9a983b675/hrefhttps://medium.com/media/9713fa886d57435ae1567072d9fb3e06/hrefhttps://medium.com/media/39988bed2bbbc4c5698e4cb288be16ff/hrefhttps://medium.com/media/d1bd6d99751e1d06db9af97b91960247/hrefUI Interactions of the week #161 was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Case Study: HappyX app & brand identity

The design process with a mission to make an easier life for separated familiesHappyX is the app for a better co-parenting experience sharing Wallet, Events, and Chat functionality. You can also check the full case on Behance.TaskCreate an engaging app that brings positive emotions and helps to solve any issues related to children between separated partners.Create unique and consistent branding.MissionHappyX enables separated parents to communicate and solve any things connecting to their children.Key factorsThe app is used both by parents and children, thus, the design should match these two target audiences.Functionality can be increased over time, and new chapters will be added.Swedish market orientation.First stepsOne of the first examinations of the new UXThe work has started with the analysis of the existing app where it was noticed such points:The original design was outdated and didn’t attract new users.The navigation was too complicated and overloaded.The branding has to be updated as well.Comparison of old and new 1. main chapters 2. wallet functionalityTogether with work on UX/UI there were done the first steps in finding the new brand identity.BrandingThe main idea is to reflect happiness in the app’s branding, that’s why one of the key visual elements is bright colors and gradients.LogotypeIn terms of the logotype and app’s icon, the first variants were based on the H letter—the first letter of the HappyX name. Numbers 1 and 2 from the sketches below were chosen as the further direction to explore.The first sketches for the logoThe general features that have been selected right from the beginning are — boldness and roundness.Various styles for “Happy” nameThe system of repeated and identical elements of the final logotypeFurther, there were a few concepts on how to finalize the logo. One of them was to add the changing symbols such as simple illustrations of the family activities. Other were the explorations of the full name—HappyX vs. Happy Us.Logo variationsHappyX was selected as the final name.The final logo brings a solid Happy part while X or -ex, has cutouts. Overall, each shape follows the same rounding proportionally.Final logoApp iconThere are multiple approaches to designing the app icon. One of them is to follow the rule—the more simple design, the better result. This is what HappyX icon variations represent.The main question was which letter to choose as the symbol—whether the first H or the last X.X was chosen as it represents ex-partners—the core audience of the service.1. Variations with H app icon 2. Final HappyX app iconApp designDuring the first iteration, the idea was to create a design with large, bright shapes following the white neutral background. This way, we find a balance between a children-oriented, fun mood and a more solid, adult part.1. Home screen 2. Calendar 3. Partner offersWhen it comes to the Wallet part, the idea was to showcase the user’s expenses vs. group expenses. Further, the functionality was expanded.Financial reports in Wallet and Chat screensWalletThe updated designs divide Wallet into 3 chapters: balance, expenses, and transfers.Balance has a clear total sum showing how much you and your partner owe.Expenses are a list of all expenses you and your partner have made.Transfers between you and your partner are the third chapter.Two versions of the Wallet chapterThis way it was achieved more clear UX which is proven by users’ feedback such as:“ My partner earn more than me, the splitting expense function brought more equality and transparency to our separation " — Anna JohnssonCalendarThe main update in this part is about focusing attention on the selected day. The selected day is one of the contrast elements on the screen (together with the floating button but the last one is at the bottom). Thus, this is the first element to focus on.Also, there’s a visual difference between events made with the help of a small colorful line.Two versions of the Calendar chapterUser’s feedback:“ The calendar has helped me and my partner determine which one of us gets the kids during the holidays, special occasions or whenever.”—Noa GustafssonThe core navigationThe first concept had the idea there could be a few groups the user is part of. Not only a group with your ex-partner and a child but also some groups based on interests. Thus, there was a dedicated page for one group.In the updated version the app got only one group and it has changed the UX flow. Chapters are in the tab bar while chat is always at the nav bar. The home screen is showing brief info on the latest updates such as events, expenses, and partner offers.Comparison of the navigation versionsConclusionWhen the first version was under development, the testing of the app began to show which flows could be updated. Working on the second iteration there was received more feedback from the team.The updated designs became cleaner while still keeping the bright side. The updated navigation has the main chapters always reachable.The general tone of voice became more minimalistic and functional following the Swedish market orientation. Received users’ feedback also confirms it was the right direction to evolve.The main chapters of the updated versionFind the full HappyX app & brand identity case study on BehanceFollow me on Dribbble, Behance, Instagram, TwitterRead my previous articles:Case Study: Public Outreach Logo & BrandingPlayful UI Runs the WorldOh Mamma, I’m in love with GradientCase Study: HappyX app & brand identity was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.