Car Battery Challenge

Great work Vatsal! Though it's inspired from something marvelous but you executed very well with great care of usability in mind. i would appreciate your feedback on my submission! Cheers Bharat

Hey, Vatsal I must say your design is cool. I just saw Nickelfox's UI design in the Figma community. Their UI structure and your UI Structure are very similar such as spaces and icons. You modified some elements. Still, you couldn't do that properly. But you didn't copy everything. That's good. UI POV -> Focus on padding. -> Improve Legibility. -> Heading could be bigger. -> Use soft shadows. -> All Icons should be consistent. Make sure they all share the same weight. In the nav bar, you have used a filled battery icon and you have kept outlined battery icon in the charging station section. There are blue colors on both sides so more focus is going on that part only. Use some dark colors instead of blue. ->Battery icon should be above the heading. ->Ideally, you should put two sentences in your modal. Having a clear message, Users will understand what message you’re trying to tell them and possible actions. -> The headline and the CTA are usually the two most important elements of your popups, so make sure they have enough contrast. Here, you had to change the navigation button color. On the third screen, why is that 30804 there? And Battery rang bar is different from other range bars. I think something seems wrong with the third screen. Thank you.

It's very good design and appreciable...

Can be improvised - 1- On the home screen:- - WidgetUI for the nearby charging stations on the home screen can be improved: looks too empty. - Focus on the remaining battery life of 62% is less due to visuals, for the user remaining battery life should be clearly visible and highlighted since it is important 2-The timing widget "full charge in" on the home screen currently in HH:MM: SS format is shown in the design, this fits well for the current 00:30:25, kerning changes with changes in numbers so the widget should be flexible enough to equip data. 3- Usability wise Bookmark and Search icon with transparent background on the map is not that feasible. Should have some clickable area. 4- Only one widget "Charging info" has an image added what if that numeric value increase is that widget flexible enough? 5- Also, the navigation back button could be provided on top, either keeping the screen title at the center or left aligned. Done well - The UI looks Cool but usability wise few things have to be worked upon. Use of font sizes, weights, and spacing all over is maintained correctly and consistently 👍, Like the logo Charge X. there is a lot in the feedback other than spacing, and typos, that I tried to highlight as per the usability Hope this helps 😊

Great work Meet ! i would appreciate if you have any Feedback on my submission as well!.

Hey, Sushrita Kumari Padhy , Thank You for your feedback, here I want to clear up some points. -> Yes, I designed for Mercedes Benz and the app name should not be Mercedes Benz! that’s why I named it to ChargEx. -> Reason behind putting a charging station on the homepage is when users see their battery percentage on the home page he/she can easily note the map feature so that in one click they can find out nearby stations. Actually, it will redirect to the map page. -> charging bar shows the current battery percentage and battery health is showing the condition of the battery. both are different, this data is connected with the battery expiry so if battery health is under 10-20% so that changing date is near. -> I checked this design on my phone and the font and icons were clearly visible maybe this presentation seemed smaller but actually I followed all guidelines of typography and icon rules. ->that is not a 3d icon in charging info. it is the picture of a charger that is supported in a specific car. each car supported different kinds of charger cables and ports so visually it’ll be more clear to users which charger should they use for their car.

Hey, Meet I must say your design concept is nice. Here is my feedback on your submission: On the welcome page, why did you name that ChargeX? You have designed interfaces for Mercedes Benz, right? On the home page, instead of showing charging stations try something different. On the battery analysis page, the charging bar and battery health both are the same meaning. You have shown the charging state on the home page again you have shown that on the battery analysis page differently. You could have shown a different state. Make your design consistent. UI POV -> If you are using the status bar then have to use the bottom home indicator too. Otherwise don't use it. -Home page- ->It's not required to show a map icon right to the charging stations. -> Battery range and full charge Icons could be bigger. -Battery analysis- ->I didn't get it. Why did you split the elements here? Could you please clarify? ->Text size could be bigger. ->Focus on typos. Some texts are small and some are big. ->You can use Figma mirror/sketch mirror/crystal/ adobe xd for previewing the designs. There you will see the UI mistakes. -> Use the Battery icon instead of the charge/volt icon. Icons need to be recognizable. ->Improve legibility by increasing element spacing. ->Why did you put the 3D Icon in the charging info? -Nearby Stations- -> Why that 2.5km text weight is low? Don't you find that important? ->Elements/cards could be lit bigger. Not able to see those texts. Even users will be frustrated by seeing this. For better readability show one or two cards/elements that's enough. Thank you.

