overall Process Breakdown
1. Research & Problem Identification
- Conducted a research paper to identify the lack of awareness and knowledge about ASD among youth.
- Utilized research findings to pinpoint the problem and propose a multimedia project as a solution.
2. Project Definition & Objectives
- Defined project objectives to educate and advocate for ASD awareness among college students.
- Established specific goals for the website, podcasts, comic strips, and video explainers.
3. Target Audience & Competitor Analysis
- Identified the target audience as Philippine college students and conducted a competitor analysis of existing ASD awareness resources.
4. Sitemap & Content Planning
- Created a detailed sitemap outlining the structure and navigation of the informational website.
- Planned content requirements, including information architecture and key topics to be covered.
5. Design Studies & Branding
- Conducted extensive design studies to explore visual styles suitable for engaging the target audience.
- Developed branding elements including logo design, color palette, typography, and overall visual identity.
6. Wireframing & Layout Design
- Created wireframes to visualize the layout and user interface of each website page and multimedia component.
- Established design guidelines and UI patterns for consistent user experience.
7. Content Creation & Production
- Developed informative content, including written articles, scripts for podcasts, comic strips, and video scripts.
- Produced graphics, illustrations, and multimedia elements to enhance engagement and understanding.
8. Website Development
- Coded and developed the entire website from scratch, ensuring responsiveness, accessibility, and interactive features.
- Implemented animations, transitions, and interactive elements to enhance user engagement.
9. User Testing & Iterations
- Designed user testing surveys and conducted usability testing among Philippine college students.
- Analyzed feedback and iteratively refined website design, content, and functionality based on user insights.
- *This project has a total of three iterations.
my contributions
- Contributed to the research process, including topic selection, literature review structuring, data gathering, analysis, and drawing conclusions, and participated in project inception by defining target audience, objectives, design persona, and sitemap of the website.
Table of contents of the research paper that details the need for the multimedia project
Project details of Autism Sense
Sitemap of Autism Sense
- Spearheaded comprehensive design explorations, defining the website's tone, color palette, typography, and overall visual identity to align with project objectives and audience engagement.
Initial look and feel of Autism Sense
The initial designs of the project appeared too corporate and formal due to their color scheme and typography, which felt rigid and out of sync with our target audience of Philippine college students. To better engage with our audience, we shifted towards a more youthful and engaging direction that would resonate effectively with the younger demographic.
Visual pegs to refine the design for our target audience
Final logo, color palette, typography, assets, and components of the first iteration of this project
- Authored and edited website content, including headers, taglines, subtexts, call-to-action buttons, and detailed informational content about Autism Spectrum Disorder (ASD).
Some of the writeups used for the website
- Created multimedia elements for the website such as graphics and edited photos.
Graphic elements and edited photos I contributed to
- Created high-fidelity wireframes, refining design elements to enhance user experience and visualize website layout and interactions.
High-fidelity wireframes of the first iteration of the website
- Independently developed the website from scratch, including coding the content, layout, responsiveness across devices, and implementing animations and interactions.
- Participated in defending our project with three panelists, incorporating their feedback into iterative improvements for the project.
Panelists' comments regarding the strengths and weakness of the first iteration of our project
The areas for improvement for the website suggested by the panelists include:
- Less text-heavy
- Better scalability and visibility of the logo
- More engaging homepage of the website
The before and after of the logo design for better scalability and visibility
The before and after of the homepage for better engagement
In response to the text-heavy comment from the panelists, this was addressed in the third iteration of the project.
- Contributed to managing user testing by formulating the survey form, compiling and tallying feedback from survey respondents, incorporating recommendations, and analyzing the data for insights.
User testing survey questions
User testing statistics, findings, and recommendations for the website portion of the project
Summary of positive feedback and areas for enhancement identified through user testing of the website
- Implemented iterative improvements to the website based on valuable feedback gathered from user testing.
The areas for improvement for the website suggested by the Philippine college student surveyees include:
- Improve font balance and color contrast for better readability.
- Enhance information architecture and consider adding a search function.
- Address loading times and add an auto-share button for social media.
- Incorporate images of people for a more personal touch.
- Simplify ASD diagnosis information and provide more detailed articles.
- Revise web animations to be less repetitive.
Website color and design comparison between both iterations for better readability
Regarding the scroll animations on the website, the initial design included animated elements that triggered with each scroll. Through iteration, I refined this feature so that scroll animations only play the first time a user navigates through the website, enhancing readability, user experience, and ease of reading.
For the remaining suggestions from user testing, decisions were made based on various factors: some feedback was received from a minority of respondents (1 out of 50), constraints in time and resources limited our ability to implement certain improvements, and we also determined that some suggestions were not in line with the overall vision for the website.
View the final iteration of this project below:
