AVoid.
AVoid. is an AI-powered browser extension that helps users break down complex project prompts into a tailored, structured plan with actionable tasks.
With AVoid.’s built-in tools, users can easily stay on track and efficiently complete their projects.
Project Overview
Academic Project
Team
Eason Xinran Wang
Wanting Mao
Sriya Ventrapragada
Joon Kum
Tools
Figma
Adobe Illustrator
Adobe After Effects
Adobe Premiere Pro
Adobe Photoshop
Google Sheets
Miro
Timeline
Aug 2024 -Dec 2024
Calendar Integration
Every task generated by the extension syncs with the user's Google or Apple calendar, providing them with a daily reminder of tasks scheduled for that day.
AI-Powered Plan Generation
The Generate Plan tab provides users with an intuitive interface to create a tailored project plan. Users can highlight text directly from the page or type their own description in the input box to form the basis of their plan.
Track and Manage Generated Plans
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Add New Task to Existing Plans
The Add New Task tab allows users to quickly add smaller tasks by highlighting text on a page or typing directly into the text box. They can then set a deadline on a mini calendar and assign the task to an existing category if needed.
Track Daily Performance
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Widget Timer
During a timed session, if the sidebar of the extension is collapsed, the only element that will remain visible on the screen is a compact widget for the Timer. This minimal display helps reduce distractions and clutter, while still allowing users to maintain focus on the current task.
Stay Motivated
The Planets Unlocked page serves as a reward system where users unlock a unique planet each time they complete a project. Each planet offers a short description of when the user "arrived," describing the planet’s environment and including a photo of the scene.
Minimize Visual Distraction
When the sidebar is collapsed, only a floating button remains visible along the right edge of the browser. Clicking the button expands the sidebar, revealing the main function bar.
Calendar Integration
Every task generated by the extension syncs with the user's Google or Apple calendar, providing them with a daily reminder of tasks scheduled for that day.
AI-Powered Plan Generation
The Generate Plan tab provides users with an intuitive interface to create a tailored project plan. Users can highlight text directly from the page or type their own description in the input box to form the basis of their plan.
Track and Manage Generated Plans
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Add New Task to Existing Plans
The Add New Task tab allows users to quickly add smaller tasks by highlighting text on a page or typing directly into the text box. They can then set a deadline on a mini calendar and assign the task to an existing category if needed.
Track Daily Performance
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Widget Timer
During a timed session, if the sidebar of the extension is collapsed, the only element that will remain visible on the screen is a compact widget for the Timer. This minimal display helps reduce distractions and clutter, while still allowing users to maintain focus on the current task.
Stay Motivated
The Planets Unlocked page serves as a reward system where users unlock a unique planet each time they complete a project. Each planet offers a short description of when the user "arrived," describing the planet’s environment and including a photo of the scene.
Minimize Visual Distraction
When the sidebar is collapsed, only a floating button remains visible along the right edge of the browser. Clicking the button expands the sidebar, revealing the main function bar.
Calendar Integration
Every task generated by the extension syncs with the user's Google or Apple calendar, providing them with a daily reminder of tasks scheduled for that day.
AI-Powered Plan Generation
The Generate Plan tab provides users with an intuitive interface to create a tailored project plan. Users can highlight text directly from the page or type their own description in the input box to form the basis of their plan.
Track and Manage Generated Plans
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Add New Task to Existing Plans
The Add New Task tab allows users to quickly add smaller tasks by highlighting text on a page or typing directly into the text box. They can then set a deadline on a mini calendar and assign the task to an existing category if needed.
Track Daily Performance
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Widget Timer
During a timed session, if the sidebar of the extension is collapsed, the only element that will remain visible on the screen is a compact widget for the Timer. This minimal display helps reduce distractions and clutter, while still allowing users to maintain focus on the current task.
Stay Motivated
The Planets Unlocked page serves as a reward system where users unlock a unique planet each time they complete a project. Each planet offers a short description of when the user "arrived," describing the planet’s environment and including a photo of the scene.
Minimize Visual Distraction
When the sidebar is collapsed, only a floating button remains visible along the right edge of the browser. Clicking the button expands the sidebar, revealing the main function bar.
Calendar Integration
Every task generated by the extension syncs with the user's Google or Apple calendar, providing them with a daily reminder of tasks scheduled for that day.
AI-Powered Plan Generation
The Generate Plan tab provides users with an intuitive interface to create a tailored project plan. Users can highlight text directly from the page or type their own description in the input box to form the basis of their plan.
Track and Manage Generated Plans
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Add New Task to Existing Plans
The Add New Task tab allows users to quickly add smaller tasks by highlighting text on a page or typing directly into the text box. They can then set a deadline on a mini calendar and assign the task to an existing category if needed.
Track Daily Performance
The Today's Tasks tab is designed to support the user’s daily focus by displaying only tasks scheduled for the day, incorporating a Pomodoro timer, and highlighting the immediate task to work on.
Widget Timer
During a timed session, if the sidebar of the extension is collapsed, the only element that will remain visible on the screen is a compact widget for the Timer. This minimal display helps reduce distractions and clutter, while still allowing users to maintain focus on the current task.
Stay Motivated
The Planets Unlocked page serves as a reward system where users unlock a unique planet each time they complete a project. Each planet offers a short description of when the user "arrived," describing the planet’s environment and including a photo of the scene.
Minimize Visual Distraction
When the sidebar is collapsed, only a floating button remains visible along the right edge of the browser. Clicking the button expands the sidebar, revealing the main function bar.
Design System
Project Overview
My Contribution
Research Process Overview
Stakeholder Map
Survey Data Visualizations
Our team created data visualizations based on survey results to better understand the symptoms ADHD college students experience. These insights guided our ideation and design process, ensuring our solutions effectively address their needs.
Comparative Analysis
Our team conducted affinity mapping to analyze interview data, allowing us to identify patterns and extract actionable insights that will inform and guide our ideation process.
Affinity Mapping
Our team conducted affinity mapping to analyze interview data, allowing us to identify patterns and extract actionable insights that will inform and guide our ideation process.
Our team identified key user needs and pain points that must be addressed through our design solutions to better support ADHD students' daily workflow and productivity.
Design Recommendations
Based on the insights derived from affinity mapping, we developed the following design recommendations, which guided us throughout the ideation process and later stages of design, including user flow development, information architecture, and wireframing.
Ideation
Our team conducted 6-3-5 and Crazy 8 ideation activities to rapidly generate design ideas and explore diverse directions.
We then re-examined these ideas and developed conceptual sketches and wireframes to visualize, compare, and refine our concepts.
Storyboards
I was responsible for creating three storyboards to illustrate our team's distinct design ideas. These storyboards helped our team visualize the potential user flow, demonstrate how our solutions address user pain points, and identify potential usability issues early in the design process.
User Flow
Our team designed the user flow for the browser extension based on our previous research data and storyboards.
Hover to zoom in
Based on our user flow, we identified the following key features that need to be incorporated into our final design.
Information Architecture
Based on the user flow, our team developed the information architecture, using it as a blueprint for creating our low- and high-fidelity prototypes.
Hover to zoom in
Low Fidelity Prototype
Based on the user flow and information architecture, our team developed a low-fidelity prototype of the browser extension through multiple iterations.
Design Iteration
Our team conducted multiple rounds of design iteration to refine our high-fidelity prototype. We carefully selected a color palette that reflects the space travel theme, ensuring user engagement without causing distractions. Additionally, we optimized the placement of the menu bar to enhance intuitive navigation and establish a more balanced information hierarchy within the extension’s side panel.
High Fidelity Prototype
Next Steps
Refine and iterate the high-fidelity prototype based on user feedback.
Conduct heuristic evaluations with experts specializing in ADHD support for college students in disability centers, educational institutions, and healthcare facilities.
Work closely with developers and AI specialists to enhance and develop the product prototype.
Reflection
•Refine and iterate the high-fidelity prototype based on user feedback.
•Conduct heuristic evaluations with experts specializing in ADHD support for college students in disability centers, educational institutions, and healthcare facilities.
•Work closely with developers and AI specialists to enhance and develop the product prototype.
My Takeaways
Thank you my incredible team!
Generative AI as a pathway to more equitable educational resources and learning experiences.
The importance of being a good listener and genuinely empathizing with users, maintaining a user-centered approach throughout the entire design process.
Attention to detail — considering both visual and interaction design to support users with diverse needs.
Grounding each design solution in thorough reasoning, backed by research and data-driven insights.
