I Redesigned Digi Yatra App | UI/UX Design Tutorial | Saptarshi Prakash

Подписаться 102 тыс.

Просмотров 27 тыс.

50% 1

I'm sure you've used the Digi Yatra App atleast once while travelling in a flight. While the app does make the check in process seamless and saves a lot of time, can the same be said about it's usability and design?
In this video, I've redesigned the Digi Yatra App and tried to make it better!
Do watch this video till the end to see what I've come up with, and don't forget to subscribe if you found this useful!
Check out Kittl here: kit.tl/saptarshipr
Use Promo Code: SAPTARSHI for a 50% Discount!
CHAPTERS:
00:00 Intro
01:02 Digi Yatra App Walkthrough and Use Cases
04:41 Digi Yatra Logo Redesign
08:37 Digi Yatra App Redesign- Version 1
30:41 Digi Yatra App Redesign- Version 2
40:56 Problem Statement
41:45 Results & Outro
UI/UX Design Roadmap 2024: • If I Started UI/UX Des...
FREE AI Tools: • Top AI TOOLS You MUST ...
FREE Graphic Design Courses 2024: • BEST FREE Graphic Desi...
UI/UX Design Trends 2024: • 2024 UI/UX DESIGN TREN...
UI/UX Designer Roadmap 2024: • How to Become a UI/UX ...
First ₹ 50,000 from UI/UX Design: • Make Your FIRST ₹50,00...
How I Got A HIGH PAYING UI/UX Design Job: • How I Got A HIGH PAYIN...
Upskill as a UI/UX Designer:
10 Easy Figma Animations: • 10 EASY Figma Animatio...
UI/UX Laws & Principles: • 10 UI/UX Laws & Design...
Become UI/UX Designer in 2024: • How to Become a UI/UX ...
My First UI/UX Case Study: • My first UX Design cas...
Write E-mails with ChatGPT: • Write Email asking for...
Become a PRO UI/UX Designer in 2024: • How To Become a PRO UI...
Best Figma AI Plugins: • BEST FIGMA AI TOOLS fo...
Sapta Reviews: • Sapta Reviews
How to Become a UX Designer in 2024:
• How To Become a UI/UX ...
-----------------------------------------------
😃 ABOUT ME
This is Saptarshi (a.k.a. Sapta), an engineer turned self-taught Product Designer based out of Bangalore, India. I have worked with some of the very well known startups of India and learned anything and everything that is needed to create amazing experiences for the users. I'm also an active speaker, teacher and community builder, and have delivered over 60 talks, workshops and webinars on design. In this channel, I post videos with tips, strategies, tutorials and general gyaan to scale your career in Design. If you are into it, you may want to subscribe and hit the bell icon to that you don't miss out :)
-----------------------------------------------
💻 📷 🎤 MY GEAR
My Desk: bengaluru.featherlitestore.co...
Sony A7iv: amzn.to/3KQZ0LM (Primary camera)
Samyang 24-70mm F2.8 lens: amzn.to/3qDYHx0
Sony a6300: amzn.to/3gIx0v1 (Secondary Camera)
Sigma 16mm F1.4 lens: amzn.to/38DFPRR
Sony 50mm F1.8 lens: amzn.to/3rufcaB
Samson G-Track Pro condenser mic: amzn.to/37Rixsw
Rode Wireless Go 2 : amzn.to/3KQXBU0
Boya Lavalier Mic: amzn.to/2M0MZI7
Godox SL60w light : amzn.to/3HgSU3O
Godox SB-UE 80cm softbox : amzn.to/3GdNq8h
DIGITEK DTR 500 BH (60 Inch) Tripod: amzn.to/39d1m48
-----------------------------------------------
📲 SOCIALS
Instagram: / saptarshiux
Twitter: / saptarshipr
Dribbble: dribbble.com/saptarshipr
LinkedIn: / saptarshipr
Medium: / saptarshipr
-----------------------------------------------
🎶 MUSIC
The jingles and the background score is composed by Sargam Prakash, an awesome designer and musician. Do check out his channel.
Sargam Prakash: / sargampr
-----------------------------------------------
🌟 TAGS
ui ux design,ui ux mobile app design,figma tutorial for beginners,figma full tutorial,figma tutorial,figma,ui,ux,ui ux design tutorial,ui/ux design,ux design,user experience design,design,ui design,ui designer,ui ux design tutorial for beginners,ui ux design guide,ux design tutorial,ui design tutorial for beginners,digi yatra,digiyatra app,ansh mehra,sapta reviews,I Redesigned Digi Yatra App,Mobile App UI/UX Design,Saptarshi Prakash,sapta
-----------------------------------------------
🌟 HASHTAGS
#figma #uidesign #design

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 129

