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.

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.

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.

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.

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.

Website Inspiration: Telegram stickers for developers

Fun Landing Page with a (fittingly) conversational approach promoting a cheeky Telegram sticker pack for developers by Evrone. Full Review

UX case study — BBC NEWS app android

UX case study — BBC NEWS app androidRecently I was searching for a news app which could pull news from around the globe. After stumbling upon BBC news app, which has over 10,000,000 downloads on play store. I thought, an app with this massive following should reward its users with a rich user-experience but BBC news app in its current state is strung together by some good ideas but heroically falls through on execution of these ideas.Problem and hypothesisReviewing other BBC apps in an attempt to understand the brand ideology and content representation across different platform, I found inconsistencies between their applications which is mostly caused due to conflicts in design guidelines provided by different organisations.I Hypothesised that by changing the user navigation flow and striking a middle ground for design standards, will give developers less headache while developing application while providing a more optimised and rewarding experience for the users.BBC android app.PersonaMy goal was to persuade a new user to use the app and turn him into a regular user. I envisioned a user persona who can be a potential user but avoided a specific user who will be a perfect candidate for their app or one who can be considered their core user.Job Story & ScenarioMy decision to choose job story over the user story was that user story has too many assumptions and doesn’t acknowledge causality. When a task is put in the format of a user story ( As a [type of user], I want [some action], so that [outcome] ) there’s no room to ask ‘why’ — you’re essentially locked into a particular sequence with no context. In contrast, Job story provides as much context as possible and focus on motivation instead of just implementation.framing design problem in a Job, focusing on the triggering event or situation, the motivation and goal, and the intended outcome.Guerrilla Usability TestingFor solidifying my hypothesis and to gather more data on the app from a user perspective. A small test group was given instructions to use the app for a span of three weeks. After three weeks I collected their verdict and overall experience. After analysing the data I found some interesting insight, Most of the users forgot to use the app after a while and didn’t feel motivated to use the app. The poorly executed navigation system was the major reason that the users felt lost and eventually lead to abandoning the app entirely.Identifying and Prioritising Pain PointsFor producing an optimal flow, I had to study and point out what is the pain point in the app. For finding pain points and organising the feedback in one place to get a view for the analysis of all data in one place I utilised affinity mapping.affinity mappingI collected data from the test group and my personal notes in the yellow sticky notes. All the feedback is gathered and arranged in the crude sections which make abstract sections/feature of the app. Blue notes represent a clear idea from all the input received from yellow notes. It helps to make note of all the useful feedback and combine it into smaller chunks for later inspection as we go from the bottom-up process. Each hierarchy represents a clear idea for the development of the feature in understanding the user needs and goal for the app set by the company. Doing this activity helped me to sort through all the comments to get a clear view of what is important for the user while satisfying business goals.Prototype and validationAfter getting a fair idea of what elements should be improved or gotten rid of completely. With help of affinity mapping, I was able to stay on track while experimenting with user flows and improving current UI design elements to fit standards proposed by Apple and Google. I took feedback on the design from my peers and tried to integrate their feedback in the design.1. finalising general layout and navigation bat .2.prototype for the index. 3. variation for stories.4. wire-framing different layout. 5. testing layout for article sectionAfter spending time with wire-framing, I moved to work on sketch to test the idea with much more fidelity. After getting an idea of the app will look in the static images I started to design HI-FI prototype in Invison.you can see and interact with the prototype here.Implementation#1 HomepageCurrent app does a poor job of delivering the content in an intuitive way. It depends on app bar for its navigation, using an app bar for navigation seems clunky and stale. It gets messy very quickly as you have to sort through myriad tabs to reach the desired topic.‘Home’ has to be the home screen of the app so it had to be welcoming and informative. To fulfil that goal I cleaned the UI and made changes to how categories are organised on the home screen, in original design spacing between the article were too tight as it resulted in an unpleasant experience where the user feels confined. Instead of just increasing the spacing, I opted for changing the layout. The Most popular article from each topic has the prominent exhibition in the section of that topic, thus headline of each section draws more attention. Each article has been marked with a tag from where the story belongs. The thumbnail of the story has a band beneath it to indicate its tag by colour. These colour tags are used in the BBC website to distinguish all the content quickly.#1.5 StoriesThe story is the distinguishing feature of the BBC app, But it was hard to locate in the original design. It just needed to be in the spotlight. To fulfil the requirement I put the story on the top section from where every user can see it in the prime spot. It could become a quick way to consume news as it is video-based content delivery in a short period of time. Having an indicator which notifies the user of new stories to make the stories more central element of the app and set apart it from its competition.#2 Navigation barAs I wanted a cohesion between android and Ios version of the app, Navigation should feel same and intuitive rather than just scrolling through tabs. Using a nav bar is the logical solution, as both apple and google support it in their guidelines. Removing the app bar navigation allowed me to allocate more space to the main activity. The navigation bar is divided in 5 section Home | My feed | saved | video | LIVE . Each section is the main feature of the app and now it is in front and centre of the app always at the user’s fingertips.#3 New navigation flowThe user still has to traverse through a myriad of topics, making navigation a painful and tiresome process. I resolved it by implementing a new system for navigation called ‘Index’. In ‘Home’ and ‘My feed‘ there is a line on the right edge of the screen. The index acts as a signifier instead of being an affordance for the user which can be triggered by tapping on it. The user will be carried to an index page where he could rifle through topics which are arranged in a linear manner. the index page gives an alternative, instead of scrolling in the home screen to get to a topic he can achieve the same result in less time. There is an indication on the left side to apprise the user of how many new articles had been affixed to the topics since the last session. The index is a more practical way to access the topics without cluttering the main screen with tabs.#4 My feedSetting up my feed was a very tedious task in the original design. My feed is a great feature of the app, I modified the interface which can bring some colour and playfulness to this screen but won’t distract the user. As you select the topics it provides more relative topics.In Old design traversing through tabs took longer than it needed, every choice that you have selected from my feed will be added to the main navigation. After a while main navigation feels like a dumping ground, I start to lose its purpose.The user gets confused and lost his way around the app quickly which cause the user to select few choices in order to keep the navigation clean.To overcome this obstacle, in my new design ‘My feed’ is similar to the home but has curated content where the home was meant to be more of a general place, My feed has the much tighter layout and packs more topics than home. It has a simple layout without making it difficult for the user to navigate to their favourite topics quickly using Index which is separate from the ‘Home’ section topics.Now there is a clear distinction between the two section and navigation for the two section.#5 Reading an articleReading an article is the most important thing in a news app. I chose a layout which will conserve the integrity of reading. The font weight is varied from the title to the main body to demonstrate different heading. Accessibility features are placed in the app bar for ease of reach. Share and save is led at bottom of the cover image which is most used feature while reading the article.SummaryJust by changing the layout and cleaning up the design to new standards of material design, makes the app more approachable and put the content that matter to the user and business to front-line without compromising anyone’s goals. The new navigation system can be a time saver when the user wants to reach to a topic very quickly. The changes made to the ‘My Feed’ are substantial and encourage the user to interact with it. After getting feedback from the same test group. They were impressed by the improvement in the experience from the proposed design for the BBC app.UX case study — BBC NEWS app android 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.

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.