A Redesign of PHLASK to Make Water More Accessible in Philly

Client

PHLASK (Code For Philly)

Role

UX Designer, UI Designer

Focus Areas

Information Architecture, Prototyping, Usability Testing, Iteration, Visual Design

The Challenge

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.

Discovery and Redesigning

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.

three mobile screens showcasing the app with annotationsarrow pointing to top right corner

Testing and Refining

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.

mobile screen in a browser window and a table showing usability test resultsarrow pointing to top right corner

Iteration and Delivery

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.

multiple mobile screens with tooltipsarrow pointing to top right corner

Key Insights & Actions

1

Identify Key Problem Areas: Conducted an audit and heuristic evaluation to pinpoint accessibility and consistency issues.

2

Redesign & Prototype: Redesigned the app using competitor insights and Figma’s prototyping tools for a seamless experience.

3

Usability Testing: Validated design concepts with users, applied severity ratings to feedback, and refined designs accordingly.

Outcome

1

Wider Array of Resources: The app now offers a broader range of resources with a streamlined process to contribute new ones.

2

Simplified Onboarding: Enhanced onboarding process with concise tooltips for a clearer understanding of app functionalities.

3

Intuitive Navigation: Custom filters for each resource improved the navigation system, significantly enhancing user experience and accessibility.

What I've Learned

Despite having to pause my participation at PHLASK due to travel plans and a move to Buffalo, this project was a valuable learning experience. It taught me the importance of continuous iteration and user feedback in refining designs. The project also highlighted the necessity of clear communication and thorough handover processes to ensure continuity.

Next Steps

1

Launch & Monitor: The redesigned app is expected to be launched soon. Monitor user feedback to identify further improvements.

2

Support New Designers: Continue supporting new designers, ensuring they have the resources and insights needed to maintain and improve the app.

3

Continuous Improvement: Use insights from this project to enhance future designs and user experiences.