Suggestion on UI/UX Enhancements

[ShreyashiSoni]

Hi all, as per our discussion, updating the UI/UX modifications for the SARAL App (Assessment Use Case Only) to ease out end user (Teacher) experience.

1. Login Screen
Pain Point:

• As a user after logging in, 'Get started' button is not instinctively the next step, which creates a sense of confusion.

Recommendations:

• After login 'Get Started' screen should be replaced with 'Modules' screen, where user can select the 'Use Case' he/she is using the App for.
• After selecting 'Module' user will be directed to 'Fill Exam Details' screen, which will help them instinctively get started with the use case (As per current use case only Assessments)
• Configurable Logo, Configurable Color should be enabled.
• On the Login screen, 'SARAL' App name should be added.

Please refer to attached slide no. 1 & 2

2. Fill Exam Details Screen
Pain Points:

• User was not able to select all subjects, for which the assessment was happening (Limit to only one subject selection)
• Vocabulary Hygiene

Recommendations:

• Write 'School Name' Instead of 'school'
• Remove 'School ID'
• While selecting class nomenclature should be only numeric for example 1,2,3 etc.
• Enable subjects a combination of subjects based on class for which the assessment is happening
• Write 'Paper Set' instead of 'Set'

Please refer to attached slide no. 3

3. Mark Attendance Screen
Pain Points:

• As a user, 'mark as absent' or 'mark as present' is not very clearly portraying that all the students are 'Present' by default.
• As a user, scrolling through the long list of students is time taking and tiring (It would be good, if more number of students can be seen on the mobile screen in a single go)
• As a user, after selecting exam details, I should be able to see that information on top, while marking attendance to find any discrepancy/mistake easily.

Recommendations

• Simplify the list view of the students for marking attendance
• Add 'School Name', 'Class' and 'Subject' to left hand corner of screen
• Add Toggle for marking present absent (By default all students to be present)
• Add screen heading 'Mark Attendance'

Please refer to attached slide no. 4

4. Home Screen or Summary Page
Pain Points:

• As a user it is confusing for me to go to next screen for scanning, after marking attendance (Extra step)
• As a user Having two buttons 'Ongoing scan' and 'Scan' is confusing as to which button to use.
• As a user, it was very difficult to find 'Scan' button when using the app first time.
• As a user it is very difficult to keep track of 'Total scanned sheets' and 'Total saved sheets'
• As a user nomenclature of many functionalities are confusing 'Scan Status in summary table', 'Scan status button', 'Dashboard button', 'Ongoing scan button' etc.

Recommendations:

• Remove in between screen with 'Continue Scan' button
• Remove 'Ongoing Scan' button from home screen
• Make scan icon Big and Visible
• Remove 'Exam Type', 'Exam ID', 'Exam Details' from the table
• Remove 'Dashboard' button from the main screen
• Change 'Scan status' button to 'Review Scans' Button
• Change nomenclature as per the below given prototype wherever applicable

Please refer to attached slide no. 5 & 6

5. During scan messages
Pain Point:

• As a user it is difficult to read and follow the pop up messages.

Recommendations:
-Make pop up messages more visible by adding a background behind the text

Please refer to attached slide no. 7

6. Edit and submit scan screen
Pain Point:

• As a user, I cannot find any functionality of 'Tag' Column, as what should I do with it or what information it will hold.

Recommendations:

• Remove 'tags' column
• Remove 'S.No.' column
• Replace 'Question 1' nomenclature to '1'

Please refer to attached slide no. 8

7. Review Scans screen
Pain Points:

• As a user, scrolling through the long list of students is time taking and tiring (It would be good, if more number of students can be seen on the mobile screen in a single go)

Recommendation:

• Make review option simple with the list view

Please refer to the attached slide no. 9

8. Reviewing a particular scan
Pain Point:

• As a user I have to go back to home screen to re-scan and overwrite a particular OMR sheet, if after reviewing I don't find it satisfactory.

Recommendations:

