Problem - 1

Most of the user find difficulty in answering the question based on the condition

Ideation

Brainstorming

1) Technical recommendation :

Dynamically display questions


2) Business process related:

Revisit question list and update to latest
process


3) User perspective suggestions:

  • Do not want to see unwanted questions,

  • Avoid typing questions,

  • To see recommended suggestions/next steps to customer/user

Outcome

  1. Use condition based question/forms

  2. Enables user views question/forms related to previous response


Benefits

  1. Reduces user's cognitive energy

  2. Avoids user referring to documents for next question

  3. Reduces screen clutter and visual noise

  4. Reduces time spent for form completion

  5. Reduces back and forth navigation

Starting the design

  1. Collected documents and manuals of different branches of the questions and relevant fields

  2. Collaborated with Business SME for conceptual knowledge

  3. Created flow diagram along with Business Analyst and walked through with stakeholder for updates/confirmation


Wireframes

Created mockups using Sketch

Wireframes - Desktop

Usability study findings

Conducted usability testing with the mockup using focussed group at the initial stage for user perspective and business perspective five feedback.

User Feedback

  1. User expressed non clarity on the statements/questions

  2. User wants to view group of related questions than viewing one by one so that they can comprehend the details to the customer

Method

  1. Remote Testing

  2. Moderated

  3. Invision - collaborative tool



Next iteration

Based on the user feedback and observations from the usability findings

1) Questions and statements were revisited and rephrased.

2) Categorized the question together

Accessibility considerations

1. Color contrast

The choice of color combinations are aligned with WCAG color contrast ratio this enables the users who are vision impaired partially to read the content


2. Screen readers

All icons and images contains alt-text to enable the vision impaired user understand the content through on screen readers


3. Navigation

Used icons for better navigation and detailed pictures for visual representation of the cakes