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

Top 10 Chat & Call Product Design Inspiration Ideas

Ten great design inspiration for mobile applications (UX/UI Design).https://dribbble.com/manojrajputhttps://dribbble.com/mattwojtashttps://dribbble.com/arinasddhttps://dribbble.com/mickaeldllhttps://dribbble.com/AlexBenderhttps://dribbble.com/mickaeldllhttps://dribbble.com/kubazelichowskihttps://dribbble.com/budiartirohmanhttps://dribbble.com/shojolislamhttps://dribbble.com/tannazsadeghiTop 10 Chat & Call Product Design Inspiration Ideas was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

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.

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.

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

Case Study: Redesigning SportsYapp Mobile app.

Product designImproving the user experience of a sports app that connects Sports fans all over the worldDURATION5 WeeksROLEUser ResearchUX & UI DesignStyle guide & UI componentsInteractive prototypeTools Used:FigmaProtopieMiroOverviewSportsYapp Mobile is an app built to provide a personalized sports experience curated exclusively for sports fans while creating a game-like atmosphere that keeps the user not only engaged but addicted to the surreal feeling of being a part of a “Game Day”. SportsYapp’s vision is to connect and engage sports fans all around the world.My client comes from the sports reporting industry and she has a sole vision of providing a social platform for sports fans to share their support and energy wherever they may be.The ChallengeThe old application wasn’t getting enough engagement. The actual focus for this project was to make the app fun and engaging, make interaction with other sports fans easier, and introduce features to drive more engagement.The GoalThe goal was to redesign the existing app to improve the fan’s overall experience, create an aesthetically pleasing UI, and include additional features to provide more value to its users. These additional features are;Game audio-chat rooms; Think clubhouse/Twitter spaces but for sports/games as they happen!Game prediction; Users get to predict winning teams and scores for games before it starts and before it ends.Match feature; Just like in dating applications, the app matches two users who have the same location follow/support the same teams and games.Direct messaging; This means users can now have conversations with each other on the platform.Coin incentive system; Here users receive coin incentives when they like, comment, post shots, predict games, etc and when their coin gets to a certain amount, they receive rewards.The ProcessCompetitive AnalysisCompetitive analysis explores the companies in a given sector or market niche competing with a potential product or services for market share. Usually, it helps in understanding what competitors are doing right, their strength, their lapses, and weakness, but most importantly a way to improve a product to achieve a competitive advantage for both the business and customers. I carried out an analysis that carefully compares different sports applications that are similar to what I intend to design and equally analysed the business features and requirements intended for SportsYapp, to see how this research can help in improving the experience for the users. Some of the apps I looked into include;FancredYahoo SportsBallparkStats24ESPN, etcAlthough these platforms share similarities in terms of functionality, they still differ in a lot of ways. One major difference is that they don’t provide a way to directly match with or start a conversation with other sports fans who follow the same teams or are in the same location as you.User ResearchKicking it offSince I’m not so much into sports, I started out doing desk research, reading articles, and watching videos to get a better sense of how sports apps work, to gain every possible knowledge required to design the best experience for my target audience.Going further, I had meetings with the client. We brainstormed and assessed the existing product, and discussed additional features we would have and how they would work. In all these, I noted my clients’ biggest concern was that the app wasn’t engaging enough given its low user engagement rate. Using this issue as a starting point in research I performed a heuristic evaluation based on Nielsen’s heuristics to detect usability issues that may occur when users interact and identify ways to resolve them. This helped with a lot of valuable insights and ideas used to narrow down a roadmap.The UX phase began with getting to know the users and their behaviours and the research goal was aimed at getting a clear idea of the problem as it directly affects the users, and to uncover their needs and frustrations to better understand how to create a better experience for them.To understand where the problem was coming from and to know the areas to improve, I had to conduct some research with my target audience. I created a survey form and shared it with sports fans and some sportsYapp users. Had a virtual interview with about 3 sports fans to understand their thought process while using the app. I also observed my behavior and the frustrations I encountered on the app.For my quantitative research, I created a survey form tailored specifically for my target audience to know their views and experience with using the mobile application and other similar applications and to know their pain points and improvement suggestions. And for my qualitative research, I interviewed 3 sports fans. Some of the questions I asked in the survey are as follows;What their preferred sports app was?Why they prefer it?What challenges they were facing and what improvements they wish the app could provide?Asked them about the issues they may have encountered with recent sports apps over the past year.Asked them to identify issues with the existing sportsYapp mobile application and a lot moreAnd during the interviews, I walked my users through the app and tried to figure out what they couldn’t do right, where they got stuck or had issues in the app. This was done to;To gather unbiased user opinionsTo find issues with complex flowsTo get the insights to help create a better overall user experienceSome screenshots from the user survey formFrom the feedback, some key challenges were identified.Survey form screenshotUser PersonasTo support my thought process and to ensure that I don’t create a biased solution, I used the qualitative data gathered during the research process to create two personas that would serve as a guide for me to keep the design process user-centered since they had varying goals and needs, and to make better design decisions.Some fans were very dedicated to their supporting team and wanted to be as engaged as possible, while other fans are not as extreme and sometimes prioritized community connections more.Going through their feedback from the research, I figured the importance of allowing fans to have multiple access points and incentives for posting shots. After ascertaining user pain points, I started working on possible solutions for the app flow and an aesthetically pleasing UI.Wireframes and IterationsWhen I started approaching the design problem, I sketched out some options of how I could improve the existing design and resolve the above-mentioned problems. I got to iterate on what would work and what wouldn’t and then I converted my sketch to Mid-fidelity wireframes, this made the visual design process easier and faster.Wireframe iterationsUnderstanding game-day experiencesThe next step taken to better understand our users was to understand how their game-day experience works.Since this app focuses on game-day interactions, I needed to consider how to enhance the experience for onsite fans' and bring the live-action closer for offsite fans.Gameday flow for the old design and redesignLet’s look at the problems discovered!A crucial step I took for the redesign was to audit the Old design to figure what’s working and not working. The idea wasn’t to renovate the design entirely, the idea was to improve on the existing design with an introduction to new features. I placed this step after user research because I wanted to re-evaluate the features with the business goal and user needs in mind.Based on the insights, I noticed the app's core goal, which is bringing fans closer to each other on game day, wasn’t engaging enough. Fans only get to follow each other and view posts of each other but they don’t directly interact, there’s no group or forum for fans to connect with each other. so I can say it’s not serving the purpose of the core goal. Before the redesign, the only interaction between fans is on game days when they get to take photos and video shots of the game to post on the virtual field of the game for other fans to see.Onboarding/sign upProblem: The problems discovered are gotten From my personal experience as a product designer and research insights from sports fans and other users; the problems and their solutions are explained below:There is no onboarding flow to introduce new users to this app and its features.Lack of visual consistency in the buttons makes it harder for people to verify the authenticity of your communications, making them less likely to convert. Lack of visual consistency looks careless and unprofessional and tends to have a negative impact on users.Onboarding/sign up screensSolution:Designed an onboarding using the combination and progressive onboarding approach to help the user ease into the app’s experience. Instead of bombarding them with everything at the start, provided users with just enough information to keep things moving; This approach ensures that the user is enlightened and knows what to expect at every point.Maintained consistency across the onboarding and sign-up.Bottom navProblem:The old bottom nav isn’t so effective because people find it difficult to post. Here, for a user to post a shot, they have to go into the “game day’’ of a game which makes it harder for them. First-time users find it difficult to figure out how to post and where to post from.Since there weren’t a lot of features, the bottom nav contained less.Solution:Made the home, discover, game rooms, Chat & profile pages accessible from the bottom navigation.Clearly understanding that navigation is generally the vehicle that takes users where they want to go, tailored my navigation to help them get there faster by adding a Floating Action Button for the most important user action on this app which is “posting shots”.Home pageOld home pageProblem:Visually, the interface doesn’t look great, starting from the hierarchy, contents, structure, etc.The home page takes up so much space just to show the games leaving other interactive parts of the app out of the picture.There are no quick links to make it easier for a user to perform primary actions once they get on board.The sports Icons without a text to them make a user think twice before choosing a game and confuses some users who are only familiar with the name of the sports.Home page redesignSolution:Added a Floating Action Button in the bottom nav for users to be able to easily post shots.A search icon for users to easily make quick searchesAdded the name of the sports to each sports icon for easier identification so a user doesn’t have to think twice to select a sport they like with reference to Steve Krug’s book Don’t make me think.A date picker was added so a user can still find games according to date.Since we’re trying to drive more engagement, we included a points rewarding system and it works in a very simple manner. Users get to earn coins when they actively engage and post shots. So their coin wallet which sums up the total coins they have earned over time appears on their home page.Users can also start their predictions right from their home page.Most Important actions were included on the home page to make it easier for a user to access a lot more.Discovery pageProblem:The discovery page doesn’t do enough discovery for the user, because here you’re discovering games and only games.The discovery page lacks consistency, consists of different cards for games, which is also different from the card for games on the homepage. This leaves the user thinking if they’re all the same game.Discovery page redesignSolution:Users can discover games from both teams they follow and teams their friends follow. This is because some users like to see what other people are doing, finding games their friends are following enlightens them, and that enlightenment is needed to keep them engaged.Users now get to discover prediction analysis for games; this is to help motivate them to predict games.Users can now discover their matches and new teams to follow; This is to enable them to connect with more people on the platform and follow more teams to see more games.Made all the game cards consistent across all pages. This helps constantly prove a user’s assumptions about the user interface right, creating a sense of control, familiarity, and reliability.Search PageProblem:There are no filters and sorting options to facilitate the search for a user even a quite well-crafted search query may not be enough as it will bring out too many options in search results.The bottom nav in the search bar can be quite confusing for a user because it is not required for a search that works like a modal.Solution:I provided tabs for sorting so users don’t have to leave the search results page while switching between preferences. In this case, filters would support the interaction flow and allow users to tune their search better.Removed the bottom nav since it isn’t required in the search process.Profile PageOld profile designProblem:The input fields on the edit profile page looks confusing and has a short input field. The length of an input field should be in proportion to the amount of information expected in the field. The size of the field acts as a visual constraint for the user.The input field on the edit profile page doesn’t look like an input field and is likely to confuse a user. Google quietly changed its material design text fields in 2017 after discovering many users didn’t know they could interact with this type of input.The horizontal scroll that shows the team name on the profile only works for a limited number of teams, wouldn’t work well if a user follows over 5 or more teams.There’s no way for a user to know the total number of shots they have posted over time and they can’t also see the total number of shots posted by others.Profile and edit profile page redesignSolution:Put the labels above the fields to improve the way users scan the form. Using eye-tracking technology for this, Google showed that users need fewer fixations, less fixation time, and fewer saccades before submitting a form.Used the top-aligned labels because they provide more space for labels. Made them large enough to display the user’s entire input.Removed the horizontal scroll that shows the team name since it wouldn’t work for a large number of teams.Added a way for a user to see their total number of shots over time and the total number of shots posted by others.The Chat featureSince we’re trying to drive more engagement, we included a direct messaging system that allows a fan to directly message another fan. Now Fans (Users) do not only have an option of following an individual they like, but they can also connect directly with them.Just as they do it in dating apps, they also get matched with users who share the same locations, interests and follow the same teams as them.Audio-Chat featureThis is one interesting part users seem to love the most. An audio-based chatroom where sportsfans can have both audio-chat and text-chat. How does it work?Game room for a single gameAudio-chat room for speakersPretty similar to clubhouse/twitter spaces; users get to create and join rooms. Each game has only a single room, this means if a room has already been created for a game, you can only join and request to speak and if it hasn’t been created, you can create it.Users can navigate between text and audio. Sounds fun, yeah?This is another interesting feature. In betting shops, people predict games and either win/lose. While some other people just want to see the prediction of others and from there, they would know which team has a better chance (But the truth remains, higher winning prediction doesn’t guarantee actual winning).Users who predict, receive coin incentives which are automatically added to their coin wallet. How they get rewarded?They are required to gain a certain amount of coins, after which they stand a chance to win free game tickets, team merchandise, gift cards, etc.I could also call this app, social media for sports fans and game lovers.Learnings and Key TakeawaysWorking on this product was a great opportunity for me to dive deeper into Information Architecture, user research, and visual design. I look forward to implementing and testing this design as with any project, testing is essential.Learning :In-depth analysis of the design decisions is really vital to make sure you’re fulfilling your user's needs through empathy.I got to understand the common UI and UX paradigms.Small changes in design can make a huge impact on the whole user experience.I worked on a lot of iterations to arrive at the right solution. During this process, I realised that there’s nothing like too many iterations because the more you iterate the more chances of the best solution.While working on design solutions for this problem, I came across some micro-challenges, which made the whole project even more interesting. I learned how to resolve those challenges without compromising on the major design solution.Hello, I’m Omah and I create exceptional experiences that align your business strategy with your customers’ needs. I am a curious person who loves to contemplate the design of life and everyday things. I plan to keep articulating my experience and thoughts here on medium. I am always open to feedback and discussions. . . If you’d like to reach out, follow me on Twitter to have a chat. You can also check out more of my work on LinkedIn Behance❤️ Thanks for reading!If you liked reading this article, you may also like my other case study Redesigning GT bank mobile appCase Study: Redesigning SportsYapp Mobile app. 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.

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.

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.

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

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.

