you see designers who seem to dominate the ux UI design world creating stunning apps and websites that attract thousands of likes and admiration it feels like they have a special talent for Designing things their users instantly love right the truth is you just don't know what they know no one has shown you the cheat codes the secrets that the top 1% of designers know but you don't however everything is about to change today you're going to level up you will learn a few powerful UI design tips through practical real life examples that will show you
how to design and think like a senior uxui designer it's time to go from a junior or beginner uxui designer and join the top 1% of designers so if you're ready to take your design game to the next level keep watching all right here's the scenario imagine you're designing a sleep tracking app your goal is to collect daily data on how many hours to use her let's call her Emily slept last night you also want to assign a quality rating such as great good neutral poor or bad based on the number of hours to help
Emily understand how her sleep duration relates to Sleep Quality sounds simple enough right let's look at how a typical Junior designer might approach this but here's the kind of design you might see from someone just starting out clean straightforward navigation check big title at the top that says how long would you say you slept yesterday check below that we've got five options Emily can choose from ranging from great to bad each linked to a specific number of sleep hours these selections are made with radio buttons and the selected state is highlighted in the app's primary
color now at first glance you might be thinking hey this works and sure it's it does the job it's functional it's clean and the design is easy to follow but hold on let's think about it is this the kind of app that's going to Delight Emily and keep her engaged every single day does it make her feel something or is it just another simple data entry task does this design accurately represent the goal of helping Emily understand how her sleep duration affects her overall quality of rest I think we know the answer to that now
let's take a look at how a slightly more experienced designer would approach this design how about something like this this already looks much better right let's understand why first let's talk about the title we've made two important changes here personalization we added hi Emily to personalize The Experience people respond more positively when they feel recognized and even something as simple as using their name can enhance engagement clarity and simplicity we revised the title to how long did you sleep last night users prefer language that is conversational and easy to process and this phrasing feels natural
reducing friction in the interaction now let's talk about how we reorganized the layout in the previous version the state labels great good and bad were more prominent than the actual hours slept but here we've shifted the emphasis to the hours this follows the principle of visual hierarchy where the most critical information the hours is given more prominence the state labels still provide useful feedback but they are secondary this ensures that users focus on inputting the correct number of hours first before reflecting on the quality the radio buttons are now placed on the left side this
aligns with the F pattern in natural reading order which users are accustomed to by placing the interaction controls on the left we ensure use can quickly and intuitively make their selection without unnecessary eye movement or cognitive load we've added emojis next to each sleep option to make the experience more fun and relatable instead of just numbers and words the Emojis bring a bit of personality to the app making it easier for users to connect emotionally with their choices the Emojis also visually reinforce the idea that more sleep leads to better outcomes for example a happy
Emoji is tied to longer sleep while an upset Emoji is linked to Shorter durations this makes it easy for users to instantly understand what each option represents encouraging healthier sleep habits in a way that feels natural and engaging we've also made the selected State much more distinct by changing the text color and making the Emoji larger for the selected option we're adding system feedback good feedback lets users know their input has been registered and provides a satisfying resp responsive interaction all right this design was a step up from the first one but we're not done
yet let's take it to the next level and create an interface that feels not only functional but also fun and intuitive to interact with how about something like this instead of a basic list we now have a curved slider that makes the experience more fun and engaging it feels less like filling out a form and more like a journey letting Emily slide through her options in a natural satisfying way Emily can swipe between sleep options making the experience more intuitive and satisfying than clicking a button swiping feels natural on mobile devices making the interaction smoother
and more mobile friendly the selected option is now entered and enlarged making it clear which sleep duration Emily has chosen the size contrast guides her Focus reducing confusion the large emoji and bold text give immediate feedback is this the only other option no it's not let's look at something different to make it feel even more personal for Emily what about this design in this version the selected state is now front and center right in the middle making it the most prominent part of the screen this isn't just a small detail it's an essential part of
the design when Emily selects an option it's highlighted visually with the larger emoji that gives immediate feedback the Emoji in the middle not only shills Emily selection but it also reinforces her choice with positive feedback whether her sleep was good or something else this centralized feedback combined with encouraging text like your sleep was good aimed for 8 hours for the best rest makes the experience more motivational and informative for Emily as Emily selects different options both the Emoji and the feedback change dynamically this adds an element of fun and personalization the app isn't just collect
data it's giving realtime responses that help Emily understand her sleep patterns better now let me show you one more option for Designing this experience in this design the selected Emoji stays right in the middle giving Emily immediate visual feedback about how well she slept but this time we've taken it up a notch by adding a slider below the Emoji making the experience more interactive for Emily as Emily slides through the Sleep durations the Emoji and feedback text dynamically change in real time creating a more engaging experience for instance here she can see that she slept
2 hours more than the night before which adds a layer of personalization and helps Emily feel more connected to her progress this type of interaction brings Emily closer to her sleep data making it feel more like a personal Journey rather than just a task compare this to the previous design I think this version takes interaction to the next level now I want to make this video a bit more interactive for you too pause the video and tell me in the comments which design I designed you like the most and add a reason why do you
prefer option A for its clean and simple design is option b more your style with its Dynamic swipeable interaction maybe you like option C for its Emoji selection and encouraging feedback or does option D stand out with its interactive slider and sleep comparison I'm really curious to hear which one stands out to you and why write it in the comments I've got even more tips for you in this video but as you've seen so far even small tweaks can turn a good design into a great one the reality is becoming a great designer takes years
of learning and even then you might still be missing some key elements to consistently create beautiful designs that's exactly why we created the UI ux Playbook a comprehensive guide packed with over 100 actionable tips principles and strategies that can take your designs to the next level and save you many years of frustration and failures The Playbook has received five-star reviews from more than 10,000 people who have already downloaded the free preview or grab the full version don't miss out on this opportunity to learn how to create beautiful designs yourself just click the link in the
description to get your copy and if you stay until the end I'll give you a special gift now let's shift gears and take a look at the world of Finance picture something like this you've designed a stunning banking app with a clean modern interface that users love imagine the possibilities when your app not only looks great but also offers a seamless user experience you can find the full tutorial for creating this beautiful banking app design including the source files in our ux UI design Mastery course now imagine you need to design payment experience a flow
where users can easily transfer money to their friends Michaela Jenny and Rachel so let's get back to our home on our mobile app and click on at the bottom to go to the transfer screen to see how an average Junior designer would design it we have a basic layout with two buttons and redundant text it's a simple design that you can say in a way works but let's see how a more senior designer would design this experience this is much better now let's compare this to a design from a junior designer instead of cluttering the
screen with unnecessary text or multiple options we've used the space more efficiently we added a recent recipient section along with the search bar by doing this we eliminated the need for a separate choose from history button and streamlined it to just one clear call to action this design Choice does a few key things it lets users see people they've recently transferred money to making the process faster and more intuitive it reduces interaction cost a key the UI design principle you'll learn about in our UI ux Playbook every unnecessary action you remove from the process improves
the user experience this senior level design not only looks cleaner but it also leverages important ux principles to create a more seamless and userfriendly experience so let's dive deeper into the transaction process now imagine your app supports transferring funds in different currencies here's how a junior designer might approach design of the transfer screen there are two separate Fields one for selecting the currency and another for entering the transfer amount this layout works and technically it gets the job done but it's not optimized for the user's experience now let's see how I would improve this what
about this this instantly feels better first you need to think from the users's perspective what's the most important task they want to complete entering the transfer amount so I've made this the focus of the screen making it larger and more prominent to immediately draw the user's attention on the other hand selecting the currency is a secondary action the currency selector is tucked neatly into the corner of the amount input field making it available but not distracting this assumes the user will most likely transfer money in the same currency most of the time so the emphasis
remains on the amount this minimizes distractions and keeps the interface Focus focused on the task at hand now let's take it a step further and enhance the user experience even more how would you do that I would do it by giving users a clear visual cue of who they're sending money to incorporating a profile photo or even just an icon next to the recipient's name an account number does more than just personalize the transaction it Taps into the principle of recognition over recall instead of having to remember specific details like account numbers users can quickly
recognize familiar faces or icons making the process more intuitive and reliable this subtle addition helps users feel confident that they're sending money to the right person reducing the risk of accidental transfers now we can take this a step further by adding your new balance section directly after the transfer amount this addition gives users instant feedback on how the transaction will affect their account balance so not only does it allow them to see their current balance but it also shows what their New Balance will be after the transaction is complete this improves transparency and helps users
feel more in control of their finances minimizing any surprises after sending money sadly you will find that many banking apps miss this feature now let's imagine the user has multiple accounts perhaps a business account a personal account or even a joint account in this scenario it's important to clearly show which account the payment is coming from to avoid any confusion we can Implement a simple yet effective solution displaying both the sender account and the recipient's account prominently during the transaction this ensures the user knows exactly which account will be deducted whether it's their personal business
or joint account by doing this we give the user a clear overview of their accounts and reduce the chance of Errors they can easily switch between accounts before finalizing the transaction making the process both intuitive and flexible you can really see the big difference in how a Junior and senior designer would approach the same experience as a senior uxui designer Your Role goes beyond just creating visually appealing designs you have a deep understanding of your target audience their needs frustrations and motivations you step into their shoes considering the environment and context in which they'll use
your product by doing this you don't just design interfaces you craft intuitive user centered experiences that solve real problems and make interaction seamless now let's move on to the final tip offer selection instead of manual input imagine your designing an onboarding screen for your product and you want to ask the user for their job title here's how an average designer might handle this this design has a text field where the user has to manually type in their answer while it gets the job done it's not the best approach why because it requires more effort from
the user and introduces the possibility of tyos inconsistent responses or frustration with thinking of the right title now let's see how a senior uxui designer would handle this instead of a manual input field I would add a selection of the most common job titles users can simply tap their role making the process faster and easier I also brought in some personality by incorporating icons next to each option for those whose job title wasn't listed we included another option allowing them to either input their own title or select it as a general option when designing you
can play with different layouts to add more visual appeal But ultimately you always have to prioritize the user experience we put a lot of effort into creating this video and it would mean the world to us if you could support it by sharing or leaving a comment and because you you stayed until the end I have a special offer for you use code awesome 50 to get 50% off on either our Playbook or the design Mastery course thank you for watching and I wish you a beautiful day