@keshavkharyal3339 4 месяца назад

1.To make the QR code look tap-able we can add borders and add shadow. 2. And to go back we can add a back button or an arrow at the bottom of QR code card.

@yashsharma1080 4 месяца назад

THIS IS WHY I PAY MY INTERNET BILLS 🔥🔥🔥. Watching Sapta design is the best teaching we can get. Please keep the redesign videos coming , they are awesome

@gonerogue69 4 месяца назад

dkrdng

@NiteshKumar-ou4ch 2 месяца назад

same thought

@ankitmangal25 4 месяца назад

The funny thing here is that we as web designers can create anything inside Figma be it a logo, be it a thumbnail, or anything else. So relatable.🤣🤣

@saptarshipr 4 месяца назад

Figma, the OG! 😅 I have seen people typing letters in Figma

@ragdoll7477 Месяц назад

Lol😂

@umerzafar 4 месяца назад

I am so glad you didn't obsess about auto layouts and concentrated on problem solving. good job.

@user-wq9ww1xw8n 3 месяца назад

Thanks bhai... ❤ seriously I'm in love With UI

@nidhipatidar227 4 месяца назад

Love this video, very informative to know how other designers understand and breakdown problems, think of solutions and execute them.

@VarunBansode96 Месяц назад

Please make more interesting videos like this. Loved it and very informative. Kudos!! keep up man👏

@kritisingh2577 4 месяца назад

We can add drop shadow below the qr so it’s being highlighted and look sort of like a tappable entity and open the new enlarged ticket as a modal sheet, opposed of a page so you know you can tap outside of the modal to go back…or we can add the cross button to the modal sheet to make it clearer or we can do pop up of the qr ticket and blur rest of the bg a bit.

@dinkarhere 4 месяца назад

That's exactly what I was thinking.

@abhishekdangi5297 4 месяца назад

Really likes the approach that you took of showcasing the thinking part and embracing groups in the world of frames so that its friendly for everyone to understand how to approach such problems

@sourabhisalive Месяц назад

Thanks a lot bhaiya for the tutorial . waiting for more amazong content . Best learning best everything

@abhisheksinghlodhi6195 4 месяца назад

Watching Sapta doing stuff on figma really brings smile on face, Didn't completed the whole video, but I know its always a Gem

@vsbelieve 4 месяца назад

Great Work Sapta! Loved the second re-design but my personal preference is the 1st redesign, it's simple, easy to use and intuitive for the user :)

@isanskari 4 месяца назад

More redesigns like these please. Very entertaining

@jayanthkumar2296 2 месяца назад

1. We can add two outward arrow that resembles expand for the expanding 2.Once the QR expanded the outward arrow turns in to inward (Vice Versa)

@deepratipnandi4448 4 дня назад

i liked the idea very much

@shouryaverma3622 4 месяца назад

Amazing ! , Learnt a lot from this video

@shilpichakraborty5421 4 месяца назад

Amazing ! You are really a great designer 👍

@TheSAMRIDH 3 месяца назад

This is one must watch for every design people who are either in some bootcamps or design schools. This is the way to think and implement like a designer. Great this Video came across me. 😅

@Sukhmeet1310 4 месяца назад

That sounds interesting keep making these type of content its very helpful 👍

@AbhishekBindal144 4 месяца назад

Would love to see a series on redesign, more of this stuff!

@user-rc5jm1jh6i 4 месяца назад

Solution 1)we can create a small expand icon at low right comer in a white box with color black but that do not cause any error in un expanded QR code 2) We can create a nice button below the card with arrow and text

@deepratipnandi4448 4 дня назад

