Philz Redesign

Case Study: Redesign
What is Philz?

Philz is a coffee shop that serves a variety of different drinks, including different flavors, caffeine levels, etc. The app associated with Philz allows users to browse the app for what drinks they want to purchase.

The Problem
It is difficult for customers to choose what type of drink they want. This could be based on whether they cannot differentiate what flavor profile they want or how caffeinated they want their drink. Customers also need to be able to adjust the sweetness and creaminess levels of their drinks to their liking.
The Goal
To address these issues, we can modify the app to allow customers to sort through the drinks based on what they want. We can also allow the customization process to be more user friendly and efficient.

Tools

  • Figma

Team

  • 1 UX Designer

My Role

    • UX Researcher
    • UX Designer

    Timeline

    • Overall: 10 weeks
    • Discovery & Research: 3 weeks
    • Design: 7 weeks

    Design Process

    01
    User Research
    02
    Sketches & Wireframing
    03
    Design
    04
    Usability Testing
    User Research
    01
    What are the user needs?
    To identify a solution to the problem at hand, I had to identify the user's needs, goals, and behaviors. By conducting user interviews and observing people, I gathered enough data to establish a problem area to focus on.
    The user needs an easier method to filter out drink choices and flavor profiles. The user needs to customize their drink's sweetness and creaminess to their liking.
    02
    Sketches and Wireframing
    In order to implement the changes the customers needed, I had to start from the beginning of the ordering process: the menu. For customers to be able to find what type of drinks they wanted with the right amount of customizations, I created numerous sketches going through different ideas of how this could be implemented.
    Low-Fidelity
    My first wireframe involved mapping and implementing the changes needed to make the app more user-friendly. This included creating low-fidelity wireframes with a brief layout of where these changes would be incorporated and how they solved the issues at hand. This included creating any type of sorting method for users to narrow down the type of drink they would like, along with simplifying the customization process by adding numbers as a measurement scale.
    03
    Hi-Fidelity Prototype
    I took my low-fidelity wireframes to Figma to create a more visually appealing and realistic version. Through a few iterations, I created the product to the right.
    04
    Usability Testing
    To check the functionality of my prototype, I conducted a user test. I gave the users four different task statements, along with post-task interview questions to detect what to improve, change, or add to my prototype. I discovered I needed to make some adjustments: 1) add a special comments button on the customization page, and 2) add back buttons on each page to return to the previous page the user was on. I took these changes and added them to my prototype, which resulted in my final iteration.