Starter Kit: UI/UX Design Refresh

[Sabine-Justilien]

Background on the problem the feature will solve/improved user experience

A design refresh involves style updates that don’t impact the underlying structure or functionality of the interface. Think updated font stacks, revised color palettes, or a new style direction for supporting assets. These types of changes breathe new life while still maintaining familiarity to users. 

Describe the solution you'd like

Develop a plan to give the website a facelift to modernize the look and feel and functionality of the website, with attention to accessibility. There are many examples of opensource systems you can use around user experience and interaction design. Many CFCFRJ solutions use IBM's Carbon Design System which follow the IBM Accessibility Checklist based on WCAG AA, Section 508, and European standards. You can investigate other design options here.

Tasks

• [ ] Conduct Design Thinking Session to brainstorm wireframes
• [ ] Design new wireframes: Develop wireframes that represent the experience and clickthroughs to achieve the tasks already implemented on the site. Not all changes need to be high fidelity - hand drawn or design software like Figma can suffice as a representation of the experience. Alternately to a complete design change you can benchmark with smaller releases that can be tested with future user groups and receive ample opportunity to warm your audience to upcoming changes, gauge initial reactions, and gives greater leeway for addressing issues as they arise.
• [ ] Conduct user testing sessions with your wireframes to gather user feedback and improve design (recruit your fellow members!)
• [ ] refine wireframes
• [ ] discuss proposals with Legit-Info team for next steps

References

• Developers: Get project running locally
• Non-developers: Review current UI with your dev team or view this older version: https://legit-info-app.7p7tcbyw0n2.us-south.codeengine.appdomain.cloud/

Acceptance Criteria

• The website should reflect a more modernized application that allows for visitors to accomplish at least the same functionalities as before, but more intuitively and with delight.

• The app should also reflect Level 1 accessibility guidelines based on the IBM Equal Access Toolkit

Read more about Accessibility Testing #133

[github-actions[bot]]

Thank you so much for contributing to our work!

[github-actions[bot]]

:wave: Hi! This issue has been marked stale due to inactivity. If no further activity occurs, it will automatically be closed.

[demilolu]

active issue

[github-actions[bot]]

:wave: Hi! This issue has been marked stale due to inactivity. If no further activity occurs, it will automatically be closed.

[upkarlidder]

Reopening. @demilolu to add the assets to this issue.

[github-actions[bot]]

:wave: Hi! This issue has been marked stale due to inactivity. If no further activity occurs, it will automatically be closed.