Language Barrier Challenge

Great work with the visuals, clean and minimal. I love dark-themed designs personally. Live translation is a very useful tool. On the first screen, you have shown the "Essentials" card, I would love to see what it contains or how it will help me learn some essential words of a new language :)

Thanks for your kind words Julie! I did 2 versions of this design, a light mode and dark mode. I chose the dark mode for a bit of a change but you can see the light mode here: https://www.figma.com/file/xdtaonYGYRjWS8O3PFzHoz/Language-Barrier-Challenge?node-id=219%3A1403

Hi Liam, love this work ! I love the leaderboard feature, making the learning more challenging. Translation feature is also a great idea to continue using the app during a trip and the fact that you can use it with Speech-to-text is great and accurate regarding travelers needs. The exercices seem fun and thus make the learning more recreational ! The only thing I would maybe take in consideration is the dark mode (I don't see a button allowing to switch to a light mode but maybe in settings) because I don't think black is considered conducive to learning : I did some research and it appears that education solutions are more around blue / green / yellow environments as it is proved to help learning and focusing. Kudos, it's a really great work in terms of design AND product-market fit !

Looks much better. You can also change the colors of icons on the navigation bar to darker. Do a little research, you don't find good UI apps that use light gray for buttons.

Hi Tamir, thanks for your feedback! I have taken your comments on board and adjusted my weight font on my lesson & topic titles ☺️. I have created a basic prototype of this app. Let me know your thoughts! - bit.ly/37G6SPx

Hi Ben, My favorite work until now. great work with gradient on the background, your navigation bar is great! however, I strongly suggest you don't use this gray color for unpicking items, it's a color that similar to disabled color. As for typography, too my opinion the bold it's too hard, maybe "medium" will be more fit.

Hi , I like the way you expressed, my feed backs are 1.In the Home Screen itself , Translate now to be include. While landing into the application .purpose has to be solved. 2.Useful Sentences , not word, i appreciate this thought process, but again visibility of the text is less. 3.In Useful Word, you can provide Listening option for translated version to pronounce and also the statement written in Spanish, people who do not know to read Spanish, How supposed them to read, so you have to provide translation readability in English as well Thanks Nafeesa.

love the design and layout

Hi Tazim, simply good work. However, it's impossible to understand the user flow. Pros - I like your work with the cards, nice typography work, and shadows. Cons - 1. the subtext color it's too bright, more complicated to read. 2. your third screen doesn't design well. Suggestion: use the radius corner for the container you choose on titles "ENGLISH" & "SPANISH". 3. You present 3 screens only, I was happy to know what's happened when the user wants to change the language or clicks on "Hold to speak".

Hey Indranil. Really clean and great design as usual! Loved all the colors and design consistency going throughout the design. I liked that the user can see all the popular languages being learned so he can be more aware and get motivated to learn something new even though it might not be in his immediate use (For eg Travelling to that country). I also like that every language has a specific color assigned in the app so that I can see the color and be more familiar with it which can help me navigate throughout the app. I see that there is also an option to open camera so that I can point somewhere and get the text in the viewfinder get translated. But I feel, there should have been 2 different tabs where in if I am in the Voice/ Text translator mode, I can only see the buttons only associated to the specific tab. Same as when I am in camera mode, I can put the buttons which can be helpful while the camera is opened, for eg- flash, zoom etc. Also, I have loved to see an option to import images from my gallery so I can translate the text on those images as well. Overall loved the solution. Good Luck.

Thanks for the feedback Tamir! I'll work on fixing the nav bar

Love you navigation bar on pages 2-3 so much! Great work with cards, typography and icons. Cons - your navigation bar on page 1 it's to low, read more about "Safe area".

Yep, that was pretty much my goal. It's very easy to get confused about some words when you learn a new language. So I wanted a solution that would help you have conversations easily, whenever you struggle to find the right words.

Hi, I loved your designs. I found major 2 benefits. 1. Beautiful minimalistic design which is very easy to understand. 2. I assume most of the user will use it in a hurry and as it is easy to understand user can find the desired word aur sentence on the go.

Hi Subhasish, I like your design, especially the app bar design. Pros - Color palette, Spacing between elements, Images you pick. Cons - I can't understand the user flow because you don't mention it in your description. There is no navigation bar/Hamburger menu in your app? how the user can navigate between categories? or if the user wants to change settings like on/off sounds, notification,

Great work, this solution is almost perfect for the challenge scenario. In the "Learn" tab how can we switch to a different language? Or does it show the current lesson only? I don't know but if it had a quiz kind of the thing in the end to check our understanding, that would be amazing. Nice work, on point ✨

Thank you for your feedback Tamir! Just a question, why is it highly recommended to place the title centered in the header qhen the user scrolls? Thank you! :)

