philz coffee.

UI/UX Designer • Sept 2020 - Jan 2021 • Mobile App • Figma

joey

27 years old
San Francisco, CA
Software Engineer

Needs:

How might we redesign an existing brand to engage customers during a pandemic?

[re] define.


Human interaction is vital to the culture of warmth and care present at each Philz Coffee store. In a time of limited physical interaction due to the COVID-19 pandemic, our objective was to preserve the values that make Philz Coffee unique by finding new avenues to enhance the customer experience.

The lifestyle mandated during the peak of the pandemic forced businesses to physically close their doors to customers. For Philz, this meant losing one of their most distinctive qualities – the in-store experience. Our team was tasked with capturing the essence of Philz's characteristic warmth and care, and delivering that same feeling to customers in new and innovative ways. One main solution was to create a rewards program for customers.

wireframe

I reorganized the priority of the menu bar by replacing the 'More' section (which was not as commonly clicked upon) with something that would be more frequently used, like the new rewards program.

As the rewards program was a completely new feature, we brainstormed as a team. I translated the initial concept by the team (left) into a visual representation that was easy for the user to conceptualize as well as reflective of Philz's brand.

Philz's brand balances photography with designed elements in order to humanize their product and represent their values. We used these assets to reflect Philz's brand in the Menu section of their mobile application.

Resituating the 'More' section to the Account page made a difference in saving space in the navigation bar. Pushing the 'More' page back into the 'Account' section made more sense for a less-trafficked section.

We developed a rewards system after conducting competitive analysis of the rewards program structures of other coffee companies. The number of beans per cup is an accurate reflection of how many beans Philz uses to make a cup of coffee, in order to make the rewards system more personal. We also included an explanation of how the rewards program works for users to learn about this new feature.


Our team produced a wireframe centered around the style of Philz's classic, established app. As the sole UI/UX Designer, I included aspects such as carousel swiping, color scheme, and pre-made images for it to be seamlessly added by Philz's app development team.