Write

a little bit about air and a spacious place

what is Air?

The Accessibility Internet Rally (AIR) is a competition that boosts global web accessibility awareness. Originating in 1998 in Austin, Texas as a local hackathon, it has since become an esteemed event advocating accessibility and digital inclusion. In this event, web professionals have eight weeks to enhance or create new websites for artists, nonprofits, and community groups, guided by experts and compliant with leading accessibility standards.

who is a spacious place?

A Spacious Place is a non-profit that uses creative activities to enrich lives, particularly of those with special needs. It cultivates a space that nurtures self-esteem and awareness. Led by Executive Director Kaye McKee and Board Chair David McKee, with support from the board and donors, the organization conducts various classes and workshops, dedicated to empowering its community.

identifying goals, audience, and opportunities

project goals

Support A Spacious Place's mission by enhancing website accessibility for visitors. This includes aiding understanding, perception, and interaction with content, and overcoming barriers such as device access, language limitations, and navigating with assistive technologies.

defined audience

In our initial client meeting, it was conveyed that A Spacious Place caters to a diverse audience ranging from 4 to 70 years old with various abilities. They provided insights into user challenges, noting many rely on phones or tablets due to limited computer access, and for some, English is a second language, which complicates content perception.

opportunities

Early in the project, we prioritized opportunities such as bilingual content and responsive design, aiming to improve overall site accessibility and the information architecture.

project outcomes

A graphic showcasing a lighthouse audit perfect score of 100 for accessibility, with the number encircled in green and the word "Accessibility" written below it.

quantitative outcomes

Comparing average lighthouse assessment scores from the initial client site to the new site we created there is a significant increase in regards to accessibility, best practices and SEO scores. On both mobile and desktop lighthouse scores we increased the average accessibility ranking 33.5% from 66.5 to 100. On mobile we increased the SEO score by 32% from an average of 54 to 86, while on desktop still improving the score by 18% from 65 to 83. On mobile we also saw an increase by 10.5% in the implementation of best practice score and 15% on desktop.

qualitative outcomes

In anticipation of the launch, we're projecting significant qualitative improvements from the newly bilingual and responsive design features. These enhancements align with our commitment to inclusivity and accessibility, providing a welcoming experience for both English and Spanish speakers. The site's responsiveness across various devices ensures that all users, regardless of the technology they use, will have equal access to the platform. This proactive approach to user experience is expected to foster a broader community engagement and ensure that the new website is as versatile and user-friendly as possible.

growth outcomes

Through this project, I have expanded my skill set in multiple dimensions. I navigated the complexities of WordPress, transitioning from a novice to a proficient user. Conducting usability tests with a screen reader user not only improved my empathy but also my technical acumen in creating accessible content. My role in communication was pivotal, as I honed my ability to articulate ideas and negotiate solutions with stakeholders. Leading the design and development phases, I also sharpened my project management skills, ensuring that each step aligned with our overarching goal of making the digital space inclusive for all.

project strategy to align with goals

inclusive mindset

Our product strategy is deeply rooted in an accessibility-first approach, ensuring that the website is usable and inclusive for all audiences. From the outset, we've prioritized compliance with WCAG guidelines and have integrated design elements that cater to various disabilities. We've adopted flexible design principles that accommodate a range of assistive technologies, ensuring that our site is navigable via keyboard-only commands, screen readers, and other aids. Our commitment to a multilingual experience addresses not just linguistic diversity but also cultural inclusivity, making sure that the content resonates with a global audience. This strategic choice not only meets our goal of creating a universally accessible platform but also aligns with our broader mission to foster a diverse and inclusive community.

information architecture

The original site architecture presented a fragmented user experience with a scattered navigation system that included sections like Why Creativity, Images, Videos, and Share Your Story. These categories, while engaging, may have led to a confusing hierarchy and a challenging navigation experience, especially for users relying on assistive technologies. The new site architecture has been streamlined for clarity and ease of access, aligning with best practices for web accessibility. The revised navigation is intuitive and straightforward, with main categories such as Home, About, Programs, Tutorials, Gallery, Get Involved, Contact Us, and Donate. This reorganization simplifies the user journey, allowing users of all abilities to find information efficiently. Each section is self-explanatory, reducing cognitive load and ensuring that essential functions like volunteering or donating are now prominently featured and more accessible. This change not only optimizes the site for accessibility compliance but also reflects an inclusive design approach that considers the diverse needs of all visitors.

themes and epics

