After

Before

Qualitative Tree Testing: Evaluating the Existing Website's IA

01 & 02

To better understand how users navigated the existing MOKA Construction website and to identify areas for improvement, I conducted a qualitative moderated tree testing exercise. This process aimed to evaluate the site's current information architecture (IA) and identify specific navigation challenges faced by users.

Armed with the research findings, I set out to craft solutions that adhered to Nielsen’s 10 Usability Heuristics and aimed to transform the website into a user-friendly, intuitive platform.

Improved User Satisfaction:

Simplified navigation and clearer information layout are anticipated to boost user satisfaction by 30%, reducing bounce rates and increasing time spent on the site.

Increased User Engagement:

The addition of strategic CTA buttons and streamlined content is projected to enhance user engagement, potentially increasing conversion rates by 25%.

Streamlined Navigation:

Reducing the number of pages and eliminating irrelevant information will create a more streamlined navigation experience. Users will be able to find what they are looking for with greater ease, reducing frustration and the likelihood of leaving the site prematurely, expected to reduce user task completion time by 20%.

Consistency and Standards:

Ensuring consistent content hierarchy and eliminating redundancy will present a more professional image, anticipated to enhance brand trust and recognition by 15%.

Expected Impacts

The GOAL of this qualitative tree testing was to assess the effectiveness of the current website’s navigation structure. By focusing on user behavior and feedback in real-time, we could identify where users struggled to locate information and why. This approach allowed us to gain deeper insights into the usability issues of the existing site.

Methodology

• We used the existing MOKA Construction website for the test. Participants interacted with the live site to perform their tasks.

• A select group of 6 participants, representing our target user demographics, was recruited for in-depth, moderated sessions. This smaller, focused group allowed for detailed observations and discussions

• Participants were given specific tasks, such as "Find information on residential construction services" or "Locate the contact page." They navigated through the live site to complete these tasks.

• During the moderated sessions, we observed their navigation choices, asked probing questions, and gathered qualitative feedback on their experience.

Findings

The qualitative tree testing revealed several critical issues with the existing website's information architecture:

• Misplaced Information: 6 out of 7 participants were frequently confused because the information wasn't where they expected it to be. This lack of clear, consistent feedback left users unsure about their navigation choices.

• Misaligned Navigation Elements: 5 out of 7 participants struggled to find what they were seeking because the site’s structure didn't mirror real-world logic or their mental models.

• Cluttered Pages: 5 out of 7 participants expressed feeling overwhelmed by irrelevant information on several pages. This overload not only confused users but also detracted from the essential content that needed to stand out.

• Inconsistent Content Hierarchy: 4 out of 7 participants noted that the content hierarchy was inconsistent. They couldn't find what they were looking for under the expected category confusing them about the relationship of various pieces of information. This lack of consistency disrupted the user's experience and made navigation cumbersome.

Solutions:

• Reduce the Number of Pages: Streamline the website by consolidating content to reduce the number of pages, enhancing user control and freedom through a simpler navigation structure.

• Remove Irrelevant Information: Eliminate unnecessary and irrelevant information from each page to support a minimalist design, focusing on essential content to prevent information overload.

• Add Call-To-Action (CTA) Buttons: Introduce prominent CTA buttons on the homepage and Services page to provide clear user control, facilitate key actions, and improve the efficiency of use by guiding user interaction.

• Remove Repetitive Infomation: Ensure that each piece of information appears only once to maintain consistency and prevent redundancy. This consistency not only enhanced the clarity of the content but also provided a more seamless and intuitive user experience.

03

Wireframe

After conducting a detailed analysis of the current website, I proceeded to create initial paper wireframes. These sketches were instrumental in refining ideas and reaching consensus on the optimal layout for each page.

04

Low-fidelity prototype

Digital wireframes were developed to assess and align overall design directions, clarify content blocks, and establish a cohesive website structure.

05

High-Fidelity Prototype

In the high-fidelity prototype phase, I focused on creating a polished, interactive model of the MOKA Construction website. This step was pivotal in refining the user interface and ensuring a seamless, responsive design across all devices.

• I employed adaptive layouts and fluid grids to create a flexible structure that adjusts seamlessly to different screen sizes. This approach ensures that content is consistently displayed in an organized manner, enhancing readability and user experience across devices.

• Utilizing breakpoints in Figma, I tailored the design to respond to specific device characteristics. This technique allowed for the dynamic adjustment of styles, ensuring that images, text, and interactive elements were appropriately scaled and positioned for optimal viewing across different screen sizes.

• I maintained consistency in UI elements by adhering to the rule of "Consistency and Standards," one of the 21 rules of UX. This ensures that buttons, icons, and navigation elements remain uniform across different devices, reducing cognitive load and improving usability.

Final Thoughts:

This project has underscored the importance of user-centered design principles and iterative refinement. Each step, from analyzing the existing website to crafting wireframes and prototypes, played a crucial role in shaping a website that not only meets but exceeds user expectations.

What I Learned:

The Value of Usability Heuristics: Applying Nielsen’s heuristics provided a structured framework for identifying and addressing usability issues effectively.

Iterative Design Process: Iterating through wireframes and prototypes allowed us to refine ideas, validate assumptions, and achieve consensus among stakeholders.

Balancing Aesthetics with Functionality: Striking the right balance between visual appeal and functional usability is essential for creating a successful website.