World Cup Challenge

Hey Vatsal! Really clean and functional stuff as usual. But these are a few things that concern me about this solution- 1. I am not sure why you used yellow boxes behind the country flag and name in the live score section. What purpose does it serve? I am worried about visibility of flags which have yellow or similar color in them. 2. In the cards of upcoming matches, why is "fifa world cup 2022" getting repeated in all the cards? The tournament name is quite clear since the app is dedicated for the world cup also the top side of the screen also mentions the tournament name. 3. The icons in the bottom nav look very similar. They all have a list sort of identity to it, making it very difficult to differentiate since they don't have any icon text label as well. 4. In the ticket's section, you have divided it on the basis of upcoming matches tickets and "booked". What exactly is booked, I am not so sure about it. Is it the past tickets that have been used? Why is it the primary selection then (left button)? As a user, I would be more inclined to know about my upcoming tickets (which have not been used) rather than the ones which are already used. 5. Lastly, the solution does not tell me where exactly I can stream the matches, so I guess you have missed on that part. Thank You & Good luck

Hi Core UX, I would to like provide a few suggestions for your design. 1. Fro screen 2. Suggested and Worlcup are the 2 categories I can see, you can also add the list of teams in which the user is or the supporting team's list. 2. You can also improve the layout, left white space is creating design gaps and consuming space. horizontal tab which you have used all over is good so please maintain consistency. 3. The center play button here is not going with the interface and interaction, maybe you can use some other icon there. Like on the play button I expect to play something, but I get a screen here. So that's not correct as interaction. 4. Also, you can maintain consistency for icons, currently, I can see filled and lined both. It's difficult to understand other icons in terms of thier use case except home one. Icons are not clear enough in terms of their meanings 5. At top of the screens, all tabs, Top events, world cup, and NBA, have icons, as NBA has colored, WorldCup has white, and top events has no icons. So please maintain consistent standards. 6. For the notification bell icon on black, and blue lined icons maybe you can add a background or broder to it to enhance the visibility of line icons. What tabs Originals, next to featured and what purpose it serves, is not understood to me. 7. At the home screen, you can add the live or upcoming matches for which the user is supporting, or other match highlights, since currently, I can just see news there, so that's providing partial information. Can add some more information to the home screen. 8. Also, a match score table or past sequel playoff details in form of a table will serve as great information to the user 9. Placement of icons at the topbar over streams and Articles, very closely spaced can interrupt user interaction. Also, I Can find them appropriacy there maybe you can provide it somewhere static to the screen or directly on the screen, as this screen is not directly connected to navigation and the internal screen need a back button to trace back.

Really clean design! Just a consideration, did you use the play button as a page in the status bar right? As a user I'd feel a bit confused because usually with a button like that i'm already expect to play a video or something. Let me know what do you think about :)

Awesome color pallette. The interface looks friendly and well thought off. Best of luck.

Good design Awsome

Awesome! Designs looks clean and modern.

Great job Aslam, appreciate the minimal look and the slight shadowing alongside the colour palette that fits the theme of the qatar world cup ! Kudos.

Hi there.. Walid Aslam, hope you are doing well! Like the overall efforts, but there are design enhancements for this solution though. 1.Too much dark and high contrast purple are not giving proper information scent, meaning colors are too high contrast and I am not able to get all significant sports information.. 2. Also, too many colors are distracting and reduce the information weightage. You have added gradient blue and white for "Highlights" as a heading, I literally have to zoom in to get read the label since it has white font over it. 3.You need it since you have added random, purple, and dark blue, along with gradients disturbing the layout style and pattern. 4.I can't see a way where one can stream live matches or channels supporting streaming. 5.When I am supporting multiple sports or teams, I should be able to switch between them, to get their details, I can't see that interface in your design solution. 6.You have to create a consistent layout standard, stats have a grey background, and the lineup is on white. 7.Also, a few CTA's are blue gradients, a Few are black, Few are purple with gradients, which actually confuses me whether the element is actually a CTA or tags or some other component. 8.The bottom tabs, navigation, and a few icons are light and a few are dark, need to maintain consistent white like currently I can see them all with different opacity in different screens. I would definitely suggest you build a consistent layout in terms of component, font style, and color selection.

Nice 👌

Remarkable, This shows fine improvement love it

