Design Principles

We first defined the following design principles to guide the creation of our user interface:

Simplicity and Clarity

The interface should be intuitive and minimalistic with clear visual cues that do not confuse the user. For example, labels, icons, and tooltips should be used to provide unambiguous explanations. A clutter-free design ensures users can process information quickly without being overwhelmed, enhancing their overall user experience.

Feedback

The design should provide the user with feedback, including immediate responses to their actions and important messages—such as errors, confirmations, or system states—should be displayed clearly at the right time. This will ensure the user has a seamless experience and reduces any confusion.

Consistency

The UI should follow common design patterns so users can intuitively understand how to interact with it. Consistent placement of navigation elements, buttons, and actions ensures predictability and will help remove any potential confusion. Standard conventions, for example left-side navigation and top-right user settings, should be maintained where applicable.

Familiarity

Familiarity reduces the learning curve, and so our design should use terminology and conventions that are familiar to the user, and not those creating the system. Our extension should adhere to VS Code’s UX guidelines in order to follow the best practices for creating extensions that seamlessly integrate with VS Code's native interface and patterns. By employing familiar conventions, users can quickly understand and navigate the extension without needing extensive onboarding. This ensures a smoother user experience, allowing them to focus on their tasks rather than learning a new interface.

Visibility, Readability and Accessibility

All features in our design should be easily accessible to users. Essential features, statuses, and options should be prominent and easily accessible, and users should not have to search for crucial actions. The UI should be designed with sufficient contrast to ensure readability for all users, including those with visual impairments. Text should also be readable across different screen sizes, with reasonable font colour and style choices. Colours in the UI should be chosen carefully to highlight essential elements without causing strain.

Action-Oriented Design

Action-orientated design will ensure our design is user-centred by prioritising active user engagement. To do this, the design should clearly indicate possible actions by leveraging affordances (what users can do) and signifiers (cues that guide them). This will help users intuitively navigate and interact with the system, reducing confusion and enhancing usability.

Structured Information Flow

The interface should present the most relevant information first, revealing additional details only when needed. This approach minimises cognitive overload and helps users focus on key actions. By structuring content with a clear emphasis on importance, the design ensures a smooth and intuitive user experience.

Sketches

Based on our gathering user requirements, research, persona and scenarios, we created sketches using our design principles to visualise the layout and design of our tool.

Below are some of the initial sketches we created:

We collected feedback on our sketches from our client, supervisor, TA and peers (who collectively encompass our two intended user groups) to refine our design. The feedback we received helped us to improve the layout and design of our tool, ensuring it met the needs of our users.

Developed Sketches

Some of the feedback and adjustments we made include the following:

• Need for a more structured layout: We decided to use collapsable views to improve the organisation of the Dashboard.
• Need clearer visual cues: Buttons now have more detailed labels to better describe their functions.
• Need a more appealing dashboard: We introduced a more visual representation of overall statistics.
• Need better accessibility: Some features, such as optimisation commands and suggestions, are now accessible directly from within the editor.

We also added advanced features like the granular tree view and provided users with more control over the commands, rather than relying on a single "Optimise Tests" button.

Below are our developed sketches reflecting these changes:

Prototype

Using Figma, we prototyped our tool based off our sketches to test its feasibility and usability. Before creating a low-fidelity prototype, we researched similar tools (this can be found in our Research Section) for inspiration to ensure our design effectively addresses user needs.

Usability is a key component of our tool, so we conducted a heuristic evaluation in order to efficiently identify any major usability issues in the early stages of design, without requiring extensive user testing. This allowed us to ensure our project aims to deliver the best user experience possible.

Heuristic Evaluation of Wireframe

Number	Heuristic	Problem	Solution	Severity (0-4)
1	Visibility of System Status	Users are not informed about the progress of test runs.	Implement real-time notifications to inform users when the Dashboard updates.	2
2	Aesthetic and Non-ambiguous Design	The colours in the graphs are not intuitive, and the design lacks clarity (e.g. overall coverage statistic has no %). The tick and cross icons in the suggestions are confusing.	Use colours that accurately represent the data, add percentage values next to coverage metrics, and replace ambiguous icons with clear, descriptive button labels.	2
3	Efficiency of Use	The tree view displays an overwhelming list of metrics, making it cumbersome to navigate to relevant code.	Allow users to click on a metric to directly navigate to the corresponding code section.	3
4	Help and Documentation	There is no in-tool guidance, making it difficult for users to navigate features independently and increasing reliance on external documentation.	Adding tooltips, such as information icons, for on-screen guidance will help users navigate the tool more intuitively and reduce reliance on external documentation, thus improving usability and the overall user experience.	1

Improved Wireframe

Using our evaluation results, we refined our prototype through another iteration in the development lifecycle. Modifications are circled below and numbered to match the solutions above.