Leveraging the themes and epics, we harnessed Agile Scrum methodology to create user stories and use cases that are user-centric and iterative. Each user story embodied specific user needs and their interaction scenarios, aligning with a theme that guided the development focus. For Responsiveness, we crafted stories emphasizing adaptive layouts and navigational ease across devices, ensuring content accessibility and meaningful engagement regardless of the user's device. Under Alternate Navigation, user stories were designed with accessibility in mind, creating a barrier-free experience via keyboard, voice, and pointer navigation, accommodating diverse user capabilities. In Content Exploration and Interaction, we translated the need for engaging with content into actionable tasks for the team, focusing on streamlining the processes for class discovery and registration and integrating testimonials to foster trust and connection. The Community Building and Engagement epic resulted in stories that facilitated community forums and feedback mechanisms, catering to users' desires to connect and contribute to the community. Technical Performance, Design Consistency & Optimization called for user stories demanding high performance, a coherent visual design, and robust security to assure users of a seamless and secure experience. Lastly, Cultural and Language Inclusivity was addressed by creating user stories for multi-language support, ensuring inclusivity and ease of access for non-English speakers. Through regular sprint reviews and retrospectives, these stories and use cases were continually refined, tested, and implemented, with frequent releases to meet and adapt to real-time user feedback, ensuring an ongoing alignment with user needs and project goals.

design decisions guided by function and goals

Event Scheduling Made Easy

Our clients indicated that their community members faced difficulties remembering class and workshop schedules. Initially, we considered integrating a calendar on the homepage. However, after experimenting with various WordPress plugins and consulting with our mentor, we realized that achieving full accessibility would necessitate either a premium plugin or substantial custom coding—resources beyond our scope and expertise. Moreover, user testing revealed that calendar interfaces were not user-friendly for screen reader users and required frequent website visits to stay updated.Ultimately, we implemented a solution that lists regular classes and enables users to easily add events to their personal Google Calendars. This approach simplifies navigation for screen reader users, who often rely on headings, and it integrates seamlessly with their daily digital routine. By directly syncing with personal calendars, we reduced the cognitive effort required to engage with the community, enhancing overall accessibility and user experience.

Expanding the Color Palette

The original brand colors our clients provided were a vivid purple, a soft lemon yellow, a pale cream, and a deep violet. While these shades were lively, they did not provide sufficient contrast for accessibility compliance. In collaboration with the clients, we introduced complementary greens and blues to the palette. The greens brought a refreshing, natural feel, while the blues added a serene yet dynamic touch, balancing out the vibrant purples and yellows. This addition also introduced an element of playfulness that resonated with the brand's identity and its audience. By creating a spectrum for each color, ranging from lighter tints to darker shades, we ensured that our design met accessibility standards for color contrast, providing a functional and inclusive user experience.

Enhancing User Engagement

In our client consultations, it emerged that their processes for recruiting volunteers and gathering supply donations were ineffective. They relied on word-of-mouth for volunteer outreach, with no website details, and they communicated supply needs only in email newsletters, lacking direct purchase options or delivery instructions. To improve this, we devised a multi-faceted approach: we delineated volunteer classification tiers, detailing necessary training and qualifications on the website; incorporated a volunteer inquiry option in the contact form; and established a link to their VolunteerMatch profile for visibility on open positions and applications. For supply donations, we linked an Amazon wishlist, simplifying the donation process for users. We also featured these initiatives prominently on a dedicated "Get Involved" page, ensuring straightforward access and engagement for site visitors.

reflection

This project has been a journey of significant personal and professional development. Delving into the intricacies of accessibility, I gained hands-on experience with keyboard testing and screen readers, which deepened my understanding of the challenges faced by users with disabilities. The usability testing sessions, particularly with a screen reader user, were enlightening, highlighting the importance of intuitive design. Communicating with stakeholders was an exercise in clarity and precision, as I learned to effectively convey project progress and rationale behind design decisions.

Universal Design System

Unlocking efficiency and consistency revolutionizing design practices.

client

a dev launchers product

timeline

June 2022 - Current

tools

Figma | Storybook | Github | WebAIM

roles

UX | UI Designer + Researcher

Universal Design System

next project

what is a universal design system?

A Universal Design System is an organized set of design standards, components, and guidelines that harmonize design and functionality across a product or suite of products.

It incorporates a set of design tokens and elements, such as colors, typography, spacing, and interactive components, constructed following an atomic design methodology.

In atomic design, the system starts with the smallest functional elements—atoms—and combines them to form larger, reusable components, or molecules, which then combine to form versatile, stand-alone interface sections—or organisms.

