Flight Studio 1
Designing your ideas. Over a decade collaborating with people like you–strategizing to create wonderful experiences.
My Role: Owner, Visual Designer, UX Designer & Front-end Developer
The Team: Me, Reviewers & Testers
The challenge: To redesign my portfolio website to help restart my freelance career. The goal was to achieve Web Content Accessibility Guidelines (WCAG 2.0) compliance and complete the project within a strict two-month deadline due to budget constraints.
My role & approach: Acting as a solo product team, I managed this project using Agile and Design Thinking methodologies. I began with a full audit of my existing portfolio to assess its strengths and weaknesses, and I sought advice from industry professionals to guide my strategy. A critical step was selecting the right platform. Through research, I chose WebFlow for its compelling flexibility and design control. My hands-on process involved creating pencil sketches, writing and editing website copy, and developing new portfolio case studies from past project files. I then built the site in WebFlow, meticulously customizing the template to ensure WCAG 2.0 compliance. I conducted usability testing on the new designs and content. Before launch, I performed rigorous accessibility testing including keyboard-only navigation, automated testing with aXe, color contrast testing, magnification testing, and screen reader testing.
The impact: I have maintained the site for years, making iterative updates based on user feedback. This includes revamping content, adding an accessible PDF questionnaire, and expanding the site, all while maintaining accessibility standards. Finally, I made a conscious decision to prioritize user privacy by removing all tracking and analytics software, ensuring visitors have a completely private and untracked experience.
Image Caption: Before and after of Homepage masthead background image that was darkened to give better contrast to text overlaid on top.
Image Caption: Before and after for About masthead background image that was also darkened to give better contrast to text overlaid on top.
Image Caption: Before and after showing HTML code missing HTML landmarks and then the addition of landmarks to make it more accessible.
Image Caption: Before and after showing extra descriptive text added for better usability and accessibility to describe projects that were previously images.
Image Caption: Project page's previous and next arrows showing text only visible to screen readers to help give context. And on focus and hover links reveal project name.
Have a project in mind? Let's talk ✉️.