i think that will be difficult for the user if we make such a small button , first of all there will be readibility issue, the user may not even notice the button in the first go , secondly if we insert a small button considering the given space in the design it might be that the tap may not sit right as the finger size and the touch response should be good enough i that case as well

@ashrafmohd312 4 месяца назад

Great video, keep them coming! 🔥

@saptarshipr 4 месяца назад

Thank you 🤩

@keshavkharyal3339 4 месяца назад

Really loved the redesign series, Please keep them coming. And thanks for another awesome video.

@saptarshipr 4 месяца назад

That’s the plan 😅 If you have any suggestions for redesign, please let me know.

@NikhilSharma-nw4qh 2 месяца назад

@@saptarshipr A series of rediesigning different Ecom modules. Like the payment gateway, cart page home page etc etc

@urvashisingh6790 4 месяца назад

Version2... just wow👌😍... would love to know your thought process also

@kanishyamohan 4 месяца назад

I loveeed the way you added a progress bar when you were advertising!!!

@prashantgotad3739 4 месяца назад

Awesome Tutorial🤗

@saptarshipr 4 месяца назад

Thank you

@VJ-tj3ck 4 месяца назад

1. We can create an expand icon and add it on top left corner or right corner of QR Code or add click to expand text under the QR Code image 2. We can have collapse or back button on top left of boarding pass in expanded state QR to let user go back to previous screen

@yogeshknaik5850 4 месяца назад

for QR code we can bring it little front by adding some background shadow to it for minimize the QR code we can do like background is little light shade with full background blur and QR on the top of it

@shashankhebbar581 4 месяца назад

amazing ❤️

@saptarshipr 4 месяца назад

Thanks a lot!

@omkarkadam1131 4 месяца назад

Loved the logo very much

@saptarshipr 4 месяца назад

Thank you 😍

@user-wh7sv7mj7v 4 месяца назад

adding a flip animated functionality and below the first pass we can add a sort of indication that will let the users know how it works

@ankit3353 4 месяца назад

1. we can put a text TAP TO SCAN/ENLRAGE at 8px below the QR code, or we can add low-opacity animation around that will increase the curiosity to click it, 2. We can use the Secondary Button to Change it to get back to the previous screen (Button > BACK

@kirannaik9367 4 месяца назад

here is my suggestions 1. we can add small button called QR code with icon once user tap on this button we can show him modal popup with a larger QR code. 2. with modal popup close icon he can get back to home easily hope this is helpful let me know what other are thinking

@learnuiuxdesign4824 3 месяца назад

Thanks

@abhiux360 4 месяца назад

you misaligned the BOM text at 40:17 a bit upwards haha, however I loved it!

@karthikrao3595 4 месяца назад

A 'Tap to Enlarge ' text with a minimum font size below the qr along with a (+ magnifier) icon . To enlarge. A simple back icon at the same place as the earlier text to bring familiarity to the action for the second problem.

@simondonald4134 4 месяца назад

We can add visual cue like expand down the qr code and like a back button on the above after expanding

@upendrarangoju6262 4 месяца назад

1. Add Expand Button on QR Code 2. Add top right Close button Thanks for the video

@MarshooGAMING 4 месяца назад

1) I'll make a small expand button or an 'expand icon' near the qr which user can click to expand the qr 2) similar to the expand we can make a close or a simple 'close icon' at the empty borders to bring back to it's original state

@realprime1909 4 месяца назад

1. We can add small text on the bottom to QR which as 'tap to resize' or 'tap to enlarge' like we see 'scan to pay' below text for upi QR stickers in shops. 2. To go back to home, we have to add back button.

@payaltalekar1866 4 месяца назад

You changed everything that you didn't liked in the App including the logo, I loved it😆 My suggestion for the flaws is maybe we can create emboss effect using shadows and strokes to make it feel like it is tappable in both cases for expanding as well as bringing back to original position. Your videos are always refreshing and value packed sir. Not able to follow your content regularly but really grateful for it. Thank-you for creating such a valuable content. ☺️💛🙏

@AbhishekSingh-rb2jj 4 месяца назад

