Requirements
Project Goals
Avant-Garde’s mission is to open a new channel for the disabled to express themselves and create. Neuromuscular diseases can be isolating, as they profoundly limit one’s ability to communicate. Our hope is that this project will act as a bridge between the capable minds of its users and the ideas and feelings they may wish to express through colour and abstract forms.
Eye-trackers are input devices that determine which point on the screen users are looking at, enabling human-computer interaction without having to move the body. Microsoft’s Enable team, our partner, aims to improve the lives of people with disabilities by using eye tracking technology. Patients with Amyotrophic Lateral Sclerosis (ALS) are usually unable to move their limbs, however, their ability to move their eyes is often unaffected.
Avant-Garde is a hands-free canvas, with an intuitive drawing mechanism centred around the eyes’ natural behaviours. It is complemented by a variety of personalisation options, such as 115+ accessible colours, multiple brush types, and custom mandala styles. The application’s fundamental goal is to be eye tracking oriented. As such, the UI was designed with a user-centred approach, to ensure features can be accessed effortlessly.
User Personas
Juan, 42, Experienced Doodler
-
Motivations
- Is looking for new sources of entertainment.
- Wishes to express himself creatively.
-
Pain points
- His movement is extremely limited.
- He is not familiar with other paint-style applications and their standard tools.
Scenario
Juan enjoyed making doodles and sketching throughout his life, but after his ALS diagnosis, he lost the ability to draw. Today Juan is confined to a wheelchair, but still enjoys creating funny cartoons using eye-tracking and Avant-Garde. He finds creating mandalas with different shapes and styles therapeutic. With little experience using computers previously, he was able to pick up how to use the app very quickly due to its user-friendly design.
Samuel, 13, Arts Enthusiast
-
Motivations
- Enjoys challenging and interesting games.
- Sam is looking for a platform to make designs.
-
Pain points
- His movement is hindered, but he still has some motor control.
- Sam cannot use his hands to draw accurately.
Scenario
Before he was diagnosed with Progressive Muscular Atrophy, Samuel was a fan of art, and went to exhibitions regularly, looking for inspiration for his own art. As his condition worsened, he lost the ability to control his hands. However, Sam really enjoys playing with Avant-Garde, as it gives him an outlet to create interesting designs in a way that feels seamless and natural. He often creates mandalas and prints them out, to hang them around his room as decoration.
Gathering Requirements
The requirement gathering for Avant-Garde was limited due to the nature of liaising with members of the motor-neuron disease community. Due to ethical concerns, certain certifications are required to communicate with the potential users of this application. For this reason, the requirements for Avant-Garde were closely discussed and pinpointed with Mr. Jarnail Chudge and Mrs. Ann Paradiso, Microsoft employees with experience with the design and creation of applications for members of this community.
In addition, our team participated in meetings with experienced Microsoft software developers, Mr. Dwayne Lamb, Mr. Harish Kulkarni, and Mr. Shane Williams. After running our application’s concept and design ideas through this team, we are confident that we have created a system that will add value for Avant-Garde’s targeted user group.
Use Cases
MoSCoW list
| ID | Requirement | Priority |
|---|---|---|
| Drawing Mechanism | ||
| 1.1 | Mechanism conceptual design and testing | M |
| 1.2 | Integration of UWP Gaze Input library with InkCanvas, in order to draw utilising Eye Tracker | M |
| 1.3 | Gaze from Point A to Point B to draw a straight line | M |
| 1.4 | Utilise Bezier Curve library to curve existing lines | M |
| 1.5 | Generate indication points appearing at the end and middle of each line (which are gazed upon to toggle additional drawing functionalities) | M |
| 1.6 | 4-Point and 2-Point joystick front-end design | M |
| 1.7 | Joystick implementation and integration into drawing mechanism | M |
| 1.8 | Undo/Redo features | M |
| 1.9 | Reposition Bezier Curve control points to accurately curve lines utilising joystick | M |
| 1.1 | Mandala drawing algorithm | M |
| 1.11 | Delete existing lines | M |
| 1.12 | Reposition points after they are placed utilising joystick | S |
| 1.13 | Connect line to already existing points | S |
| 1.14 | Begin new lines from already existing points | S |
| 1.15 | Integrate and update radial progress bar attributes | S |
| 1.16 | Bucket fill tool | S |
| 1.17 | Support for drawing Shapes directly | C |
| UI | ||
| 2.1 | General application usage flow design | M |
| 2.2 | Responsive Design | M |
| 2.3 | Toggling between Draw mode, and View mode | M |
| 2.4 | Button layout for View Mode | M |
| 2.5 | Button repeating-click property for ease of use with Eye-Tracking | M |
| 2.6 | Grid overlay in Draw Mode, for ease of focus when selecting points to draw | M |
| 2.7 | Welcome screen front-end | M |
| 2.8 | Playback animation of mandala creation | S |
| 2.9 | Zoom in/out of canvas | S | Toolbox |
| 3.1 | Toolbox front-end (4 iterations) | M |
| ID | Requirement | Priority |
|---|---|---|
| 3.2 | Colour palette: implementation | M |
| 3.3 | Colour palette: display selected colour | M | 3.4 | Integration of additional tools and components (data flow, property updates, etc.) | M |
| 3.5 | Clear canvas functionality | M |
| 3.6 | Finding and editing licensed icons and images | M |
| 3.7 | Colour Palette: auto-switch colour on completion of each stroke | M |
| Colour Manager | ||
| 4.1 | Colour Manager front-end (3 iterations) | M |
| 4.2 | Colour ID system for saving/loading colours, and enabling users to edit them at any point | M |
| 4.3 | Set background colour | M |
| 4.4 | 13 different colour profiles, each with 10 different brightness settings, and 20 different opacities | S |
| 4.5 | Colour theme picker menu | S |
| 4.6 | Automatic saving/loading of Colour Themes | S |
| File Manager | ||
| 5.1 | File Manager front-end (1 iteration) | M |
| 5.2 | Slot system for storing projects | M |
| 5.3 | Exporting images as JPG/PNG | M |
| 5.4 | Saving/Loading files | M |
| 5.5 | Storing stroke data, and updating it on every stroke | M |
| 5.6 | Serialising/De-serialising canvas data | M |
| 5.7 | Regenerating canvas strokes from loaded data | M |
| 5.8 | Regenerating colour palette and background from loaded data | M |
| 5.1 | Automatically loading pre-set files containing finished mandalas, as examples for users | S |
| 5.1 | Displaying canvas image in File Manager front-end slots | S |
| Brush Tool | ||
| 6.1 | Brush Tool front-end (2 iterations) | M |
| 6.2 | Adjusting brush attributes (size and brush type) | S |
| 6.3 | Adjusting number of mandala line reflections | S |
| Confirm Tool | ||
| 7.1 | Confirm Tool front-end | M |
| 7.2 | Confirm action implementation | M |
| Tutorial | ||
| 8.1 | Tutorial front-end | M |
| 8.2 | Tutorial content creation | M |