I noticed that you got right down to work, An orderly paper

I like the way you settle down to work. Keep up the good work..

Amazing work 💯💯

Nice and classy design, just loved it!!

Unique and Classic, love it.👌🏻

Great design, love it 😍

The overall aesthetic is clean and modern, making it pleasant to use. The UI looks intuitive and seamless. The live scores and news updates can be incredibly helpful and I really like the functionality to keep track of favorite team and players👍

Thanks, Marco. and appreciate your feedback.

Nice design, love it! I'd only change the gradient of the primary button. With the white text on, it creates not enough contrast to be read without problems.

@rijinraj Thank you for your feedback. I tried to show which teams are still in and upcoming matches from the first screen. I categorized each game and presented where users were able to know match info at first glance.

@kar123 Thank you so much for the detailed feedback.

Hello Emad, Clean and neat Interface, but design solution can be more improvised since screen are partially completed considering problem. 1. When user is supporting various sports and matches in that sport, he should be able to switch or navigate between view. 2.Watch live button in center bottom navigation, Icon here is not appropriate, this icon is specifically for play and pause and is mostly used for that action only. To evoke screen on that icon is something doesn't go with the nature/style of the icon, the way its expected to work. 3.Top right icon there on first screen couldn’t get its possible use. A quick live match updates/news for the team which user is supporting would will keep him up to date on smaller events. 4.If you could add some more screens over match details, as a user I am really keen to know on what’s going inside each match and team stats and match table sequence of tournaments. 5.Score history for each match and tournament details will also provide much more inadept information of each game. so considering this can add some more of other important details to fulfill the problem given.

Good UI, but problem statement is for user to find out which teams are still in, so user can be informed going into each game. this attempt it only shows some logos of sports channels, noting about the teams or statistics.

one word.......beautiful!

@caryaxvbdfg Thanks

Thank You

@arrony200 Thank you

@saad_design Thank you so much for your good observation. I was also thinking about it after submitting my design. I have noted down your suggestion.

wonderful design

Very good layout and visual hierarchy. But I want ad something that need add this design. 1: The second screen need back button on upper left. 2: There have no notification button. How user get notify if live game start? 3: Some font has low contrast that are hard to read. 4: What does it mean by commentary in navigation bar? In short, if you answer these questions and apply your design, I hope design will be more user friendly and solve the user problem who want to watch and get to know the world cup information. Thank You

This is Amazing!!

@rifat Thank You. If you find any issue in this design, please don't forget to leave your constructive feedback.

@12380 Thank you for your observation. I will surely check it out.

Too Good Design

good job

@tasneem_123 Thank you for your kind words.

@mosfequr11 Thanks for your comment. Yeah, you are right. I will check the notification feature in my next design iteration.

@@12347 Thank you for your feedback.

Intellectual layout and it Looks clear. If this Layout adds a notification icon and comment field it would be better.

Amazing work! Hoping to see more from you. Keep up the good work!

@ramshashahzad Thank you Ramsha 🥰

@robdesigns Thanks for the precious feedback, I agree on the improvements 🫶

Hey Marco Amato, I would like to help you with some suggestion over your designs may be you can think and work on. 1. The color schemes which you have chosen for your design are too much vibrant and overpowering with gradients, this won’t suit the scenarios as the map colors are merging with the background, and too many colors are distracting me from the actual content. 2. The eye icon means I couldn’t understand its meaning, The bottom navigation is too much transparent and I hardly can see the navigation icons there. 3. There is no way one can get match news and related details like upcoming, live past matches. As a user I expect to filter out or search desired sports and related contexts, that can be added here . 4.No complete information on face-off matches is added. You can add details summary on tournament or match sequence of teams. I would also recommend you add a way from where you can book tickets, and see live streaming if possible. 5.There should be complete history or table of the entire tournament. When the match is live or upcoming there should be complete details related to the place where it will be played currently. Currently, there is no way where I can buy tickets for matches.

Love the colors :)

