UI Issues

[minhnimble]

It is interesting to see you made certain choices for the UI implementations and actually you went overboard to implement the survey screen in full details while it is not a part of this challenge requirements. Now, there are still some noticeable issues with your current implementation that I would like to list them down as follow:

• On the Splash screen:

  • There are weird leading and trailing white spaces appear on the splash screen when first opening the app on small screen devices (iPhone 5/SE, etc.).

• On the Login screen:

  1. The keyboard actually covers the Login button and a small portion of the Password textfield on small screen devices (iPhone 5/SE, etc.) and make it hard for users to input their credentials in one go. What do you think about handling to automatically scroll to move the textfields up whenever the keyboard is active?
  2. The corner radius of the Email and Password textfields seems to be off-design a little bit and it makes the textfields a bit more square-ish comparing to the original design.
  3. There is no right padding for the Forgot? button in the right of the Password textfield.
  4. When providing an invalid email string into the Email textfield, the login API still gets called and it always results in an unauthorized error message. What is your opinion on checking for correct email format here as well?
  5. When providing an empty value only for either Email textfield or Password textfield, the error always prompt to enter both. Do you think it is worth checking them independently?
  6. The loading indicator's text is hard to see and we can still interact (typing, clicking on buttons, etc.) while the loading indicator is showing. This issue can be seen easily in a slow network condition when the loading indicator has to be shown for an extended period of time.
  7. The current status bar color is hard to see with the dark navigation bar and dark content below.
  8. I notice that right now when we input incorrect credentials, the loading just ends without showing any error message to the user. What is your opinion on showing another generic API error message instead of just failing silently? 🙏

• On the Forgot Password screen:

  1. The keyboard again covers a small portion of the Email textfield on small screen devices (iPhone 5/SE, etc.) and make it hard for users to see their input on the Forgot Email textfield. What do you think about applying the same automatically scroll to move the textfield up whenever the keyboard is active here?
  2. The corner radius of the Email textfield again seems to be off-design a little bit and it makes the textfield a bit more square-ish comparing to the original design.
  3. When providing an invalid email string into the Email textfield, the forgot password API still gets called and when the call completes, user will be sent directly back to the Login screen. This actually makes the user feel a bit disruptive and there is no information on whether I have successfully requested for a new password or not. What would you do in this case to improve the user experience?

• On the Surveys List screen:

  1. Tapping on the page control will only update the page indicator highlight, not the corresponding survey displaying content.
  2. The initial shimmer loading indicator doesn't match with the design and there are weird texts appear on the shimmer loading indicator.
  3. The avatar in the top right corner disappears when the surveys list loads successfully.
  4. The display image for each survey item is very blurry. Can we update to use a high-quality version for the images?
  5. When swiping to the right, the app shows a new survey item in a fade in/fade out manner but this creates a weird UX experience that the user actually expects a horizontal transition when swiping left or right. What do you think about this problem?
  6. I think we could add some dark overlay over the image in order to make text more legible because in brighter background images, we would not be able to see the text clearly as texts are in white. What do you think? 🤔

[teerox]

I totally agree with you, on all comments, i will address them accordingly.

1. on the keyboard covering the password field, i intend to use the IQKeyboardManager library to handle that, or using Notification to listen to keyboard being active and pulling the screen upward to the rightful position.

2. I think i must have forgot to add this to the fields because i already had an UIView extension that adds corner radius

3. I couldn't add right padding, my implantation refuse to add right padding to the forgot password, i had use a hack which is to give extra small space after the after the forgot password like "Forgot ". as a temporary fix😁

   4. I have an algorithm that checks for valid email somewhere but my brain must have failed me not to remember using it🙈 and i was trying as much as possible to avoid using external libraries cos some can be unreliable.
   5. Yes i can check them independently, just trying to speed up development, to be able to cover as much task as required.
   6. Yea, i should have perform the loading on the main thread to freeze it, so that user doesn't perform any action while loading is happening
   7. Really cant explain this issue thou.
   8. For this, i didn't test but my i made sure my network module returns a message for any failed api call. i know if i tested this scenario i would have fixed it.

Survey Screen

1. Yea, on this i should have implemented something like this @IBAction func pageControltapped(_ sender: Any) { guard let pageControl = sender as? UIPageControl else { return } let selectedPage = pageControl.currentPage } but in all trying to use the data the endpoint provided was really a huge task, cos i had to understand to the best of my knowledge and since this is a test i just had to do the best i can for now. but i know i would have done better with my implementation

2. on the shimmer loader, my possible solution was to add corner radius to the views, the wired test showing was actually hard coded.. i made sure to remove all hard coded text.

3. That avatar not loading is because the url that returns the user avatar that is the user profile endpoint returns a url that doesn't load and my possible fix would have been to have the design avatar as a fall back plan if the the network call for loading image fails

4. For this, i only had to use the images returned by the url, and then set it to aspect fill, just so the image fills the screen with out losing quality.

5. on this, yea. i could do better using the horizontal transition which i update implement from the Animation method

6. Yea, i totally agree with you.

In Summary, I know i could do better. this was really tasking and trying to combine the task and my current job literally didn't give me a break. Atleast the new things i learnt from the task was using animations and double tasking.

[minhnimble]

It is great to see your quick responses 🤗 Regarding your comments, I would like to follow up with them as below:

on the keyboard covering the password field, i intend to use the IQKeyboardManager library to handle that, or using Notification to listen to keyboard being active and pulling the screen upward to the rightful position.

IQKeyboardManager is actually a good choice for solving this problem. Can't wait to see it in action 👍

I couldn't add right padding, my implantation refuse to add right padding to the forgot password, i had use a hack which is to give extra small space after the after the forgot password like "Forgot ". as a temporary fix😁

Hmm do you know if there is any better way to do this that we can still keep the trailing constraint of the button to the textfield's trailing and increase the spacing without having to add a space in the text?

Yes i can check them independently, just trying to speed up development, to be able to cover as much task as required.

Oh I understand now. As of this point I would like to know you thoughts on how you would balance the delivery and the quality of a product? Do you favor delivery more over quality or vice versa? and why?

Yea, i should have perform the loading on the main thread to freeze it, so that user doesn't perform any action while loading is happening

Interesting point, so just to confirm the technique you would use to prevent user interactions is to perform the loading on the main thread, right? but isn't the loading indicator already performed on main thread? Or do you mean we need to call the Login API on the main thread to freeze it?

For this, i didn't test but my i made sure my network module returns a message for any failed api call. i know if i tested this scenario i would have fixed it.

No worries, for this point I just want to know further your opinion on the matter, as I can see that you already has some basic error checks when calling an API already. 👍

Yea, on this i should have implemented something like this @IBAction func pageControltapped(_ sender: Any) { guard let pageControl = sender as? UIPageControl else { return } let selectedPage = pageControl.currentPage } but in all trying to use the data the endpoint provided was really a huge task, cos i had to understand to the best of my knowledge and since this is a test i just had to do the best i can for now. but i know i would have done better with my implementation

Nice response, it seems you know what needs to be done. Looking forward to seeing your fix for this problem. 💪

That avatar not loading is because the url that returns the user avatar that is the user profile endpoint returns a url that doesn't load and my possible fix would have been to have the design avatar as a fall back plan if the the network call for loading image fails

Sounds like a valid solution to me. 👌

For this, i only had to use the images returned by the url, and then set it to aspect fill, just so the image fills the screen with out losing quality.

Actually, maybe you missed some information from the Postman API documents that you can get the high-res version of an image by just appending “l” to the image URL obtained in the API response. Can we apply that for better image quality?