Hey , saptarshi you're doing amazing job i like the way you give us reasoning behind every changes, tweaks you do and matter of fact I'm also redesigning digiyatra refering your design and my research i would love to learn more from you and as soon as i complete my design i would love to share my work with you and have your feedback. Excepting your response ❤ Thanks 👍

@smnahin3332 4 месяца назад

Solution: 1. We can add a tiny finger button inside the middle of the qr code 2. For going back we can add a left arrow button at the top left. Loved your videos 🙌🏼❤

@fireverseshorts 4 месяца назад

For flaw No. 1 We can use a arrow enclosed in a black circle on the right side of the qr code at the bottom For flaw No. 2 We can use animaton like after the code is expanded we can give them a hint of pulling down on the card to get back to the previous screen

@niranjancavalien 4 месяца назад

subtle highlight effect by adding dropshadow to signify it is clickable.

@antonyraphy2860 4 месяца назад

Maybe a label under the QR code like "Tap QR code to expand" OR A Magnifying glass icon with plus and minus inside it. That can be placed in the bottom corner like you designed profile picture.

@user-nm6lw6iy8y 4 месяца назад

Version 02 is just lit 🔥

@nomanjaffer6139 3 месяца назад

Fantastic Sapta! Your Visual acumen is outstanding, Both the designs look great. Solutions to problem statements: 1. To make the QR code tap-able we can add a small text below it preferably in light grey stating "Tap to expand." 2. To add the go back functionality, we can add a simple transition back to the home screen for a random tap anywhere on the screen.

@stardeegaming455 4 месяца назад

1. we can add an animated frame around the QR code to make it noticeable 2. we could add a BACK button below

@VinodNanaiah 4 месяца назад

The logo is actually good and you should sell it to them😊

@lalitbarai 4 месяца назад

So to let the user know that after clicking on it, it'll expand, we can add an opacity on the qr code with an expand icon over it so it gets clear for the user to know what the icon does & what exactly will happen after clicking on it & same goes to when it gets expanded.

@Araop324 4 месяца назад

1. A basic affordances can be created by mentioning just below the QR code ‘Tap to expand’ in a small font or we can elevate the QR code by giving it a simple shadow that can signify a button 2. for closing it a simple close icon at top right corner of card can work enclosed inside circle Again that’s just my thoughts

@Abhishek-hz5zk 4 месяца назад

MY SOLUTION 1. We can create a small expansion button on the QR code where people can click on it and the QR will expand 2. On the expanded QR code we can add a back button which will bring the QR to it's previous state. Great Video 🎉 need more of such interesting videos. Great Work 👏

@minal1511 4 месяца назад

We can give expand icon too right corner of QR code and on expand screen we can give back icon

@anuragbishtttt 4 месяца назад

we should make tutorial screen for the person who is coming first time on the app and in second case we should make a back icon or should give home icon or any thing else for go back to the previous screen.

@SaranshPagey 4 месяца назад

Hey Saptarshi 👋🏻, Thank you for sharing such great content. It's always enjoyable to watch a designer articulate their thought process while redesigning; it teaches us a lot. One small correction to the copy: it's not "affordance," it's a signifier that we want to create. "Tap" is already an affordance of the mobile screen. Also, if we want to highlight the ability to tap and adjust the QR code size, I'd suggest the following changes: 1. Adding a drop shadow to visually separate it from the background. Next, I'd include an icon for expansion, perhaps with a blurred background similar to Instagram's initial usage. 2. To return to the main screen, I'd consider adding an "X" icon or an icon for minimizing (possibly an arrow facing bottom-right) somewhere around the top left of the QR code, signifying the minimize action.

@ankitvijay5265 4 месяца назад

Hey sapta, I think you mean to say how to create signifiers for the affordance that it already has, correct me if I’m wrong. For enlarging tapping ability Creating small quarter of a circle at one corner overlaying on the Qr making it blur and putting a vector graphic of fingerprint. This can be only for smaller qr code as it is pretty much not usable so putting a vector graphic above cannot alter QR functionality but the same cant be done for bigger version.

@miraz_kabir 4 месяца назад

One solution for both: Possible Solution 1: We can introduce text promt as guide for first time use. A small animation with text will guide the user how it works. Possible Solution 2: We can add a shuttle shadow so that user can feel it is tappable.

