I Redesigned Digi Yatra App | UI/UX Design Tutorial | Saptarshi Prakash
Vložit
- čas přidán 3. 07. 2024
- 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
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.
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
dkrdng
same thought
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.🤣🤣
Figma, the OG! 😅 I have seen people typing letters in Figma
Lol😂
I am so glad you didn't obsess about auto layouts and concentrated on problem solving. good job.
Thanks bhai... ❤ seriously I'm in love With UI
Love this video, very informative to know how other designers understand and breakdown problems, think of solutions and execute them.
Please make more interesting videos like this. Loved it and very informative. Kudos!! keep up man👏
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.
That's exactly what I was thinking.
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
Thanks a lot bhaiya for the tutorial . waiting for more amazong content . Best learning best everything
Watching Sapta doing stuff on figma really brings smile on face, Didn't completed the whole video, but I know its always a Gem
More redesigns like these please. Very entertaining
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 :)
Amazing ! , Learnt a lot from this video
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)
i liked the idea very much
Amazing ! You are really a great designer 👍
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. 😅
That sounds interesting keep making these type of content its very helpful 👍
Would love to see a series on redesign, more of this stuff!
Great video, keep them coming! 🔥
Thank you 🤩
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
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
Really loved the redesign series, Please keep them coming. And thanks for another awesome video.
That’s the plan 😅 If you have any suggestions for redesign, please let me know.
@@saptarshipr A series of rediesigning different Ecom modules. Like the payment gateway, cart page home page etc etc
Version2... just wow👌😍... would love to know your thought process also
I loveeed the way you added a progress bar when you were advertising!!!
Awesome Tutorial🤗
Thank you
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
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
amazing ❤️
Thanks a lot!
Loved the logo very much
Thank you 😍
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
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
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
Thanks
you misaligned the BOM text at 40:17 a bit upwards haha, however I loved it!
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.
We can add visual cue like expand down the qr code and like a back button on the above after expanding
1. Add Expand Button on QR Code
2. Add top right Close button
Thanks for the video
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
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.
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 👍
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. ☺️💛🙏
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
subtle highlight effect by adding dropshadow to signify it is clickable.
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.
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 🙌🏼❤
Version 02 is just lit 🔥
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.
1. we can add an animated frame around the QR code to make it noticeable
2. we could add a BACK button below
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.
The logo is actually good and you should sell it to them😊
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
We can give expand icon too right corner of QR code and on expand screen we can give back icon
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 👏
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.
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.
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.
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.
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
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.
We can have 10px small text below the boarding datapoints box says ”*Tap the QR to maximise the size”
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
Tooooo Goood
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?
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.
sir make more content like this
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.
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)
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?
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....
Should have added a blue hue for travel colour...but i liked the overall thought process.
Thank you! 🙏 Can you please elaborate on the blue hue part?
What if we add some lines around qr code at corner which create sense that click to enlarge and same for enlarged version.
may be last one is good for user
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
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.
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.
Details matter, my friend! 😀 in fact, one of the things that separates a novice from is attention to details.
A small request Sapta Sir, can you use a software which shows which keys you are pressing. It will be very helpful😊
Noted. Thanks for the feedback 😀
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
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?
Yes, the colour will change. It will be a linear gradient with the primary colour of the logo
were are those ux processes isint it difficult to design without it directly
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.
Sir can plz share the file and elements, so that we can redesign this, do pratices
(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.
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
Can you redesign the home page of Poshan Tracker app?
"Tap to expand" under the qr in the first state. "Tap to compress" below the qr in the expanded state...will this work??
Whats the tool u use for building this Figma or XD
hey Sapta can you please share this file with us so, I can further work on your given problem statements?
41:15 show minimise and maximise logo
Sir, kya mai freelancing k liye figma free mei use kar sakti hoon?
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
Won't the second one be a nightmare for developers lol , getting the correct color of the boarding pass as received from the API
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
Trueee AI at its best !@@saptarshipr
Through ambient shadow 😅
Is it sponsered by Air india?
I wish 😂
I stopped watching when I saw he is using iOS status bar on Android large frame 😢
Redesign IRCTC 😌
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 😂
Why 😢
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
hey can you please review my project ?
Idk why I like the existing one
Yeah, that’s actually works just fine 😀
Previous logo is much better than yours
🫣