Hi Raul, good work, your mockup looks clear and easy for understanding. Pros - 1. Great theme 2. Good work with typography 3. I like that you choose use bottom sheet when the user wants to change language Cons - 1. As the user scrolls down you use the sliver app bar for writing the title "Most useful" in a smaller font on the left side, I strongly suggest you replace it to the center. 2. Navigation bar, use filled icons when the user in the current page. 3. Back & Favorite icon on the top - to my opinion its too small, you can use 24px X 24px. 4. Icons on the titles - To my opinion it's overkill.

(sorry for the lorem ipsum 😅)

Hi, congrats for your work ! I like the fact that you chose a minimalist way in terms of features display and the colors are really joyful ! I like the STT, STT and text translate features as I would use it when I need a translation ! However, in terms of "product fit", I feel that the app would be more used when you're on a trip and you need to instantly translate something, and not really to "learn" words and sentences. It might be my mistake though, but since I do not see any progression or favourites features, I would think it might be hard to keep track of the words and sentences you learned. Kudos anyway, that's a great work !

Good work buddy, I love how your solution is on point and serves its purpose. On the home page, if you could improve the popular word cards to a better version maybe like showing the translation of it in front and with the voice pronounce (speaker icon), it might reduce a step. Also, I didn't understand the 2nd and 3rd screens. If we pick English as our first language then why it is there in the list on the 3rd screen. These are just my suggestions. This is a good solution but you can do it better Aigbe :)

Thanks Tamir for your review

Hi Ghost, Pros - I like your images you placed. The font in the titles is unique. In order to do better UI design and also improve your skill you have to take inspiration from other designers websites. Cons - Cards in the 4 page should be more bigger. the purple border is inappropriate to my opinion. next challenge try to add more text to your description and how the user flow works.

thank You will work on improvement

Hi, It looks good. But a good looking UI does not mean it is efficient. As per me the voice pitch analyzer is taking too much of space which I dont thing is useful to many users.

Hey Prajakta! I believe you have critically thought about this problem and have come up with this solution, because this is just amazing. With the limited time to do so, you have done a pretty good job. I like that after selecting the language a user would like to learn, he can choose the purpose of learning that language along with difficulty so that the app can recommend him with lessons that he might want to go with first. I like that the solution provides a dashboard where users can see their progress and resume from where they had stopped. What I would like to see is that, in those cards, if the user could see the name of the chapter he'll be going to resume with along with which chapter he'll be continuing with and how many chapters are there in the whole module, would be a great addition. In the 11th screen, I think you can make use of the space in a better way by adding more useful elements on the screen which could be anything like navigating to the other chapters and seeing the current chapter name etc. I also like that you have added a community tab where users can interact with other learners' and discuss anything apart from language. Having a community is a really powerful thing to have in the present times :) Coming to the visuals, I personally am not a fan of neuromorphic design. I think it limits creativity and brings dullness in designs just for the sake of minimalism. Although its a personal choice, having a monochromatic color scheme isn't a great choice to have in a learning app. Some light playful colors like blue, parrot green would make the app more usable for learners. You can also make the bottom navigation bar a bit more cleaner and usable for the users. The icons look really bad and lose out on familiarity. Apart from this, you have done a good job in making all the design decisions. Also, I would recommend you to keep the screens straight while presenting and not inclined because it was really difficult for me to go through your work. Overall I loved the solution. Good Luck for the future challenges. 😁