Hi, Shrey The UI is clean, but here are a few of my suggestions for your work 1.The banner on the page doesn't give me complete information about what the match is all about. Maybe you can mention there if the game is upcoming or live. 2.It's better to show a rectangular thumbnail for the country flag, with certain background color, since a few of the team logos are completely unrecognizable as they get mixed with white. 3.It would add great value to the user if you had highlight match stats and updates. 4.Also, there is no way where one can stream the live match and I am not able to see which match I am into or supporting matches. 5.You can add live match updates and news where one can stay updated with the latest match news. 6.For the latest or coming matches, I would like to recommend you add a streaming option or channel where one can watch the matches. I would add great value for the user if he can book a ticket from there itself. 7.Also, a group-wise team stat or updates can give much information to users to know the match sequence and team face-off. How about adding a live updates of the matches which the user is supporting for instant updates? it really needed to be added here. I believe these insights can add a great value to user.

Hey Rijinraj, I would like to give you a few suggestions: - There is an overuse of maroon color which is diverting the focus from the information on the screen to the background. - On the bottom navigation bar, there is no separation between the selected icon and other icons. - Try to build a font hierarchy as there is no differentiation between heading and sub heading at some places. At few places font size is too small which is hindering the readability. - Left and right padding is not consistent on each screen. Home screen: - Why have you used the Fifa world stream icon twice. Try to avoid using repetitive elements. Screen 2: - On the main banner, all the fonts are bold. Using fonts with different font weight helps user easily segregate information. Here "semifinals" can be a thinner font weight. Also, the background image has low opacity which makes it look dull. Also add rounding on the edges to match the overall theme that you have followed. -Increase space above and below "upcoming matches". That will help in segregating different sections on the screen. There is no need to lower the opacity of the cards under it. - Similarly, you can increase space above and below "match center". The text under it seems to be too small. In this section instead of adding just text it can be made more interactive by actually showing some content under it which can be scrollable or you can add some icon in front of those words to make it visually interactive and easier to recognise the features. - The shadow under "teams", "pictures" etc is too bold. You can reduce the opacity of shadow and increase the spread radius. Also add some padding around the words to give it more cleaner look. Screen 3: - "Stats", "lineup" words are not horizontally center aligned. Try to decrease the font weight. The shadow can be made more subtle by decreasing opacity and increasing the spread radius. The tabs can be moved to one line and made scrollable, it will create a consist layout which will look good because we are showing information about the tab that is selected under it. - Reduce the font weight of "the lineup..." Screen 4 - Showing streaming options based on country selection is a very good idea. But instead of highlighting both "use GPS" and "please select country", you can make one of them primary option and the other a secondary option. That will give UI a much cleaner look. Increase padding around the use GPS word. - Increase padding above and below the "streaming option"

Hi Rijinraj, There are many areas you can improvise on 1. Selection of light maroon color, you tried to use the same color everywhere, maybe you can try to add one or two more colors to maintain the color balance. As the marron is dominating the entire design one can hardly find any information. 2. You need to maintain consistent layout standards, all elements are just randomly placed without identifying their meaning in terms of placement. 3. What if I want to see the details of past match history, you can add an interface for that? 4. Some latest updates and news about past matches or games can really help users to remain updated. 5. Upcoming matches on home screens the cards there are too light, and hardly can see them to get the details You can also work on font weight and maintain a consistent hierarchy, everywhere I can just see bold fonts. There is a huge scope for improvement in the design.

since this is a global event and streaming partners for various countries will be different the app asks user to share the location or select country so that it can redirect it to different apps or website which is authorized to stream it in that particular area.

the problem statement is for user to find out where to watch the games and information about the matches.

Hi, Sarath I have certain feedback for you design, may be you can just work on and improve it to the better version. 1. Entire color pallet you have chosen completely hampers the readability of the app, purple itself is so overpowering at background that I can't just concentrate on important updates. For teams, you can add search here to to search between teams, it would add great value to user. 2.All icons should be similar in thickness icon see the bottom home icon is bit thicker that other icons. Also I would recommend you to had screen title at the top here since I just have to refer bottom navigation label to see where I am, You can remove repetitive logo on all screen and title there. 3.Team which is in finals, in third screen, Its difficult to read the text over that rectangular yellow block. The font weight here is too thick and less readable especially screens where you have shown the group wise readings font thickness is extremely light. 4.There is no way I can stream live match and get the related updates, please update that in the design. You can add a way with which one can see the desired details on updates, mean a search bar. I would suggest you to follow consistency in icon pattern like some are filled and some are lined. 5.What if the user wants to see the, match stats and highlights and other updates, you need to highlight other such information in your design 6.You can go for lighter color at the background since the images and text over can be easily highlighted. There is huge scope of improvement considering such design gaps.

