Upgrading PHLASK: Enhancing Water Accessibility in Philadelphia
The challenge was to upgrade the PHLASK app by incorporating three new resources, improving the user experience, and enhancing the app's UI to make water more accessible across Philadelphia.
New Resources in a More Accessible App
2
New Resources: Added three new resources for users to choose from.
3
Streamlined Onboarding: Simplified onboarding process with concise tooltips.
1
Enhanced Accessibility: Improved UI and UX to make water access easier for users.
A 3-Step Process from Discovery to Delivery
2
Testing and Refining
3
Iteration and Delivery
1
Discovery and Redesigning
Auditing the Existing Design: Identifying Accessibility Issues
We began by auditing the existing PHLASK design to understand its workings and identify accessibility and consistency issues. This involved conducting a heuristic evaluation and exploring competitor apps and common design patterns. The redesign focused on creating a seamless user experience, leveraging Figma’s prototyping tools to link screens and visualize improvements.
Validating Concepts: Engaging Users in Usability Tests
Engaged PHLASK users in moderated, remote, think-aloud usability tests to validate design concepts. Applied a severity rating to analyze results and shared findings with stakeholders. This feedback informed iterative refinements to the design.
Refining Designs: Continuous Iteration and Stakeholder Engagement
Continuously refined designs based on user feedback, advocating for design choices in stakeholder meetings. Finalized the redesigned app, supported development with user stories, and ensured quality through regular design reviews.
Delivering Results: New Resources, Simplified Onboarding, and Intuitive Navigation
More Resources
The app now offers a broader range of resources with a streamlined process to contribute new ones.
Simplified Onboarding
Enhanced onboarding process with concise tooltips for a clearer understanding of app functionalities.
WCAG Compliance
Integrated design elements according to WCAG guidelines, improving accessibility for all users.
Importance of Iteration and Clear Communication
1
The importance of continuous iteration and user feedback in refining designs.
2
Clear communication and thorough handovers ensure continuity.
3
How to enter an existing project and collaborate effectively with designers.