Hi Mauricio, thanks for your feedback! I will surely update the travel book contrast that you mentioned above and will keep in mind to design a more better user experience in future challenges.

Hello! Here is my feedback: I really love the Ui how it looks like, but here is a key aspect, contrast in the "Travel book" cards is pretty poor, I can barely read what is on the first 3 cards, so I might be careful with it. As for the current experience, this feels more as a Duolingo type of learning app than a Fast & Curious way of learning. It is good tho, but this emphasizes that you need to keep pushing your learning instead of learning something fast. IMO Good job on this btw :)

Hey @Hrithik, Thank you so much for your feedback ! To answer some of it : The challenge was specifically about a learning app specialized for travelers need so I indeed focused purely on simple words / sentences that could be used but I agree with you that the app should maybe be useful in the long course, as a classic learning app ! I understand your comment about not mixing app capabilities but it's actually not a travel booking feature (though it can be synchronized with this kind of app) - if you’re talking about the top 3rd interface and the bottom 1st one. This feature actually allows : - 1st screen at the bottom : the user can set up a learning battle plan depending on the parameters of the trip the user is planning to do (1st screen at the bottom) : trough this, the app calculate a customized learning program based on the time you have before going, the things you’re planning to do there, … - 3rd screen at the top (that give you access to the 1st screen at the bottom) allows the user to vizualise past and coming trips learning programs. Sorry for the bad quality of the export image and the bad layout of the interfaces in the presentation image, I realize now that it does not display as well as I thought and complicate the user flow understanding lol . Regarding your feedback on the visual part, thanks a lot, that was my first time at designing interfaces and I will take notes on those improvements ! Thanks a lot for your detailed feedback, you rock !

Hey Julie! I see that you have come up with an amazing solution to this week's challenge. The users can learn languages based on where they are going out on a trip, with the standard language learning standards of any language app, all well and good. But I would like to mention a few things about the solution which I'm confused about. First and foremost, Do you only learn languages when you are travelling abroad? Can it be not out of learning curiosity, or maybe if I am wanting to talk to my long distance partner who is from some other nationality, could be anything. The solution which you have given limits the user base, as I mentioned, there are going to be numerous reasons for why someone might be learning a new language. Instead a solution to this might be that inside the learning booklet for any language, you segregate the chapters in multiple ways such as Activities, Occasions, Professions etc so the user can focus on first learning what he/she is in need of. Also, I would also recommend that you don't mix up different app capabilities into one, like what you have done here, mixing a language app and travel app together. Although I agree its an unique and creative approach, most users won't really be fond of that. Now coming to the visuals, there is a lot of improvement you can have in this area. You can use a font size of at least 14/16px so it becomes easier to read. On the 3rd screen, you can make the cards bigger with more spacing, and keep the spacing consistent throughout the app. You can also reduce the side margins to about 16/24px so the white spacing improves in this bit too. Lastly, you can make use of better icons, like in the bottom navigation bar, the user might discover the search icon, but instead of the search page, the translation page gets opened. Everything else looks good. Hoping to see more from you. Good Luck.

Pros - great work with cards. I like your primary color. Cons - Add more color to your background, even if you want it bright. Your navigation bar icons are not from the same family it's feeling bad. Your typography inside the cards must be improved. Try to close the font size gap between title and subtitle.

Hi Ramya, If you want your next challenge to be at the top of the list you should pay more attention to the little details. 1. You pick an old color palette. You should take inspiration from other designer websites. 2. You have to give more attention to the grid, all elements don't align to the center. In order to do a big step forward, you need to notice that you do that in every task. Your navigation bar is too low. Read more in ios or android guides about the right size for the navigation bar. 4. Screen no.2 from left, you have text with underline "See all" it's a method that web designers use, for a mobile app it's inappropriate. 5. Text boxes, there is a sign at the bottom, what is it? I'm pretty sure you don't need that. 6. font - try to use a more popular font. I hope you will take my cons to your workshop.