Hey Krsna I liked your attempt for this week's challenge. It pretty much solves the problem. However, here are few of my thoughts that might help you improving the design- As someone opening the app, there is a information overload on the home screen where I see the live score, channels and schedule for matches categorised into different sections which I am finding hard to interpret. I really don't understand what exactly is important and what needs focus, and what doesn't. Improvements- 1. Since the live score is the most important information of the screen, try to give it the most attention by giving it more space on the top section so that my attention goes wherever it is supposed to go. 2. The text "don't miss out..." doesn't make any sense to me. It really isn't needed to be honest. 3. You may move the list of channels to the 3rd screen, since using this kind of design style is generally used on a streaming app which is used to watch multiple channels on a single app. You have not designed a streaming app, but an app dedicated for the world cup. 4. On the 3rd screen, the bg image is sort of taking away the attention from the main information on it. It also is distracting me from seeing the flags clearly,

Thank you for your feedback @hetvishah14 .

Hey Sreejita The design seems really clean but there few suggestions that I would like to give: - The overall flow seems to be pretty clear with I think information about previous matches and it's score is a very critical information that you have missed. - Try to keep the padding around "available on" card consistent - Increase the space above and below the "matches". - Spacing above the match list needs to be increased. - Space above and below the icons in the bottom navigation can also be increased. Avoid using primary color in background, background is highlighted more than the icon on it. Great work! All the best.

First off, I liked the name of the product. A-live or Alive; playing or watching sports makes you feel alive. Liked the thought behind it. Talking about the solution, I see that you have tried to bring up a broad category of entertainment under one roof- movies, sports etc. Which might be a good thing or bad, depends It it progressing towards solving this week's problem? Not yet Moving on, after clicking on World cup category, live broadcast of match starts. But what if I just intended on seeing just some info or something else? Why has it taken me directly to the live match directly? Here my another question to you would be, how come a third party app will get the licensing to stream such matches? Instead, as this week's problem is stated, I would like to see on which platforms is the match being streamed. Moving on, below the live match video box, I see a couple of matches- I don't think this layout would work. Why? 1. Too much space comsumption 2. On a single day there can be multiple matches so these needs to be sorted out date wise. 3. Information Hierarchy is not appropriate. On the 5th screen, I feel there can be lot more information added to influence the user to buy tickets. For example, stadium images, player lineup, past matches of the teams, the team's current standing etc. UI Wise, I feel 1. better high contrast colors can be used instead of gradients which is quite distracting for such high information screens. 2. Use of text styles can be improved. Try to encorporate semi bold and bold in the designs to improve visual hierarchy. Lastly, I feel this week's challenge was not completely solved. I am not able to see which broadcasting platforms are streaming the matches and which all teams are still in the tournament or have got eliminated.

Hey Lucky I am not able to open the prototype. Can you please share a new link for it

Check Prototype - https://www.figma.com/proto/mw7sM0HHSxRZjnCtnfgwaS/Untitled?node-id=118%3A237&scaling=scale-down&page-id=44%3A2&starting-point-node-id=118%3A231

Hi Hetvi, Thanks for your feedback. Every point of your feedback makes to think thats right. I'll keep this is in mind for my next project.

Hey SaraswathyG I loved the overall design that you have tried to come up with, primary color that you have used is also energising. But there are a few areas where you can still improve upon: 1. They shade of grey that you have used in the background on all the colors is too dark because of which the overall design looks very dull. 2. You have left a lot of spacing between 2 sections which can break the user flow because of lot of empty space, you can try to reduce the space. 3. The banner at the top of 2nd screen can be more relevant to the football match like ongoing match or upcoming match. 4. Bottom navigation bar is missing by which we can easily navigate between various sections. 5. On the knockout screen, back option is missing. Try to keep the background color consistent, on screen 2 it is grey and on knockout stage screen it is white. 6. Try to keep heading fonts same, "upcoming matches" on screen 2 and "knockout stage" are different. 7. On the last screen, why have you added such keywords or are they buttons which will take you to that feature? If they are buttons the feature can be made more interactive by adding icons etc. In the "matches" section why is there a grey background under the word? Match list is getting cut in the middle on the screen, you can probably add a view all option. Great good! All the best.

