Scopic UX Design Test Task.pdf
- 2. Product Info The was developed by to allow supervisors to coordinate project assignments for the employees, based on their skills, qualifications, and availability. Additionally, is used to coordinate internal trainings through a special module. An essential part of the tool is the Profile Module, where the employees input or edit their personal details. Assume for this task that Scopic Software is a client that wants to improve the usability of the tool. Resource Management Tool (RMT) Scopic RMT
- 3. Tasks Task 1: Prepare a list of questions about the tool that you would ask the client before suggesting UX/UI improvements. Task 2: Based on your review of the RMT app, provide specific recommendations to improve the usability of the Employee Profile section Task 3: Create your version of the two RMT tabs/pages of your choice
- 4. Defining My Role I am Atiqur Rahaman, with of work experience. I've designed for & many more companies helping them to grow. I turn business ideas into great products with an undying passion for delivering product designer 5 years Telenor, Robi, Dingi, SwissLife, Jwava, Zantrik, Wondered delightful user experiences. I spent working on the design process as part of my task given by Scopic and came up with proposed solution to improve the user experience in terms of usability, accessibiliy & aesthetics 3 days (5 hours)
- 5. Task 1 Prepare a list of questions about the tool that you would ask the client before suggesting UX/UI improvements. My Approach I explored & experienced the whole portal. As it is a web application, I gathered some questions which can help me through this entire project before starting it. 1
- 6. My Questions About This Tool Can you provide me the information and documentation do you currently have Are our users coming from specific age group Are there any special needs of the user I should be aware of when designing Are there any special needs of you I should be aware of when designing What kind of device do the users use What’s the number 1 priority task here Are there areas where the users get confused right now? What’s the biggest frustration with your current system What is the techhnology stack used here? Any kind of creative limitation due to this technology Is there any existing research data, analytics we can use How will we involve users during the design process?
- 7. Task 2 Based on the review of the RMT app, provide specific recommendations to improve the usability of the Employee Profile section My Approach I explored & experienced the whole portal. Through my UX Audit, I found several issues throughout the systeml. I listed them on the following pages regarding tabs order 2
- 8. General Recommendations 1. Ahh! Popup Modal! While logging in every time in the RMT portal, I encountered this pop right on my face. People treat popups as Ads most of the time. 70% of US users are annoyed by popup ads, and according to SearchEngineLand. In a specialized system like this, the popup can help me understand how the system works. But it will decrease the usability if we show this every time to the user. First of all, we can prioritize the contents here, which will be necessary for a 1st time user. In this process, I hope we can decrease the content size too. A button with the labelling “I got it, Don’t show me again” can serve the purpose. 1
- 9. General Recommendations 2. Is it stuck? or Loading? There is no visual clue while the portal is loading something. As a user, I also got confused with it. It is necessary to show the user what’s going on. Otherwise, it is easy to get confused. A “Progress bar” or “Loading Animation” can help to resolve this issue. 3. Missing Happy Path After cancelling the popup, you can see a banner saying, “ .... update your profile in Zoho People!”. So I need to open another tab in the browser to open Zoho People. A hyperlink of “Zoho People” can create a happy path for the user and make a smooth flow. 3
- 10. General Recommendations 4. Is it a tab or button? When I tried to go to the “Training Library” tab in my profile, it redirected me to “Training Library” in the 2nd option of the sidebar. It is not expected behaviour from a tab. Users will get confused easily. A button with perfect placement can help to remove this issue. 5. Accessibilty Issue The inactive tabs are suffering from “Accessibility Issue”. The contrast ratio between foreground & background is The number should be greater than to meet minimum accessibiliy of WebAIM. 2.16 : 1! 3 : 1 Raising the contrast between foreground & background 5 4
- 11. General Recommendations 6. What does this arrow do? There is an arrow in the existing sidebar. At first glance, it is very problematic for me to interpret what does this arrow do? After clicking, I got that it collapsed the whole sidebar. It’s confusing for the users. Proper placement with a better visual clue 7. Necessitiy of Bredcrumb I have visited the whole portal. If there are no new features apart from those, I don’t see the necessity of breadcrumb here. First of all, the breadcrumb isn’t interactable here. And It is not serving any essential purpose as there is no deeper path where the user can get lost. We can remove it 6 7
- 12. Tab 1 : Personal Details Recommendations There should be an individual view for viewing information. Input fields in preview mode create confusion. It gives the user false feedback of edit mode Gestalt Principles is violated in the section. It should be a different section with the table The table here isn’t self-evident. It isn’t evident to understand. There should be a design for the state. The button labelled with also creates confusion for the user. It should be labelled properly with helping text so that users can aware of the action of this butto Accessibility issue with contrast ratio in titles. The number should be greater than to meet the minimum accessibility of WebAIM. “Working Hours” “Empty Table” “+” (2.84: 1) 3: 1 1 2 4 4 4 4 3
- 13. Tab 2 : Skills Recommendations There are multiple violations of in the whole layout. It is cluttered with information that will be problematic for a user to process. It should be organized in a proper way maintaining principles The helping texts in the banners are small . It won’t be accessible to everyone. Proper size should be used to avoid this type of issue “Gestalt Principles” (11px) 2
- 14. Tab 2 : Skills Recommendations 3. Interaction in this tab is very complex. First, you need to check the specific skill groups. Then from the left bottom tab you need to search for the specific skills. There is a small icon before every icon presenting as a add button. It has been suffering from accessibility issue. After adding skills it apears in the right section. From there you can edit the skill & interest level. There is also another confused interaction of & . The whole skill adding interaction should be streamlined & simplied for the users “+” “Edit” “Save” 3
- 15. Tab 3 : Certifications Recommendations can be followed here to utilize unecessary spaces Tables can be improved visually to give more organized look which will be easy for users. “Gestalt Principles” 1 2
- 16. Tab 4 : Assets Recommendations can be followed here to utilize unecessary spaces Tables can be improved visually to give more organized look which will be easy for users. “Gestalt Principles” 1 2
- 17. Tab 5 : My Training Recommendations can be followed here to utilize unnecessary spaces Confusing placement of . It can be placed in a better position. “Gestalt Principles” “Instruction” 1 2
- 18. Tab 5 : My Training Recommendations 3. Filters can be arranged in a more optimized way. We can prioritize some filters. The rest of them can be kept in a . The drawer will pop up while clicking on the button. Right now, it’s taking too much focus than the table. 4. UX Copywriting can be better. is a more appropriate word than here 5. button represents the wrong symbol. Moreover, It is not necessary to keep the button visible in the default state. It needs to be visible after filtering. It serves two purposes. Seeing the button, users will know that this is a filtered state. Also, It implies the necessity of resetting by being visible. “Drawer” “Advanced Filters” “Filter” “Search” “Reset” “Reset” “Reset” 4 5 3
- 19. Tab 5 : My Training Recommendations 6. Accessibility issue with contrast ratio in titles. The number should be greater than to meet minimum accessibility of WebAIM. 7. Tables can be improved visually to give a more organized look which will be easy for users. (2.84: 1) 3: 1 6 6 6 6 6 6 7
- 20. Side Menu: Training Library Recommendations Filters are taking too much focus & necessary spaces. We can prioritize some filters. The rest of them can be kept in a . The drawer will pop up while clicking on the button. UX Copywriting can be better. is a more appropriate word than here It is not necessary to keep the button visible in the default state. It needs to be visible after filtering. It serves two purposes. Seeing the button, users will know that this is a filtered state. Also, It implies the necessity of resetting by being visible. “Drawer” “Advanced Filters” “Filter” “Search” “Reset” “Reset” 2 3 1
- 21. Side Menu: Training Library Recommendations 4. Too many columns make the table inaccessible to the users. First of all, the texts are too small to read, which will create a UX issue. Another part is so many columns in such a small space. Users can’t focus or find information properly. We can prioritize columns depending on their importance. We can hide other columns. Users can customize them depending on their needs. 5. We can make each row clickable rather than keeping it as an option in the Column. It is also wasting space (11.7px) “Options”
- 22. Task 3 Create my version of the two RMT tabs/pages of your choice. My Approach Based on my exploration & research, I started to work on the redesign. As I was given 2 pages (not the whole product) to redesign, I am starting with the wireframe phase. In this process I maintained brand guidlines & created design guidelines from them. I also crafted reusable component library & design tokens so that everything can be consistent 3
- 23. Wireframes I choose the & pages to redesign. In my opinion, they are the pages that mostly suffered from UX issues “Profile Info > Skills” “Training Library”
- 24. Creating Style Guidelines Colors As it is an in-house product of Scopic, I believe it should follow Scopic brand guidelines. So I explored the website & found some interesting thoughts. There are two colours widely used on their website. The is used primarily, and the is used for interactable elements. I also maintained the same philosophy here. “Blue Color” “Green Color” Scopic Blue #1F55BF Scopic Green #24B28A Black #001F3E Success #35DB95 Warning #FF8C4B Danger #FF5252 Figma Link
- 25. Creating Style Guidelines Typography Based on the exploration of Scopic website, I found they used as their main font. So I created style guidelines from it. “Inter” Figma Link
- 26. Crafting Reusable Components & Design Tokens Figma Link
- 27. UI Design : Skills Check Design File
- 28. UI Design: Training Library Check Design File
- 29. Addressing Pain Points : Skills Introduction of in the navbar to receive important announcement. Simple burger menu representing collapsable sidebar “Large title” with a small description to have an idea about the selected modules. “Notification” 1 2
- 30. Addressing Pain Points : Skills 3. Creation of happy path to for profile information update. 4. Improved representation of tabs with icons maintaining accessibility. 5. Positions are more simplified with better visualization “Zoho People” 4 5 3
- 31. Addressing Pain Points : Skills 6. A gobal has been introduced to improve usability. Some necessary filters have also been added 7. Inaccessible helping banners are converted into a modal. You can access them by pressing 8. Sorting functionality has been added to the table. It will auto update after any changes in & value “Search” “Need Help?” “Skill Level” “Interest Level” 6 7 8
- 32. Addressing Pain Points : Skills 9. The most important interaction of this section is . In the existing design, it is messed up badly, leaving users confused. I introduced a simple button, . After pressing, It will open all groups with search & multi selection functionalities. User can easily select the desired skills & add to the table “Add New Skill” “Add New Skill” 9 Check it in prototype
- 33. Addressing Pain Points : Training Library The whole UI was simplified with better usability. I also added functionalities like global & in the table. “Search” “Sorting”
- 34. Addressing Pain Points : Training Library 2. One of the most important issues of this section was so many filters. So I prioritize some of the filters & keep them with search. The rest of them are taken to a drawer which will open after clicking the option. It will help users to be more focused on the content. “Advanced Filter” Check it in prototype 2
- 35. Addressing Pain Points : Training Library 3. Another important issue is so many of columns. The texts were made so small in the previous design to adust all the columns on the screen. So I have come out with a different type of solution here. The columns will be customizable depending on users needs. There is a button named . After clicking this button, user can select which columns they want to see. If he selects more columns than the standard limit, the table will be horizontally scrollable & two arrows become active for better navigation. “Customized Coloumns” Check it in prototype 3 3
- 36. Thank You This is my approach to improve the user experience maintaing usability, accessibility & aesthetis for the RMT portal. It was fun working with problems hello@atiq.info