@abhineetkumar3808 4 месяца назад

Seq no. Is needed at the time of boarding while stepping into the plane, near stairs/counter, security re-confirm ur boarding by marking sequence no. On the list with pen and paper Second design increases click+ use of logo, I am not sure if tilted version is allowed with most of the company

@notso.aesthetic 4 месяца назад

sThere are two possible scenarios: 1) The QR code is scanned successfully 2) or the QR code can't be scanned. Possible solution: To help users in both scenarios, adding a **big scan icon** and a "**Scan QR**" text in between the **scan icon** would be useful.

@the_name_ak 4 месяца назад

We can have 10px small text below the boarding datapoints box says ”*Tap the QR to maximise the size”

@dipayansaha6644 4 месяца назад

For the QR code thing - Uber has a feature called spotlight, which helps rider and driver find each other by color codes. The layout there is an icon and on tap, it opens a sheet/modal with the color and cross button below. Similar layout can be used here: - Instead of the QR code, use a QR icon that looks like a tappable icon (Just like what we have in googlepay, phonepe etc). On tap, open up the enlarged QR code. - Have an explanatory text on the modal, what the QR does and what user needs to do now - Place a cross icon, to close the modal

@abhijithsathyan9400 4 месяца назад

Hey Sapta, lovely way of explaining your process here. Have a doubt, usually in a mobile based design we can’t have ellipsis right? How would you handle it for the name? Have u observed a common pattern for it?

@altamashkhan5870 3 месяца назад

Tooooo Goood

@inthecloud1156 3 месяца назад

Maybe we can have "scan QR". on top of the qr code itself but blurred out. Even if its blurred, i think people can recognise it as qr. 2. Top left back icon.

@prathameshpatil3205 4 месяца назад

I don't know maybe, we can just reduce the brightness of all other components rather than QR code and that leads the users to click on it.

@cse30someshjha90 4 месяца назад

sir make more content like this

@animeshdwivedi6888 4 месяца назад

Case 1: To make a user tap on it We can put a small label under the QR code "Tap to Expand" (also, we can give a flip animation to the card while expanding the QR). Case 2: To come back to the front side we can simply place a flip icon at the bottom of the QR code, (and while looking at this icon user can recall the flip animation that occurred the first time when taped on the QR to expand)

@ashtilization 4 месяца назад

Thanks for sharing this, very informative video SP, I wanted to ask, in the intro when you said "Like this video", I saw a cool animation in the link button, how did it happen? like is this some new feature? or did you do it?

@rahulmv6122 4 месяца назад

I think we can make use of the space in the screen to have the QR as full size, my be below the name and other details. This docent need the user to tap to expand and then go back....

@rameezmukadam406 4 месяца назад

Should have added a blue hue for travel colour...but i liked the overall thought process.

@saptarshipr 4 месяца назад

Thank you! 🙏 Can you please elaborate on the blue hue part?

@ramtube 4 месяца назад

What if we add some lines around qr code at corner which create sense that click to enlarge and same for enlarged version.

@HemnathGirish-gf5si 4 месяца назад

Hi Can you do a video on ( interview questions asked to an ui ux designer ) Q: why didn't you use grid system , is it mandatory or not ? for expanding the QR , we could have use small arrrows directing outwards the QR , diagonally in 4 directions , same thing to the expanded QR , the direction towards the QR

@saptarshipr 4 месяца назад

Sure, let me think about a video on interview questions 👍 Grid system is not mandatory, but I prefer using it. I used it in this redesign as well.

@akshayprajapati5793 4 месяца назад

may be last one is good for user

@tejashrichavan7122 4 месяца назад

Hey Sapta! Loved the redesign of the app, my key takeaway from this video is your attention to detail. 😃🧐💫 💭Suggested Solution: 1. We can add a drop shadow behind a small QR code for users to understand it is clickable or else we could provide some gif-like animation of the ripple effect behind the QR code, which constantly indicates that it can be clicked. 2. We can add a back icon above the card to indicate that users can go to the previous card screen.

@saptarshipr 4 месяца назад

Details matter, my friend! 😀 in fact, one of the things that separates a novice from is attention to details.

@hamadeqbal 4 месяца назад

