Redesigning the AttitudeLive Website for Accessibility
- Attitude Live
- 2017 - 5 weeks, 40 hours per week.
- MY ROLE
- As the Senior UX/UI Designer, I oversaw the entire project, from research, site architecture, user flow, wireframes, art direction, UI design, prototype, and usability testing. Additionally, I collaborated with both the design and development teams.
- Maak Bow (Creative Director), David Huai(Engineer), Eva Lee(Engineer), Andy Han(Engineer), and Tina Matulic(Account Manager).
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.
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.
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.
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.
- 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.
- 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.
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.
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.
We created a sitemap to visualise the site's layout and content, prioritising a concise and straightforward information architecture as it was essential.
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.
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.
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.
As a team, we refined the screens, and I created a clickable prototype for usability testing, establishing our primary user testing objectives.
- 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.
- 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.
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.
- 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.
- 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.
After completing the usability testing, I made revisions based on the recommendations.
- 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.
- 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.
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.