This modular approach extends into templates and pages, ensuring a consistent and scalable interface.

why are design systems important?

The importance of Universal Design Systems lies in the principles of consistency, accessibility, efficiency, atomic structure and guidelines to help our teams collaborate and learn. Universal Design Systems are not just about creating a collection of design assets; they are about establishing a living framework that evolves with the product and the organization, underpinning the design philosophy, and facilitating the creation of digital experiences that are accessible, intuitive, and delightful for all users.

Consistency

‍They ensure a coherent user experience by providing a single source of truth for design elements and patterns. This consistency extends from micro-interactions to macro aesthetics of the entire product ecosystem.

‍Accessibility

Universal Design Systems are built with accessibility in mind, ensuring that products are usable by as many people as possible, including those with disabilities.

Efficiency

By reusing components, teams can rapidly prototype and develop new features without reinventing the wheel, resulting in faster design to development cycles.

Atomic Structure

The atomic approach allows for scalability and maintainability. As products evolve, the design system can be easily updated with new elements or modified existing ones.

Guidelines

Accompanying the styles and components are detailed guidelines, which educate and align all team members on design principles and best practices, streamlining collaboration and communication.

transforming a brand guide
into a system

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Leveraging Atomic Design for Superior Efficiency, Uniformity, and Accessibility

Efficiency Unlocked

Implementing atomic design systems propels design efficiency forward. According to a study referenced by Brad Frost, adopting a design system can speed up the development process by as much as 47%. This allows designers to invest more time in customizing the product experience for their audience, rather than building from the ground up.

Consistency Across the Board

In a fully remote work environment, a design system is critical for maintaining a unified approach. It ensures that no matter where our team members are, they can produce work that aligns seamlessly with our brand and product line.

Ensuring Accessibility

Our atomic design system is engineered with built-in accessibility standards, which is crucial given that approximately 15% of the world's population experiences some form of disability. Incorporating these standards from the start ensures that our products are accessible to a wider audience, making inclusivity a default rather than an afterthought.

design systems are living products

Adaptation and Evolution of Design Systems

In the ever-changing landscape of user experience and organizational growth, design systems must be living entities—adaptable, scalable, and responsive to evolving user needs and business objectives. My experience has taught me that a design system is never static; it's a vibrant product that breathes with the organization, requiring constant nurturing and iterative development. This philosophy has been pivotal in shaping our design system at Dev Launchers. By embracing this adaptive approach, we ensure that our system remains effective, relevant, and aligned with our mission to foster an environment of continuous learning and innovation.

Crafting the Design Guidelines

Clarity: Use frames and auto-layout for clear, consistent designs across screens, with rem measurements ensuring seamless development handoff.
‍Consistency: Stick to the established color library and organizational fonts to maintain brand uniformity.
‍Efficiency: Prioritize reusing existing components to avoid design redundancy, with custom components as needed, aligning with our atomic structure.
‍Inclusivity: Designs should comply with WCAG A standards, striving for AA where possible, and undergo detailed accessibility assessments prior to integration.
‍Collaboration: Encourage peer reviews and document design rationale for cohesive and understandable design choices. These principles are the bedrock of our design approach, steering our collective efforts toward a universally accessible and harmonious user experience.

In a recent survey conducted by a UX Researcher on the Universal Design Team, all respondents rated the usefulness of the predefined styles as either Extremally Useful or Very Useful. In fact one stand out comment shared from the survey feedback mentioned that “Dev Launcher's Design System is a WORK OF ART".

impact for our designers

reflection

Initiating the design system as a solo venture, I crafted its foundation, embedding accessibility and systemic coherence from the ground up. This endeavor not only advanced my design approach but instilled in me a profound appreciation for the meticulous architecture behind consistent, efficient digital experiences. As the system matured, I transitioned to a guiding role, shepherding its evolution. Now, as part of a dedicated product team, I contribute as a high-level reviewer, mentoring my peers to enhance their design acumen. Collaborating closely with organizational leaders, I continue to refine our design practices, ensuring our documentation on accessibility, best practices, and guidelines is comprehensive and current.

learning and growth

The development of this project has been pivotal in expanding my expertise in design systems and architectural foundations. I've acquired a deep understanding of the nuances of atomic design, the formulation of comprehensive guidelines, and the establishment of a universal language for design. This journey has fortified my skills in strategic planning, meticulous documentation, and the orchestration of organization-wide design initiatives.