phlask

Role
UX Designer, UI Designer

Client
PHLASK (Code For Philly)

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

Arrow pointing right
Challenge
UX

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.

Arrow pointing right
Impact
UX

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.

Screenshots of three mobile screensScreenshots of three mobile screens
Arrow pointing right
Approach
UX

A 3-Step Process from Discovery to Delivery

2

Testing and Refining

3

Iteration and Delivery

1

Discovery and Redesigning

Arrow pointing right
Discovery and Redesigning
UX

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.

Arrow pointing right
Testing and Refining
UX

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.

Arrow pointing right
Iteration and Delivery
UX

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.

multiple mobile screens with tooltips
Arrow pointing right
Outcome
UX

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.

Arrow pointing right
Learnings
UX

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.

Purple arrow pointing up