An extremely user-friendly design, with all necessary features at hand 🙌🏻

The design is very and accurate. Here your hard work can be seen. Looking for such amazing designs

I like the way the UI looks and how easy to use this kind of features in an app Good work👍🏻

Hey Meet, The design and colours are outstanding. On the 4th screen, the nearby station page can have a "location icon" rather than a "message icon".

Creative!!!!✨

Amazing Design, Great work💫👍

Amazing work🤩🤩🤩

Awesome and pixel perfect design meet. Like your work.

Hello @aishwarya, thanks for the feedback. I noted your point but the ideology behind the using this app module is before you use your car you'll be notify in advance

Seems great design 👍

Great page designs, I think showing similar information in dashboard designs will be helpful. Liked the idea of how information is showing in the app but I think app information is the least usable but same visualisation in the dashboard will help more.

Great

Fantastic design really love it

Can be improvised -> Dashboard screen: text over illustration is less readable. Elements are to closely placed which affects readability and makes the screen too crowdy. ->Use of Text and visuals is not balanced on the overall layout. Too loud visuals on a dark theme ->Consistency with CTA/ colors and contrast is disturbed for eg. Pairing screen, car information screen ->You need to work on text color content and overall legibility ->Most crucial information for battery on the dashboard - Battery 80% what is that battery status, and range? ->Need meaningful labels also below that use to have the label "range" so what does this information about - remaining distance estimate or covered by car till now? if so, please mention that properly After all it's important for the user. ->On the onboarding screen: Some generic heading -- What does generic heading mean? Can you add sensible information??? ->Car information screen: showing car visual on half screen and the half screen has information this can be changed to full width removing full visual. since information/data can be random and not fixed with a fixed length ->Space between the Welcome screen and the Go to the dashboard is extremely. ->Showing car charging history on the home screen doesn't make any sense. ->Green center icon looks weird even if the active tab is home, this green icon grabs all attention even if the tab is not active. _________________________ Feedback over selecting form factor: > For most crucial information and analytical data about car health, one has to switch to a mobile or larger display. so do you think interaction overwatch is apt? what about finding and replacing the battery that's requiring interaction, to see all battery details and stations (information about the station, pricing, etc ) overwatch? All analytical and important information needs a larger display than a watch. So over this switch of the device from watch to mobile do you think one can manage all the controls simultaneously while DRIVING or WITHOUT DRIVING? There is a lot to add to the feedback from my perspective, but I kept it simple and explanatory, hope this helps :)

@fuwad

Yes, I copied the elements from Figma Community and edited them in the last minutes, so I could not make any more changes. This time I am just going to do it that way. Since I did not have time last week and do not want to miss the challenge every week That's why I uploaded this. I understand that we should take inspiration from other works and I do not want to copy other works either. But of course I kept this in mind and will not do it in the future. Thank you for your feedback👍.

the design is copies from figma community and hasn't changed elements. Please try to be inspired by other works and don't just copy them.

The designs are good, the only problem here is that I think the main parameters are distance to empty, battery temperature and current battery charge. That is something missing over all this crowded data. This parameter can be more focused.

It's often a challenge for a designer to design interface both resourceful as well as less cognitive, that's where your design stands 👍

Woow! you did a great job.

Beautiful, I love it

This looks so great and beautiful

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment. Also showing battery health was important aspect in the challenge.

Design looks clean.

Thanks for the feedbacks I'll look forward to reflect and fix it soon

