SlideShare a Scribd company logo

Scopic UX Design Test Task.pdf

Design task that I prepared for Scopic

1 of 36
Download to read offline
UX Design

Test Task
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
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
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)
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
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?

Recommended

Design System in Figma A to Z.pdf
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdfAtiqur Rahaman
 
Figma Prototype A to Z.pdf
Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdfAtiqur Rahaman
 
Design Token & Figma Variables.pdf
Design Token & Figma Variables.pdfDesign Token & Figma Variables.pdf
Design Token & Figma Variables.pdfAtiqur Rahaman
 
Tutubi Design Assigments.pdf
Tutubi Design Assigments.pdfTutubi Design Assigments.pdf
Tutubi Design Assigments.pdfAtiqur Rahaman
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Designeggcellent
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic DesignVani Jain
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX Murali Krishna
 

More Related Content

What's hot

User experience. What is it anyway?
User experience. What is it anyway?User experience. What is it anyway?
User experience. What is it anyway?Marilyn Langfeld
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design Systemuxpin
 
Evaluation techniques in HCI
Evaluation techniques in HCIEvaluation techniques in HCI
Evaluation techniques in HCIsawsan slii
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX IntroductionPhuong Hoang Vu
 
HCI 3e - Ch 2: The computer
HCI 3e - Ch 2:  The computerHCI 3e - Ch 2:  The computer
HCI 3e - Ch 2: The computerAlan Dix
 
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUModule 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUSachin Gowda
 
Bringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototypingBringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototypingService Design Berlin
 
Introduction to adobe experience manager
Introduction to adobe experience managerIntroduction to adobe experience manager
Introduction to adobe experience managerNetCom Learning
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Processuxpin
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)Elida Arrizza
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To WireframingLewis Lin 🦊
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design GDGKuwaitGoogleDevel
 
Evaluation in hci
Evaluation in hciEvaluation in hci
Evaluation in hcisajid rao
 
Uncertainty as a Business and Design Tool - Morgenbooster
Uncertainty as a Business and Design Tool - MorgenboosterUncertainty as a Business and Design Tool - Morgenbooster
Uncertainty as a Business and Design Tool - Morgenbooster1508 A/S
 

What's hot (20)

User experience. What is it anyway?
User experience. What is it anyway?User experience. What is it anyway?
User experience. What is it anyway?
 
Prototyping in Figma
Prototyping in FigmaPrototyping in Figma
Prototyping in Figma
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
UX Bootcamp
UX BootcampUX Bootcamp
UX Bootcamp
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design System
 
Evaluation techniques in HCI
Evaluation techniques in HCIEvaluation techniques in HCI
Evaluation techniques in HCI
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 
HCI 3e - Ch 2: The computer
HCI 3e - Ch 2:  The computerHCI 3e - Ch 2:  The computer
HCI 3e - Ch 2: The computer
 
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUModule 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
 
Bringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototypingBringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototyping
 
Introduction to adobe experience manager
Introduction to adobe experience managerIntroduction to adobe experience manager
Introduction to adobe experience manager
 
UX design
UX designUX design
UX design
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
 
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UX Explained
UX ExplainedUX Explained
UX Explained
 
Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
 
Evaluation in hci
Evaluation in hciEvaluation in hci
Evaluation in hci
 
Uncertainty as a Business and Design Tool - Morgenbooster
Uncertainty as a Business and Design Tool - MorgenboosterUncertainty as a Business and Design Tool - Morgenbooster
Uncertainty as a Business and Design Tool - Morgenbooster
 

Similar to Scopic UX Design Test Task.pdf

Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessibleRuss Weakley
 
Clinical Application Usability analysis report
Clinical Application Usability analysis reportClinical Application Usability analysis report
Clinical Application Usability analysis reportguest2cff55a
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an ExorcismCrystal Beasley
 
Clinical Application Usabilityreport V04
Clinical Application Usabilityreport V04Clinical Application Usabilityreport V04
Clinical Application Usabilityreport V04Subhasish Karmakar
 
Amazon research memo
Amazon research memoAmazon research memo
Amazon research memoBrett Combs
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluationjanine Risk
 