• Remove 'tag' column
• Add Re-scan functionality incase of some discrepancy, Add 'Re-Scan' button next to 'Close Button'

Please refer to attached slide no. 10

9. User Profile Button
Pain Point:
As a user the given options are very confusing, and not clearly understandable what is the functionality.

Recommendations:

• Add 'Dashboard' in the profile list
• Review and remove extra options if any in the dropdown.

Please refer to attached slide no. 11

Please review above proposed changes and let me know your thoughts for same.
I am also attaching the link to FIGMA file of the created prototypes for better clarity
FIGMA SARAL: Link

[ShreyashiSoni]

@dileep-gadiraju @surendrasinghs

[karsood]

Thank you for this detailed post. Truly appreciate it.
I have a questions on some of the pieces that I am sharing below:

1. Saral is not only for assessments. How will the backend identify what saral app will be used for before logging in? What would be the advantage of having this?
2. Why have Subject 1 and Subject 2? What is the use case?
3. Why should 'support' and 'clear user cache' be removed? Where will it be available instead?

[harish-challa]

@ShreyashiSoni Can you please address the above questions. We need a little more details on why these changes i.e subject1 , subject 2 etc.

We have same list of questions as tried to create user stories.

[ShreyashiSoni]

1. Correct Karan! In case one state is using SARAL for more than one use case, we can add one more screen with option of choosing the use case or enable use case as per login credentials (Teacher, officer etc.). In such case only 'SARAL' will be shown on the front screen, not the use case.
2. Subject 1 and subject 2 was because there are two subjects which gets assessed in the same question paper. This functionality can also be as 'Select Subject', Add subject + (In case there are more than one subjects)
3. Need to understand the use of 'Support', 'Help', 'Clear user cache', 'Clear all user cache' for the user and then we can take a call. keep these extra options with an 'Arrow' to expand the list.

Thanks!

[harish-challa]

@ShreyashiSoni also dynamic tagging is enabled from backend, if we disable it from backend, there is no reason to remove from frontend. We can use that option. please check this link : https://saral.sunbird.org/learn/features/dynamic-tagging

[ShreyashiSoni]

Hi! I have updated the discussion thread, based on suggestions and discussions. Thanks!

[navin9584]

hi @ShreyashiSoni for point number 3

[navin9584]

hi Shreyashi,
Can you also confirm that we can go with this design of present/absent switch

[harish-challa]

@karsood @surendrasinghs Adding parent name field, we need to make corresponding backend change as well. Will this be helpful showing in the app?

[ShreyashiSoni]

Hi @navin9584 I am okay with the design of present/absent @karsood @surendrasinghs please share your views.

[ShreyashiSoni]

@karsood @surendrasinghs Adding parent name field, we need to make corresponding backend change as well. Will this be helpful showing in the app?

Hi Harish, to make it easy for the teacher to identify the student in case both of the student name is same. It is essential to add parent name as an additional information for verification. As currently in the case of UP, Student ID is not something from which teacher identify student. Also, the detail was there in the previous version when the App was used on ground.

[ShreyashiSoni]

HI Shreyashi,

Will adding 1 and 2 increase API calls made?

Hi @harish-challa Can you answer this? Will it increase API Calls as well as the time for fetching this information while using online and offline (Downloading master data) or since all of the details are getting fetched from the same database, the efforts are similar. Thanks!

[ShreyashiSoni]

@harish-challa @navin9584 Please make sure you are using Figma link to do enhancements, as you can see in detail what are the changes, font type, size etc. Let me know if you need any help.

[navin9584]

hi @ShreyashiSoni i have some query

1. can you plz mail me all images/icon related ui/ux changes

for point screen 5 : The size of the text above the camera cannot be changed, if increased, the text will go out of the mobile screen.
Can change text color if you want plz suggest

thankyou

[ShreyashiSoni]

Hi Navin, sharing.

For Point 5 Screen: The text size is okay! I will share a sample pop up message with you over email. Thanks!