Hi Robbin, Thanks for your valuable feedback. Thats really a good review and suggestions.

Hi Sarawathy I have certain insights for your design here, you can consider it as my feedback 1. Banners at home page really serves no purposes here, instead I would recommend you to add a live/ upcoming slide in banners for games/sports to which I am supporting. 2.When I want to get details score and history for past matches I should get a clear view. It would be great to add other sports list from where I can switch to different sports where I contribute or support, like on home screen. 3.Live match news, or past matches news can add great in terms of user who is seeking for frequent updates. 4.I would suggest you to add match stats, and other teams details from where I can look upon details of each match. 5. Live match streaming is great option from where one can enjoy and watch games live. Most of the information is not in details here. so I have to navigate screen till bottom to get the other details, you can work on the layout, to help user to get all esential updates avalable at less time. 6. Also there are issues of spacing and multiple text sizes and fonts used all over which makes layout inconsistent. You can also maintain consistent alignment standards. 7. Also you can work on the card shadows here may be can add soft subtle shadows. I believe my insights can help you to create better design version out of it.

Hey, I would like to give you a few suggestions: Home screen - Instead of writing "good morning David" in two separate line you could add it in same line to save some space. That space can be utilised to show more relevant information to the user. - There is a lot of space above and below the search bar which can be reduced. Also, try to add padding between the search box and search icon. That will give it a much cleaner look. - In "Trending" why are there key word? It initially felt like filters but what will happen if we click on that word? "World cup" text is not clearly readable due to low contrast with the background. "live watch" is not horizontally center aligned with the box. - In "live matches", "live" word is not clearly readable as it is getting mergered with background. You can add black background under the word so that it is visible on whatever background it is placed on. -The image that you have used in "live matches" and "upcoming matches" is the same, in competition try to use different images or banners to provide realistic data as much as possible. Second screen: - Again "live" button at the top right is not visible. "Live" is written at the bottom too, try to avoid using repetitive element. - Information shown under "match info" is not clear. What does this yellow rectangles mean? Why is "Bukayo saka" word written 3 times in the screen and why are they written in two different columns in such a weird manner? Some flows like previous knockout teams, upcoming match list and information about the score are missing. Try to cover those points to meet the challenge's requirements. Overall good efforts! All the best.

Hey Wiktor, I would like to give you a few suggestions: - You have overused the maroon color (primary color), this makes it difficult for the users to focus on most important information. All information feels at the same hierarchy. Try to build design system to create clear color hierarchy in different components that you are using. Cards can be turned white to shift the focus from background to the information on top of it. Turn the main headings "online world cup streams", "Can't you be in Qatar" from maroon to grey to reduce focus. Try to use primary colors only on the elements where it is clickable (CTA buttons or words) -You have not left any space for time, battery etc. at the top of screen. Try to pull hamburger menu and profile a little lower. - You can avoid using logo on all screen as it is taking up a lot of space which can be used to show things that are important. - On the bottom navigation bar, try to keep home as the first option and you have not created any segregation for selected tab. Placement of back arrow is not intuitive, it can be move to top left corner of the screen. - Try to create a clear font hierarchy there are many places where text is not readable. - The flows to see previous team score and knock outs is not shown. - Try to maintain consistent left and right padding on all the screens. Home screen - Upcoming matches section can be added to 2 separate cards, country's name fonts too small. - "Online world cup stream" text is not in the center of the screen. - "schedule" is a button or heading. it is hard to make out. The shape that you have used in the background feels very decorative and doesn't align with the theme. - Add some padding before the "FIIFA official website". - Why is there a play icon on each match, are multiple matches going on at the same time? Play icon can be removed as it feels weirdly hanging in the middle and the card under it can be made clickable instead. - What does 3 dots at the end signify, it's not very clear. Second screen - What does "group" and "schedule" signify here? - "buy your ticket" card seems to be hanging in middle. That card can be made small in such a way that the entire width of the screen is used to utilise the space wisely. - Instead of adding two cards like "online word cup streams" and "meet and watch" you can make the buttons small or show any one of them as pre-selected with the options under it. Screen 3 -Information in the card looks cluttered and it's hard to understand what is written. Look at https://m2.material.io/design/introduction to get a better understand of design system. That you help you improvise upon your UI a lot.