Newbie UX: Something I learned about UX (Business vs Design)
Newbie UX: Something I learned about UX (Business vs Design)Newbie UX: Something I learned about UX (Business vs Design)
Newbie UX: Something I learned about UX (Business vs Design)Soon-Aik Chiew
 
Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceSSW
 
Intro to user experience design
Intro to user experience designIntro to user experience design
Intro to user experience designyaluna
 
Design Of User Interface Design Essay
Design Of User Interface Design EssayDesign Of User Interface Design Essay
Design Of User Interface Design EssayAlicia Johnson
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestringteaguese
 
Web usability a complete list of ux ui best practices
Web usability a complete list of ux ui best practicesWeb usability a complete list of ux ui best practices
Web usability a complete list of ux ui best practicesOlatunji Adetunji
 
Streamlining the Client's Workflows (in Joomla)
Streamlining the Client's Workflows (in Joomla)Streamlining the Client's Workflows (in Joomla)
Streamlining the Client's Workflows (in Joomla)Randy Carey
 
An Introduction to Usability
An Introduction to UsabilityAn Introduction to Usability
An Introduction to Usabilitydirk.swart
 
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8SSW
 

Similar to Scopic UX Design Test Task.pdf (20)

Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessible
 
Usability and UX
Usability and UXUsability and UX
Usability and UX
 
Clinical Application Usability analysis report
Clinical Application Usability analysis reportClinical Application Usability analysis report
Clinical Application Usability analysis report
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
Clinical Application Usabilityreport V04
Clinical Application Usabilityreport V04Clinical Application Usabilityreport V04
Clinical Application Usabilityreport V04
 
Document to the Question
Document to the QuestionDocument to the Question
Document to the Question
 
Amazon research memo
Amazon research memoAmazon research memo
Amazon research memo
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluation
 
Newbie UX: Something I learned about UX (Business vs Design)
Newbie UX: Something I learned about UX (Business vs Design)Newbie UX: Something I learned about UX (Business vs Design)
Newbie UX: Something I learned about UX (Business vs Design)
 
Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
 
Intro to user experience design
Intro to user experience designIntro to user experience design
Intro to user experience design
 
Design Of User Interface Design Essay
Design Of User Interface Design EssayDesign Of User Interface Design Essay
Design Of User Interface Design Essay
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
Web usability a complete list of ux ui best practices
Web usability a complete list of ux ui best practicesWeb usability a complete list of ux ui best practices
Web usability a complete list of ux ui best practices
 
Streamlining the Client's Workflows (in Joomla)
Streamlining the Client's Workflows (in Joomla)Streamlining the Client's Workflows (in Joomla)
Streamlining the Client's Workflows (in Joomla)
 
Thesis
ThesisThesis
Thesis
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
An Introduction to Usability
An Introduction to UsabilityAn Introduction to Usability
An Introduction to Usability
 
Templates.pptx
Templates.pptxTemplates.pptx
Templates.pptx
 
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
 

Recently uploaded

acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.JIT KUMAR GUPTA
 
Copy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffffCopy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffffschell
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxRawalRafiqLeghari
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptAr. TANIA BERA
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and OptionsJIT KUMAR GUPTA
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revampvidya934261
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRSurfaced - Designs By Meera Narula
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfUla Academics
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdfSanjivanisShirodkar
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfLizShek
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxTafshirul Alam
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...JIT KUMAR GUPTA
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfLizShek
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfLizShek
 
MidJourney: How to Prompt on Midjourney and Other AI Tools for Creatives
MidJourney: How to Prompt on Midjourney and Other AI Tools for CreativesMidJourney: How to Prompt on Midjourney and Other AI Tools for Creatives
MidJourney: How to Prompt on Midjourney and Other AI Tools for CreativesSaurav Srivastava
 

Recently uploaded (20)

acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.
 
Maximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap DesignMaximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap Design
 
Copy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffffCopy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffff
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptx
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and Options
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamp
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCR
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdf
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdf
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdf
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptx
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdf
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdf
 
MidJourney: How to Prompt on Midjourney and Other AI Tools for Creatives
MidJourney: How to Prompt on Midjourney and Other AI Tools for CreativesMidJourney: How to Prompt on Midjourney and Other AI Tools for Creatives
MidJourney: How to Prompt on Midjourney and Other AI Tools for Creatives
 

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