The Challenge

AttitudeLive aims to create a responsive website that aligns with its values and offerings to the community, but the current website needs to be updated and reflect AttitudeLive's creative expertise. Additionally, it seeks to solidify its position as the leading source for disability information, discussion and thought leadership in New Zealand, increasing community participation and engagement.

The Solution

AttitudeLive needs a compelling, user-friendly, and accessible website for delivering information and resources to the disability community in New Zealand, including a custom homepage feed. Designing a WCAG 2.0 AA compliant website with accessibility in mind is crucial for an excellent user experience.

Research

We didn't have a budget for research in this project, but recognising the importance of catering to our target audience, we knew we had to complete this step. Thankfully, we found valuable resources and guidelines from organisations like the Nielsen Norman Group, which offered techniques for designing this website for users with visual, auditory, motor, and cognitive disabilities who rely on assistive technology. Additionally, we referred to the WCAG 2.0 AA guidelines.

User interview

We conducted user interviews with company stakeholders and people with disabilities to understand business and users' wants and needs.
Below are some of the answers we received.

Business:

• Accessibility to people with disabilities and mobility restrictions.
• Having the power to configure the content through the website.
• Raise brand awareness - a site that WOWs.
• Support and attract funders.
• Easy management administration CMS.
• Create user-driven content and crowdsourcing content to build the community.

Users:

• Easy-to-navigate website.
• Able to increase the website font size for readable purposes.
• Designing the website for visual, auditory, motor, and cognitive disabilities who rely on assistive technology.

Define

After analysing data collected from company stakeholders and individuals with disabilities, we built a list of the website's most critical features, prioritising the needs of both the business and the users.

Next, we developed a product feature roadmap incorporating all the essential features identified through our analysis, ensuring the website functions efficiently. It aligns with the project's high-level goals and objectives.

Information Architecture

After defining the website's features, we created a flow for the main tasks, focusing on developing a customised homepage feed for users, deemed a crucial website functionality.

Sitemap

We created a sitemap to visualise the site's layout and content, prioritising a concise and straightforward information architecture as it was essential.

Sketching

Based on the sitemap and user flow, we started with quick hand-sketching of low-fidelity designs, ensuring that all the features, project goals, and research were included in the initial designs.

Wireframes

Once we had a visual direction for the layout, we added more details and precision to the sketches by creating mid-fidelity wireframes. Creating mid-fidelity wireframes helped us focus on visual consistency and hierarchy before applying styles to the design.

UI Refinement

We presented our mid-fidelity wireframes with a clickable prototype in our initial design review with the client. We received confirmation of their feasibility for development and approval for our proposed solutions.

We're building a mood board to gather inspiration before creating our design system. Once we agree on the visual aesthetic, we'll establish a design system for consistent development across all screens.

Key Design Consideration

After reviewing the WCAG 2.0 guidelines, I created an accessibility checklist, prioritising visual design updates to the UI components.

• Make sure the keyboard focus is visible.
• Minimum contrast ratio of 3.20:1 between text and background.
• UI elements and graphics must have a contrast ratio of 3:1 against their background.
• Don't rely solely on colour to present information.
• Use icons and buttons consistently.
• Text can be resized by 200% without loss of content or function.
• Content can be enlarged up to 400% without requiring dimensional scrolling.

Establishing a design system

The designer and developer were part of the design process, along with accessibility. Once the proposed designs were approved, we defined essential elements upfront to ensure a fast and consistent design throughout the project, making style changes easier to coordinate later on.

Usability Testing

As a team, we refined the screens, and I created a clickable prototype for usability testing, establishing our primary user testing objectives.

Testing objective:

• Observe how participants navigate throughout the website to accomplish their goals.
• Test and see if participants get to the end of their tasks using different methods.
• Test to see if the website is user-friendly and easy to navigate.
• Get feedback from participants on the site's usability.

Tasks:

• Find a button to create a custom feed on the homepage.
• Find an organisation under the “Sport” category on the directory page.
• Create an account.
• Identify which one is “Sponsor” content on the homepage, and click on it.
• Identify which one is “Watch” content on the homepage, and click on it.

Testing Insights

A total of 7 participants completed this usability test. They came to my workplace to do testing. I observed while I could assist at any point. Participants were timed on how quickly they completed those tasks.

Key finding:

• All participants found the website pretty easy to navigate.
• All participants liked that the “Get Started” CTA on Homepage stands out; they clicked on it to create a custom feed.
• All participants accomplished creating an account.
• Four participants point out that they dislike scrolling up and down to click the directory category.
• All participants liked the new UI design.
• One participant cannot identify the "Sponsor" content on the homepage.

Recommendation:

• Update the user interface of the “Sponsor” card to differentiate other cards.
• Make the section of the directory category sticky and move from top to left-handed like the sidebar.

Priority Revisions

After completing the usability testing, I made revisions based on the recommendations.

Results

Outcome

• After the new website launch, our client received overwhelmingly good feedback from the community.
• The new designs successfully passed the compliance evaluation that was disability community.
• 10% increase in retention. The new users and returning users visit the site.

Reflection

• A design system with accessible components doesn't guarantee automatic accessibility. Holistic solutions at the application level are essential for a truly inclusive design.
• Iterative building and testing of components are crucial for accessibility. No one can guarantee an accessible experience solely through static mockups. Experiencing how a screen-reader user would interact with the application helps understand the context. This allows us to revisit the design or implementation and address any gaps in the user experience.

Recognition

I want to thanks our fantastic team and valued client for their hard work and dedication. Together, we have achieved a significant milestone - winning the award!

Designer Institute of New Zealand Best Design Awards 2017 Gold - Public Good Awards.

Design Highlights