Can be improvised - 1- The second half of the battery condition screen - graph is making the screen too crowdy and dense. showing charging history there doesn't make any sense rather showing battery health and condition significant details, also, the widget needs to be properly designed 2- The battery health icon and text at the top placement are a bit out of alignment same is done on the home screen for the battery. 3- Spacing can be even more improvised 4 - The shade of purple (CTA) is too light for lighter white text to maintain the contrast balance Hope this helps :)

Hello Ainun, I must say there is little confusion regarding the navigation between pages. No back button is provided. And rather than focusing on the previous charging stats, it will be better to provide more information regarding the current driving state and battery conditions. thankyou.

Hey Vaishnavi, I really liked the UI that you have designed. However the solution was to see everything related to battery while driving a car, dashboard would have been a perfect fit for it!

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment. Also showing battery health was important aspect in the challenge.

Hello arya, I really loved your design. UI is stunning and awesome. I like how you incorporated vehicle controls and statistics regarding the car. thankyou.

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment.

Hello Harish, Nice design, But the problem statement focus on problems faced by users while driving to know the battery stats and other information regarding the car. It would be better to provide more useful data regarding the battery stats and then focusing on charging station locations. Thankyou

Excellent Work Gaurav! All I can say is User-Friendly Design. Alignment, Spacing, and Padding are Properly used. Icons are Great and anyone can recognize them and remember them. I saw so many people using Thunder/Volt Icon as Battery Icons, Instead, Use Battery Icon, So You Use Generic Icons. Nice Efforts!

Why would you check the battery status on your mobile while driving !

Hi, Improvisation needed on, 1.Adding too many bright color gradients over black gets difficult to find and track details, this increase fixation and focus on less important information.. due to which it’s difficult to trace the layout. 2. Color for highlighting controls/ widgets can be consistent. 3. Canonical icons for navigation are needed, filled icons are difficult to comprehend . 4. More significant information can be highlighted currently use of too many gradients is over powering icons and decreasing weightage to more imp text information. Also text legibility is hindered due to use of too many color gradients. 5.Rest widgets aesthetics can be improved along over all text size and hierarchy.

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment.

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment. Also showing battery health was important aspect in the challenge.

Hi Eric, Sorry to say but this design copied from dribble same to same.

Hi Irem, thank you very much for leaving a comment. I appreciate your suggestions and I will implement them in the new version of my design. Best of luck!

Hey there! I loved your layout and the softness of your colors. Even tho I loved it, I had a hard time understanding that the charge level. My eyes matched the orange spot and 350 km since they are the same color but, the info (350 km) seemed irrelevant or not enough. Maybe you should try giving a percentage. Also, you might want to improve the button hierarchy on the page with bold text and filled colors. Great look&feel. I wish you the best!

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment.

this is a duplicate

Thanks

This design is better when compared to others because this includes an app as well as the car screen view, which is a crucial part when designing a app related to cars. The detailed UX research he put into this work is clear in the warning message screen, which others forgot to add. Good and clean design. All the best

Showing battery health was important aspect in the challenge which is missing in your design!

Hi Yashwant! Great that you have designed infotainment but UI needs improvement in few aspects. Also showing battery health was important aspect in the challenge which is missing in your design.

Hey Komal, I would like to give you few suggestions: - Is it a car dashboard screen that you are showing? If yes then why does it have such a big car image in the center. It is occupying a lot of space which can be used to highlight important information. If you are in the car there is no need for adding such a big image you know how your car looks. - Inside location navigation area, try to increase space above search bar to have a consistent left and top padding in the screen. Are the power icon's charging station? If yes then they should no longer be highlighted if you have already chosen your destination. 6km on the left and 12mins on the left looks like start and end destination. Try to keep the unit consistent. If you are showing kms on the left show kms on the right as well. Is the "6km" the distance you have covered total distance, it is very confusing. - Speedometer area should have a card around it. Information in the card is not easily readable. - Try to reduce space before the word "Climate" and card edge, to make left and top padding consistent. Do the same with "doors" and "Update" card. -Why does climate card have a green line in between it can be avoid as it is diverting focus from "21C" to that small line. - You can reduce space between "doors" and "all locked". Same for "update" and "time..." - Try to keep font size and alignment of all the headings same "Climate" and "Battery & Range" have different font sizes and different alignment. - In distance and time card, there is no mention about the time then why does it say time in the heading? - If there is 80% battery remaining how can distance covered and distance that can be covered be the same. Distance remaining "58km" should be more and isn't it same as the range "500km" which you have mentioned at the top? - You can make font size of "58km" same as "21C" and make the font color white to maintain consistency. - Also when does the battery require replacement, that information is missing.