How to Reuse Your Favorite TV Series for UX Storytelling

I often struggle with the storytelling component of working on a fictional product or service. The challenge is not just avoiding overuse of ‘Lorem Ipsum’ or ‘Title 1’, but the actual meaningful purpose behind drafting a new app concept or user story.Keeping in mind a user-centric approach, I started designing apps for TV show characters — trying to solve their problems within their themes.What if…Fleabag had a dating app? What if…the team from Pied Piper could actually get their $#!t together in a project management platform?The stories and characters are already familiar to us — the compassion is already there, which makes it much easier to craft a design concept around a story my audience already loves or understands (and yes, they are also incredibly fun to design).Medical App Dashboard for ‘Homecoming’To practice designing dashboard interfaces I chose the tense and amazing ‘Homecoming’ series on Amazon. It became the inspiration for a medical tablet dashboard outlining the plot of the first season. It provided me with a story progression, user personas, and even quotes.E-commerce for ‘Tales from the Loop’I really enjoyed the ‘Tales from the Loop’ si-fi series, which came out in April 2020 also on Amazon Prime. The unique aesthetics of the show were inspired by the beautiful illustrations of Swedish artist Simon Stålenhag.From multiple storylines happening in an unknown era, I extracted the concept of an eBay-like E-Commerce platform where the users could buy and sell the robots produced in “The Loop”.Dating App for ‘Fleabag’British tragicomedy ‘Fleabag’ released in 2016–2019 and practically screamed at me to become a dark theme dating app. The show has given its audience a great collection of jokes, memes, and fan content, which happen to be very handy for chat screens!Project / Team Management App for ‘Silicon Valley’‘Silicon Valley’ on HBO is the story of a computer programmer building and developing a startup called Pied Piper. The show outlined several project and task management workflows between the company’s team members and inspired me to build a web browser app.Neomorphic UI App for Stargate AtlantisThis one is for all my super-nerds out there — Neomorphic UI is one of the trends of 2020, and I think it’s most applicable to a sci-fi feel.…So I designed a couple of screens for my guilty pleasure…a TV show from 2004–2009 called ‘Stargate Atlantis’ — trust me guys, if the threat of life-sucking aliens inspires you to stream 5 whole seasons then this is “can’t miss TV”!Since the vast majority of real UX projects are under NDA (non-disclosure agreement), recruiters and hiring managers often look for case studies to evaluate the design process skills of a UX job candidate.Inevitably, many designers make mock-projects as a creative challenge — so I thought…why not have some fun?See more examples on my Dribbble accountHow to Reuse Your Favorite TV Series for UX Storytelling 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