POV: Just finished a real UX research and UI design project (FULL BREAKDOWN)

Поділитися
Вставка
  • Опубліковано 16 лис 2024

КОМЕНТАРІ • 120

  • @Mizko
    @Mizko  4 місяці тому +10

    If you enjoyed my process and want to equip yourself with my exact tactics and tools from this video, I'd recommend these products of mine:
    Learn My Real-world End-to-end UX/UI Design Process (NEW! 200+ students)
    👉 www.thedesignership.com/courses/ux-ui-design-course
    Master Figma with my Ultimate Figma Design Masterclass (7,200+ students)
    👉 thedesignership.com/courses/the-ultimate-figma-masterclass
    Practical UX Research & Strategy Masterclass (700+ students)
    👉 thedesignership.com/courses/practical-user-research-strategy-course
    Shipfaster UI - Advanced Figma Design System (3,500+ designers)
    👉 shipfasterui.com
    Happy learning, crushing and winning!
    - M

  • @ericsin5566
    @ericsin5566 4 місяці тому +36

    underrated part of the video: the work done on google docs/sheets to document research, audit, and strategy. most non-designers don't want to use figma or learn it, so learn to meet your stakeholders where they are, get the important information (job stories, current flows, priorities and timelines, etc.) down, THEN go work in Figma.

    • @jeremyfultineer7
      @jeremyfultineer7 4 місяці тому +2

      Exactly, it's helpful to see the aspects of the process that happen before you even open Figma.

  • @patrickrichardson9433
    @patrickrichardson9433 4 місяці тому +37

    I love this walk through! There are so many UX videos out there but nothing where it shows the process. It's like doing a job shadow in high school.

    • @Mizko
      @Mizko  4 місяці тому +3

      Glad you enjoyed it ✌

  • @Mizko
    @Mizko  4 місяці тому +26

    I just want to be clear, every project requires a different approach and process.
    What you see in this video was unique to this project’s requirements and constraints 🫰
    I hope to share more real projects my team and I work on, so you can see all the different tactics we use.

    • @emrahaliyev3876
      @emrahaliyev3876 3 місяці тому +1

      Hi Mizko. I got a question for you. I don't comprehend why you don't create the inputs as a multi-layered component. I've seen the figma file and you had boxed inputs as the base component. Why did you do it this way?

    • @Mizko
      @Mizko  3 місяці тому +1

      @@emrahaliyev3876 Shipfaster UI has 3 styles of inputs. Boxed, outline and lined.
      This makes it easier for all our users to easily switch between them.

    • @emrahaliyev3876
      @emrahaliyev3876 3 місяці тому

      Mizko, I noticed those outlined and lined inputs, but I'm not asking about input types. You can add prefix, suffix, leading & trailing icons to a single input, and turn off unnecessary layers by setting the property to false. I'm just wondering why you don't do this. Is your method more effective? if so I will do the same

    • @Mizko
      @Mizko  3 місяці тому

      @@emrahaliyev3876 Look closer, that's what we do. If you click into Input Container you will see we have all our prefix, suffix and trailing icons etc.
      You can't do it on the parent Input Field because of an old Figma glitch. Nested components don't 're-size'.

    • @hetalpanchal5948
      @hetalpanchal5948 Місяць тому

      Yes Please Mizko. This video is really helpful to understand the project requirements. But please share one video especially on the research. How you are doing research, how you are taking interviews?

  • @kelvinchau9611
    @kelvinchau9611 4 місяці тому +14

    This is what I've been waiting for!! I love how detailed and digestible it is for us to see what one UX process may look like. I really appreciate you and ScreenApp for giving us a walkthrough (:

    • @Mizko
      @Mizko  4 місяці тому +1

      Thanks Kevin! It took quite some work to get the story right. I didn’t want to get too caught up in the detail but didn’t want to be too vague either 😅

  • @micacharise1330
    @micacharise1330 2 місяці тому +1

    This video is exactly what I was looking for!!! Really appreciate how you showed as your process -- how you strategized with stakeholders, what's your quick research process, how you solved the problem, etc. It was like I had am shadowing a mentor in a real project and I could see your thought process behind. Please make more of this stuff! Thank you so much!! 💖💖

  • @allencabo
    @allencabo 4 місяці тому +4

    This was an amazing video to watch! You’re totally right that every project has its own its own approach and constraints, I’m glad you explain that part. Loved seeing one of your real projects end to end.

    • @Mizko
      @Mizko  4 місяці тому +1

      🙌 Yep! Best to learn everything so you can tailor your approach to different needs. Glad you enjoyed it Allen!

  • @MikeAj
    @MikeAj 4 місяці тому +1

    This is exactly what I've been looking for. I did a personal redesign earlier in the year and I'm glad i did some of the processes you took in this. It has given me a little more confidence. I've definitely learned more processes from the video.
    Thanks a lot for this, Mizko. It really means a lot to me.
    Please kindly post more of this, it's absolutely helpful.

  • @talhasajid9034
    @talhasajid9034 4 місяці тому +2

    Man I just Love it! They way you've walked through the whole process is just awesome. I myself use such strategy but doesn't get known enough but man this is some video. Simply outstanding!

  • @robin_designs
    @robin_designs 4 місяці тому +1

    my biggest inspiration in uiux. no lie. you've changed lives.

    • @Mizko
      @Mizko  4 місяці тому +1

      Wow, thank you Robin! Means a lot

  • @srikkanth-tech
    @srikkanth-tech 4 місяці тому +2

    Wonderful walkthrough. This channel needs more love.

    • @Mizko
      @Mizko  4 місяці тому

      Thank you! Leave more comments + like, it'll help the channel grow :)

  • @ivanners
    @ivanners 4 місяці тому +1

    Master Class! this is the kind of videos that needs to be shared. Processes are always a great perspective to learn and iptimize our own design process. 👏🏼

    • @Mizko
      @Mizko  4 місяці тому

      Thank you!!

  • @joydeepchatterjee3218
    @joydeepchatterjee3218 4 місяці тому +1

    Brilliant casestudy @Mizko I appreciate the detailed breakdown you showed in this video. I would like to see more of these or maybe a playlist :)

  • @graciekang655
    @graciekang655 3 місяці тому

    I think your whole process of explaining this video is valuable to learn, especially when presenting our project to someone who is unfamiliar with the project we worked on, such as during portfolio presentations in interviews.

  • @femoskeydev
    @femoskeydev 4 місяці тому +1

    Thanks @mizko. You are my go to for everything UI/UX Design.

    • @Mizko
      @Mizko  4 місяці тому

      Appreciate it!!!

  • @nehaahmed9046
    @nehaahmed9046 4 місяці тому +1

    Your content is gold 🔥
    It is unbelievable that you provide this info for free which contributes so much to the UX community. Thank you so much Michael and your entire team. You are golden 🫰🏼

  • @CausticSalsa
    @CausticSalsa 4 місяці тому

    Thanks so much for making this video! It's super interesting and helpful to see the process as someone who is strongly considering studying UX/UI at university. It'd be really cool to see another video like this on any future project if at all possible. It's nearly impossible to find videos that show the day-to-day.

  • @voncreatives
    @voncreatives 4 місяці тому +1

    You are one of the GOAT in UI/UX in this generation, thank you for this 🔥💯

    • @Mizko
      @Mizko  4 місяці тому

      Thanks Von!! Goat/Ram is actually my Chinese Zodiac spirit animal

  • @ItsJackFrostYo
    @ItsJackFrostYo 4 місяці тому +1

    Hi Mizko! Just want to dop a comment and thank you for this video and your channel overall. Amazing quality content, that has helped me at times in my career. This is a really inspiring piece of work you did. Well done!

  • @Ekhlasslove
    @Ekhlasslove 4 місяці тому +1

    I love your care and passion to every details.. inspired job ❤👏🏻

  • @SkylarHamilton-lg9uy
    @SkylarHamilton-lg9uy 4 місяці тому +1

    Thank you so much! I have learned so much from your process. Simple and effective! Thank you!

  • @gravijax
    @gravijax 18 днів тому

    Excellent overview of your process. Thanks.

  • @robertopatron2132
    @robertopatron2132 4 місяці тому +1

    Man, this is pure gold! 🙌🏽

    • @Mizko
      @Mizko  4 місяці тому

      Glad to hear!

  • @Deiondrick
    @Deiondrick 4 місяці тому +1

    Thank you for this! It has made me feel more comfortable with stepping out on my own as a designer.

    • @Mizko
      @Mizko  4 місяці тому

      You can do it!!

  • @emeraldezy
    @emeraldezy 3 місяці тому

    I loved every part of this video. As a newbie UI/UX Designer, i really want to understand UX more. I dont just want to be a UI/UX Designer, but a strong Product Designer

  • @meganpiller834
    @meganpiller834 4 місяці тому

    This is the first time I will comment on your video, I really love how you break down the process, and I hope we'll see more of this. ❤

  • @lovemelody714
    @lovemelody714 4 місяці тому +1

    Thank you for the amazing content, deep in knowledge and insights 🎉

  • @ahmedfathiiii
    @ahmedfathiiii 4 місяці тому +1

    Thank you very much for this, I benefited a lot from this video, This is what I was looking for

  • @miguelolivares3301
    @miguelolivares3301 4 місяці тому +2

    THIS is content!! Thanks Mizko🎉

    • @Mizko
      @Mizko  4 місяці тому

      🙌

  • @eniolaprice
    @eniolaprice 4 місяці тому +1

    @Mizko; Hello Mizko, you are awesome as usual. If I may, I would like to suggest taking another look at the dashboard structure. I think the "video space" and "timestamp" area is taking up a bit more space, thereby fighting for attention with the core of the product which is the AI chat and transcription function on the right hand. What if you flip the size and make the AI chat segment bigger and more prominent so that the user is prompted to use the AI chat function at first glance. If this makes sense, we could jump on a call if you'd like.
    PS. You are the reason I understand Components, Variants, and Autolayout.

  • @robertkreft5653
    @robertkreft5653 4 місяці тому +1

    This was great to see, thank you!

  • @2405krishna
    @2405krishna 3 місяці тому

    This is just awesome, simply explained

  • @kentddesigner
    @kentddesigner 4 місяці тому +2

    Amazing Breakdown, the UX Audit is my take away... love how you did that on a word file...

    • @Mizko
      @Mizko  4 місяці тому

      🫰 Glad to hear! Haha yeah, I’m never precious with tools. When you’re tight on time, you have to adapt

  • @cindyshen9763
    @cindyshen9763 3 місяці тому

    I love this walk through!

  • @JWCat757
    @JWCat757 4 місяці тому

    Thank you for sharing your process - very helpful!

  • @G-en9mv
    @G-en9mv 4 місяці тому +1

    Great breakdown, thank you! Your team also coded the components or was it on the client side?

  • @Cplum.
    @Cplum. 3 місяці тому

    Hey man, your videos are fantastic alot of these skills apply to all aspects of design. Just hoping you can try to cover mobile design more frequently or at least give a little time here and there to discuss it as you have done previously, there's nobody of your quality covering this on yt is stg! appreciate u g

  • @muhammadyasir-rn7pz
    @muhammadyasir-rn7pz 4 місяці тому +1

    you know the yellow color profile was your identity and it was a unique on youtube black when ever i see yellow first thing came in mind is it mizko's channel.

  • @bright_moses
    @bright_moses 4 місяці тому +1

    This will be the first time i will be commenting on your video, thank you very much for this 💌💖

    • @Mizko
      @Mizko  4 місяці тому

      Thank you so much Moses. It means a lot to see my subbies leave a comment. It tells me that I'm actually making an impact.

  • @Ifeoluwa-Ajetomobi
    @Ifeoluwa-Ajetomobi 3 місяці тому

    Wow, this is awesome, thanks for sharing ❤

  • @ThisDesignLife
    @ThisDesignLife 4 місяці тому +1

    Looking forward to watching this

    • @Mizko
      @Mizko  4 місяці тому

      🙏

  • @saisumithchetpally2460
    @saisumithchetpally2460 4 місяці тому

    Irony is recording screenApp from an external cam instead of screen recording.
    Great video man, thanks for sharing the journey of working on a real project.

    • @Mizko
      @Mizko  4 місяці тому

      Haha! I wanted to keep the vibe more natural as it's a POV video. So no screen recording 😅

  • @jeremygordonstudio
    @jeremygordonstudio 4 місяці тому +2

    Such a great breakdown of the process. I have a question about Shipfaster or any design system like that: How does one utilize components from a system like that in other files and keep everything intact, and what I mean by that is: for example you have a set of colors in Shipfaster UI , but let's say I use that library in my own website that has different colors and different typefaces, is there an easy way to create type and color and style changes to that base design system, or are you supposed to create a duplicate of the components, or how does that basic process work really? I have tried to find out how this works but I guess I'm not even sure how to properly frame the question so I've been struggling with that part.

  • @Bontelucci
    @Bontelucci 4 місяці тому +1

    Loved this Mizko! Thanks for putting it together- definitely one thing that’s missing from so many videos/UX instructions is looking in to real processes on high level/larger projects. Can’t wait for more!!!
    I have your Shipfaster kit and have used it (it’s fabulous!) however have specific questions about implementing it to an existing file and not ending up with an enormous amount of styles that include pre-existing ones. I feel like I am missing something.😅Is it best used for brand new design files? I can also email you :) Thanks again for everything you do!

    • @Mizko
      @Mizko  4 місяці тому

      Thank you!! Glad you enjoyed it. Yes please email me or the team support@thedesignership.com and we can assist!

  • @LuisVeloz13
    @LuisVeloz13 4 місяці тому

    What a great video! 🎉 in some parts of the video I felt like I’m more like a junior and in other parts I felt like a semi senior / senior UX/ui designer haha thank you for the video Mizko!!
    One thing I would like to know, how much time did you spend on this project?
    Thank you again Mizko! 🤙🏼

  • @ianmccallam
    @ianmccallam 4 місяці тому +1

    Great work Mizko 👏 curious...what was the reasoning in changing the UI in the RHS for querying the AI, from what you originally proposed (example prompts + input field at the bottom of the screen) vs the soon to be released version that you showed at the very end - with the query input at the top of the screen / top of the chat? Subjective of course..but the former improved UI (interacting with the chat from the bottom of the screen) seems to feel more natural

  • @SubinSyd
    @SubinSyd 4 місяці тому

    Thank you for sharing this amazing video! I learned a lot from it. By the way, I have a quick question: what software do you use for screen recording? At the 0:55 mark, I noticed your cursor is quite large, which helps focus the audience's attention, and when you click, it changes to a hand cursor.

  • @ekehmodestachioma
    @ekehmodestachioma 2 місяці тому

    I really enjoy your videos. What frame size dd you use for your desktop screens?

  • @abdullahal-shameri3225
    @abdullahal-shameri3225 3 місяці тому

    This video was ammazing @Mizko Thanks a lot ❤ .. I just have one question, how long does a similar project take from you and your team?

  • @Pistomaster
    @Pistomaster Місяць тому

    Your black T-shirt looks absolutely cool! What brand is it? Thank you!!!

  • @raulgaming1000
    @raulgaming1000 2 місяці тому

    more video please i need it

  • @Geriya
    @Geriya 4 місяці тому +1

    Dude what’s the difference loom and screen app? Did you even consider competitor analysis?

  • @JeremyMuradesign
    @JeremyMuradesign 4 місяці тому +1

    Nice bro keep it up

    • @Mizko
      @Mizko  4 місяці тому

      Thanks Jeremy!! 🙏

  • @RedVelocityTV
    @RedVelocityTV 3 місяці тому

    Good explanation but the actual changes are unclear because of phone shaky phone recordings over proper screen recordings

  • @utkarshraj8828
    @utkarshraj8828 3 місяці тому

    Just wondering what was the thought behind to put the input for text for "Ask AI" at the top?

  • @theboringuxer
    @theboringuxer 2 місяці тому

    The hardest part would be trusting the research if your team isn’t the one doing it. Who knows if the sessions were done where the facilitator wasn’t asking leading questions to validate the orgs assumptions rather than try to find the solution that fits the customers needs.
    In the end, the wrong feedback could be costly if the usability sessions were just scripted to get answers you needed rather than what the real user needs.

    • @Mizko
      @Mizko  2 місяці тому +1

      Obviously you make your own judgements here. The insights were valid.
      We’ve seen over 200% increase in upsells and expansions after launching these updates.

  • @otavioalexandre7575
    @otavioalexandre7575 4 місяці тому +1

    amazing

    • @Mizko
      @Mizko  4 місяці тому

      🙏

  • @karthikvenu5415
    @karthikvenu5415 3 місяці тому

    SIR,CAN YOU SUGGEST ANY FREE PLUGINS FOR ILLUSTRAION IN FIGMA

  • @divyv20
    @divyv20 3 місяці тому

    Hey Mizko really nice video ! I was wondering if I could help you with more Quality Editing in your videos and also make a highly engaging Thumbnail and also help you with the overall youtube strategy and growth ! Pls let me know what do you think ?

  • @DanetteKshlerin
    @DanetteKshlerin 2 місяці тому

    Moore Edward Rodriguez Charles Gonzalez Patricia

  • @HousmanRita-b3k
    @HousmanRita-b3k 2 місяці тому

    Lewis Patricia Martinez Susan Davis Paul

  • @EdmundPenny-g9w
    @EdmundPenny-g9w 2 місяці тому

    Clark Paul Martinez Donna Thompson Patricia

  • @mustafajamal2642
    @mustafajamal2642 3 місяці тому

    Hey Mizko, I just emailed you my student ID regarding the student discount I could get for the course bundle (UX research and Figma masterclass). I haven't received any response yet, so I thought I'd let you know over here on youtube. Hope to get a response soon, Thanks

  • @VivianGarza-g3k
    @VivianGarza-g3k 2 місяці тому

    Miller Patricia Wilson Melissa Lopez Paul

  • @СергейСаянов-й8в
    @СергейСаянов-й8в 2 місяці тому

    Harris Ronald Lee Mark Garcia Sharon

  • @PepysFlora-t8p
    @PepysFlora-t8p 2 місяці тому

    Jones Timothy Anderson Steven Thomas Christopher

  • @RolandWebster-l1u
    @RolandWebster-l1u 2 місяці тому

    Lewis Steven Harris Eric Thompson Brian

  • @PedroBaker-b5d
    @PedroBaker-b5d 2 місяці тому

    Garcia Nancy Moore Christopher Young Robert

  • @SusiePerez-d7o
    @SusiePerez-d7o 2 місяці тому

    Gonzalez Nancy Williams Kimberly Gonzalez Daniel

  • @LouiseFoster-r1o
    @LouiseFoster-r1o 2 місяці тому

    Hernandez Brian Thomas Karen Martin Amy

  • @HarryTabitha-g2b
    @HarryTabitha-g2b 2 місяці тому

    Allen Jessica Smith Kenneth Thomas Larry

  • @HawthorneMegan
    @HawthorneMegan 2 місяці тому

    Lee Susan Martinez Jose Wilson Betty

  • @DavidLee-b9k
    @DavidLee-b9k 2 місяці тому

    Lopez Sarah Walker Jose Jones Carol

  • @KristaWalters-p2x
    @KristaWalters-p2x 2 місяці тому

    Lopez Jessica Johnson Donna Walker Sandra

  • @JosephAllen-u2e
    @JosephAllen-u2e 2 місяці тому

    Lee Maria Johnson Donna Lewis Michelle

  • @AntoinetteSusie-r3m
    @AntoinetteSusie-r3m 2 місяці тому

    Jackson William Lee John Martin Jason

  • @GajshAksjb-y3l
    @GajshAksjb-y3l 2 місяці тому

    Thomas Jeffrey Garcia Karen Hall Kimberly

  • @AndrewThompson-l7z
    @AndrewThompson-l7z 2 місяці тому

    Lopez George Walker Edward Moore Lisa

  • @LonnieThomas-v4s
    @LonnieThomas-v4s 3 місяці тому

    Walker Amy Walker James Jones Barbara

  • @JuliaBrame-e2l
    @JuliaBrame-e2l 2 місяці тому

    Davis Jason Harris Ruth Harris Betty

  • @RosalindHarlan-r1h
    @RosalindHarlan-r1h 2 місяці тому

    White Jose Walker Donald Anderson Kevin

  • @WildeTernence-f9r
    @WildeTernence-f9r 2 місяці тому

    White Dorothy Garcia Larry Hall Ruth

  • @MollHyman
    @MollHyman 2 місяці тому

    Taylor Ruth Jackson Michael Clark Shirley

  • @DilRuba-e8c
    @DilRuba-e8c 2 місяці тому

    Lee George Perez Richard Harris Karen

  • @samuelblackk6106
    @samuelblackk6106 7 днів тому

    @Mizko too white 😅 need darkmode

  • @SzabatDesign
    @SzabatDesign 4 місяці тому +1

    I haven't seen such great content among designers on UA-cam for a long time! Chapeau bass! Really great job Michael! When it comes to marketing and brand building, you will surely win the hearts of many new Product Design adepts with such content! :) Great material, I'm waiting for more like this! 🫡🔥
    PS. Nice haristyle like always! 😎👉👉

    • @Mizko
      @Mizko  4 місяці тому +1

      I’m sooo happy to hear you enjoyed it Chris. Haha I try to make the most of my hair while I still got it 😂

  • @rigidhammer7376
    @rigidhammer7376 2 місяці тому

    so the key to solve the problem is to travel to....

  • @AlisonHoward4ye
    @AlisonHoward4ye 2 місяці тому

    Walker Angela Harris Richard Anderson Patricia

  • @dantesparda-b7c
    @dantesparda-b7c 2 місяці тому

    Jackson Robert Wilson Paul Lee Margaret