A small request Sapta Sir, can you use a software which shows which keys you are pressing. It will be very helpful😊

@saptarshipr 4 месяца назад

Noted. Thanks for the feedback 😀

@kavineesh12 4 месяца назад

I have few questions - At 18:03 why the padding is 16 towards left? Can’t we use 20 only and inside the rectangle we can use the space - How to manage line height cause when the sentence is only one line or heading there’s an extra space above and below which creates problem - If we use negative spacing in autolayout, isn’t it difficult to make devs understand

@StormHacksachin 4 месяца назад

What about the ticket colour will it change when we book flight from diff airline like indigo, if yes how will we do it and explain it to the client?

@saptarshipr 4 месяца назад

Yes, the colour will change. It will be a linear gradient with the primary colour of the logo

@lalitbarai 4 месяца назад

Hey sapta, so i had this question in my mind since i work with the devs on regular basis & since we are a sort of in a rush to get things done. My question is, on the 2nd iteration, let's say if it was a different airline which has a primary color of Black or let's say anything else color. Don't you think that changing those text colors dynamically will be a bit stress as compared to the 1st iteration on the dev side.

@vikisleaks9847 4 месяца назад

were are those ux processes isint it difficult to design without it directly

@avishikalra6092 10 дней назад

Sir can plz share the file and elements, so that we can redesign this, do pratices

@ZaidUX___ 4 месяца назад

(1) Add a Tooltip: Add a tooltip with the message "Tap to enlarge" 🖐️➕ over the scanner icon. (2) Include a Close Button: When the scanner is enlarged, display a "Close" ❌ icon to easily return to the main screen.

@shatakshigp2314 4 месяца назад

solution is- 1. we can create a tap button on the QR code with a white color and black text as "tap" 2. we can add a small arrow on top of the left corner to back

@anirudhp1104 4 месяца назад

"Tap to expand" under the qr in the first state. "Tap to compress" below the qr in the expanded state...will this work??

@Trainviewtube 4 месяца назад

Can you redesign the home page of Poshan Tracker app?

@jeevangudipati3700 4 месяца назад

Whats the tool u use for building this Figma or XD

@kaushals_vlog 4 месяца назад

hey Sapta can you please share this file with us so, I can further work on your given problem statements?

@jaydeepdas9326 4 месяца назад

41:15 show minimise and maximise logo

@Bengalifolktalesesha94 4 месяца назад

Sir, kya mai freelancing k liye figma free mei use kar sakti hoon?

@muhammadhamza145 4 месяца назад

Case 1: We can use tool tip to let user know, (Tap QR to Expand) on first time visiting in the App. (*For Once, Not every time). Case 2: 1- Put a small label under the QR code "Tap to Expand". 2- show QR code in pop-up where cross ❎ button is also placed to close the pop-up. 40:50

@AkshitAkash 4 месяца назад

Won't the second one be a nightmare for developers lol , getting the correct color of the boarding pass as received from the API

@saptarshipr 4 месяца назад

It might need some manual work but these days, algorithms do a pretty good job at picking the dominant colour even from a photo. Logos are still better with distinct localised chunks of colours

@AkshitAkash 4 месяца назад

Trueee AI at its best !@@saptarshipr

@Rahul-fp7mw 4 месяца назад

Through ambient shadow 😅

@vixalag 4 месяца назад

Is it sponsered by Air india?

@saptarshipr 4 месяца назад

I wish 😂

@ashishdhakal3118 4 месяца назад

I stopped watching when I saw he is using iOS status bar on Android large frame 😢

@abhijeetprasad4719 4 месяца назад

Redesign IRCTC 😌

@suyogmugda5372 4 месяца назад

Option 1: The opacity of the QR code is about 60% so that users would want to interact with it. Option 2: Make it look like a classic button. Option 3: Educate uses about the usage. With this we are we are increasing the cost of clicks to reach the goal 😂

@rahid_03 Месяц назад

Why 😢

@abhisheksinghlodhi6195 4 месяца назад

I still feels the 1st design was much more realistic to develop Since 2nd design, the color for each flight need to be changed, adding gradient for each section for solutions: We can add tap to zoom small text below QR For closing we can add cross a rightmost top or switch type icon