Nice colour template but I think the main information can be more focused like speed, and battery range. After looking at the screen, the first attention is going to the map section and then the car but that is the least important.

nice one

I appreciate the feedback. Design by JS Yes, you are correct that using an app while driving is dangerous. I therefore want to provide a solution with compatibility. One example of a use case that could be useful is indeed the user getting notification prior to adding a destination. User must first sync app with car system before receiving all details in the form of notifications and alerts. I hope that makes sense in some practical implementation. Cheers Bharath

Hi bharath, you have taken quite good efforts for the challenge. Unfortunately challenge was about checking battery status while driving and is can be hazardous to check mobile app while driving.

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment.

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment. Also showing battery health was important aspect in the challenge.

Hey Amanda, I would like to give you a few suggestions: - An arc at the top is looking weird and is not making any sense. It is grabbing unnecessary attention and diverting the focus from the main information. There is a lot of space at the top of "find a charger" which is getting wasted because of the arc used. - Bottom navigation bar looks too big (height wise) and try to avoid using primary color (blue here) as there is a lot of focus on the background rather that the icons on it. Keep the line thickness of the icon consistent, home icon is a single line whereas vehicle info icon is double lines. Try to add space between icon and text under it. The is no differentiation between the selected and unselected icon. - Avoid using primary color in card's background as it grabs a lot of attention and diverts focus from the important information that needs to be highlighted. Here in the card with charging station address and vehicle info (Guides, specs etc) usage of light grey color in the background would have been better. -Try to maintain consistent left and right padding on the screens. 1st screen has less padding as compared to 3rd screen and 2nd screen has uneven padding of left and right side. -Try to build font hierarchy as I see there is no consistency with the fonts that are used. Lots of font sizes are used which of it is very difficult to identify information based on it's importance. - You can also play around with font weights to build hierarchy of information. Screen 1 - "Find a charger" and other heading's font size can be reduced , you can also use dark grey fonts instead of blue gradient as bigger font size is already helping it grab attention. - Try to increase space between map area and map address card. - Try to keep the overall padding of address box consistent. Try is less space at the bottom as compared to the top. - Why is "report" highlighted in the main screen it feels like it is the primary objective of the screen. Such actions should be burred inside the next step screen so that user cannot report something like these very easily. (I believe report is not a very critical feature that is used in case of emergency) - Instead of "report" it should have some arrow which leads to starting the navigation. Screen 2 - Increase space between "battery health" and "David's Rav" - Try to use consistent colors, avoid using a similar shades of blue. Blue used in "25%" and gradient used at all the other places is different, it leads to confusion. Define your primary and secondary colors clearly. - If you using sub text "until next charge" try to use a sub text for other information as well (Battery replacement doesn't have sub-text) Also the font size is too small to be readable and make the initial letter of the first word capital. - Reduce gap between "until next charge" and " June". According to law of proximity keep the similar kind of information together. That makes it easier to understand similar information. Screen 3 - "Vin.: JFM..." why is it left aligned, it is looking weird as all the other information is in the center. Is that information that important to be shown at the top? Can't there just be a small info icon and when you like on it you see your car's info or it can be added to guide. specs... feature. - There should be consistent padding in the "guide, specs..." etc cards. There should be more gap between icon and text.

