پس از جمع آوری و تحلیل اطلاعات  که بخشی اساسی وپایه ای برای تجربه کاربری می رسد نوبت به فرایند های طراحی می شود
در این مرحله پس از جمع اوری اطلاعات بدست  آمده نوبت به  فاز طراحی و پروتوتایپ می رسد.
در این بخش به صورت متداول مراحلی که در ارتباط با طراحی هستند شروع می شود . در زمانی که به صورت کافی و جامع اطلاعات دسته بندی شده اند می توانیم مرحله به مرحله طراحی و فاز های مورد نیاز آن را شروع کنیم .

در ابتدا با  طراحی وایرفریم شروع می شود . وایرفریم در واقع همان ساختار اصلی و اسکلت رابط کاربری ما را نشان می دهد . در این روش به صورت دیجیتالی یا به صورت دستی و کاغذی شروع به کشیدن ساختار که عملا فضای سیاه و سفیدی برای ما ایجاد می کند شروع به طراحی می کنیم. این کار باعث می شود تا بتوانیم المان های رابط  کاربری را درجای مناسب  قرار دهیم چرا که از لحاظ تجربه کاربری بسیار ضروری است.

پس از آن ما در واقع  وارد مراحلی به نام prototype  می شویم. پس از انجام wireframe  ، شروع به انجام مراحل دقیق تر پرو تو تایپ کرده و سعی میکنیم با ایجاد ماکت هایی با ساختار وایرفریم فضای نزدیک تری به رابط کاربری ایجاد کنیم و با انجام ازمایش هایی از طریق کاربران بازخورد های مناسبی را بگیریم و قبل از شروع نهایی فاز طراحی اصلاحات لازم را انجام دهیم. در بسیاری موارد دیده شده است طراحان با در نظر نگرفتن این موضوعات شروع به طراحی رابط کاربری به صورت دیداری هستند که باعث باز طراحی رابط کاربری می شوند که اصلا مناسب نیست و هزینه های زیادی به همراه دارد.
پس از آن فاز طراحی دیداری شروع می شود که مرحله نهایی است و  قالب ها   آماده تحویل به  طراحان رابط کاربری داده می شوند تا به این ساختار های سیاه و سفید ، به صورت دیداری تغییرات را اعلام کنند . در این مرحله در واقع به ساختار های ایجاد شده به صورت دیداری جلوه جدیدی داده می شود تا کاربران به راحتی قابل درک برای آن ها باشد و بتوانند به خوبی با رابط کاربری ایجاد شده در تعامل باشند . تا این جای کار تقریبا بیشتر مراحل تجربه کاربری با همکاری رابط کاربری صورت گرفته است
پس از انجام طراحی رابط کاربری و تحویل رابط کاربری به  بخش کد نویسی وپیاده سازی آن  اماده انجام اخرین فاز تجربه کاربری می باشد که در پست های بعدی به آن اشاره خواهد شد.