Ergonomics & Accessibility
SETTING UP THE WEBSITE
➢ CARD SORTING (Miro)
This technique enabled us to better prioritize information and discover the way our users group and name the different contents of web pages. This has helped us to define the sections of our site that correspond to the mental representations of our end-users.
Our aim in doing this is to make it easier to use the interface and locate content on our website.
➢ ARBORESCENCE (Gloomaps )
After sorting all the content we want to include in the site, then group all the content into pages. In the main navigation bar:
These pages are structured to make navigation logical and intuitive. We’ve created logical groupings that make it easier for users to navigate their way around the site.
ZONING / WIREFRAMING / MOCKUP
➢ ZONING
Zoning plays a crucial role in the design of the main pages of a future website. Presented in the form of simple diagrams, it identifies the location of key elements of the web page template, such as the menu, logo, visuals, sidebar and footer. In essence, it serves as the basic structure on which the site’s content (the “organs”) and graphics (the “skin”) will be added. In the context of a website redesign, zoning comes after the definition of the tree structure and before the creation of graphic models.
➢ WIREFRAMING
In the User-Centered Design process, wireframes play a crucial role at the onset of the design phase. Just as an architect begins by drafting the blueprint of a building and determining the layout of various rooms before delving into interior design details, wireframe designers in the realm of mobile and web app design visualize the foundational skeleton of the digital application.
➢ MOCK UP
Mockups play a pivotal role in the design thinking process by addressing essential visual queries, such as layout, color schemes, and hierarchy. They empower designers to commence high-fidelity prototyping.
Furthermore, mockups serve as a visual guide for engineers at the onset of the development phase. Utilizing Spec Mode in UXPin, developers can scrutinize aspects like sizing, spacing, grid structures, color palettes, and typography in each mockup.
Mockups offer several advantages:
- Informed Stakeholder Feedback: Their heightened fidelity requires less explanation compared to low-fidelity wireframes and sketches, offering stakeholders a precise depiction of the final product.
- Realistic Evaluation: Mockups unveil nuances that may not have been apparent during low-fidelity wireframing, such as accessibility concerns, suboptimal color choices, or layout intricacies.
- Adaptability: Adjustments to a UI mockup are more manageable using design tools than editing code. When designers operate within a design system or UI component library, modifications involve simple tasks like swapping components or rearranging layouts.
USER TESTING AND FEEDBACK
➢ A/B TESTING (WordPress & Google Optimize)
1. My completed tasks
➢ HEATMAP & FEEDBACK (WordPress, Hotjar & Excel)