Hey Amanda, I would like to give you a few suggestions: - An arc at the top is looking weird and is not making any sense. It is grabbing unnecessary attention and diverting the focus from the main information. There is a lot of space at the top of "find a charger" which is getting wasted because of the arc used. - Bottom navigation bar looks too big and try to avoid using primary color (blue here) as there is a lot of focus on the background rather that the icons on it. Keep the line thickness of the icon consistent, home icon is a single line whereas vehicle info icon is double line. Try to add space between icon and text under it. The is no differentiation between the selected and unselected icon. - Avoid using primary color in card's background as it grab a lot of attention can diverts focus from the important information that needs to be highlighted. Here in the card with charging station address and vehicle info (Guides, specs etc) usage of light grey color would have been better. -Try to maintain consistent left and right padding on the screens. 1st screen has less padding as compared to 3rd screen and 2nd screen has uneven padding of left and right side. -Try to build font hierarchy as I see there is no consistency with the fonts that are used. Lots of font sizes are used. Screen 1 - "Find a charger font size can be reduced" - Try to increase space between map area and map addresses. - Try to keep the overall padding of address box consistent. - Why is "report" highlighted in the main screen it gives me a feeling that it is the primary objective of the screen. Such actions should be burred inside the next step screen so that user cannot report something like these very easily. - Instead of "report" it should have some arrow which leads to starting the navigation. Screen 2 - Increase space between "battery health" and "David's Rav" - Try to use consistent colors, avoid using a similiar shade of blue which you have used in "25%" it leads to confusion. Clearly define your primary and secondary colors. - If you using sub text "until next charge" try to use a sub text for other information as well (Battery replacement doesn't have sub-text) Also the font size is too small to be readable and make the initial letter of the first word capital. - Reduce gap between "Miles" information and " June" information. Try to keep the similar kind of information together. That keep user group information easily and makes it easier to understand.

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment. Ui can be better.

Hi, the problem statement was not just about charging but also about battery health. Few more screens showcasing solution would have been great!

Hi Rohan, Although this does the work by highlighting the charge value etc. We are in the bigger picture talking about a solution for all EVs. Something which can be so general that people can simply install it in the phone and see the overall functioning of their vehicle. Not a product but an app precisely.

The challenge was to design an app :)

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment. Also showing battery health was important aspect in the challenge.

Hey Nadia, The challenge was to create an app that provides a solution for EVs- say- charging and vehicle's overall health. your solution doesn't justify the problem statement ultimately. You can maybe incorporate the following points in future iterations- 1. make the app more futuristic, add some features, and make it look happy. 2. name the app 3. going by the three images, just a word of advice, you can put a little more effort into the design the next time. It will up your design game to a whole next level best wishes.

Thanks for the feedback. Noted!

Hey Aishwarya, Showing a dashboard of a vehicle is really a good idea but app screen along with it would make it easier to see more details. - It is not very clear to me how much is the area of the actual screen as mode and km are going out me the area marked with the border. - The mode and km font size is too small and is not very noticeable. How can I switch modes? Is it with the arrows? - Uneven thickness or a rugged look of the circles can be replaced by a thin line to give it a more thinner look. - There is a scope of playing around with fonts, fonts look too basic. - Try to centrally align heading with the sub-text. "Speed" with "15 km/h". - Keep the font size consistent in sub- text "15 km/h and 28%" as they are at same level of hierarchy. You can also make "km/h" fonts small to emphasis more on "15" - When is the battery supposed to be replaced information is also missing.

As the problem statement says, challenge is to see battery status while driving and checking phone while driving can cause accidents. It would have been better if you designed car infotainment.

Hi Vaishnavi, Liked your thought process. it is neat and linear. A few concerns, though- 1. the design seems to be too basic, 2. the size is too small to read, but I am assuming by the icon you have tried to incorporate a music icon what does it do really? Advice for your future iteration- 1. Add an alarm feature - for the battery going down by 20% 2. the colour combination could be a little better; it will up your game altogether.