Yellow App
A Digital wallet app
While working on the ‘Yellow’ application, my duty involved creating a functional user experience. I developed wireframes for the application’s diverse services, grounding my designs in thorough market research, data analysis, and business requirements. This approach ensured that the design catered effectively to all anticipated use cases.
List of Features Tasked for Characterization from the Conceptualization Phase:
Paz Charge – Designed a functional user flow for users of electric vehicle charging services, ensuring it covered all possible scenarios.
Payment with Apple Pay / Google Pay – Implemented the feature to use Apple / Google Pay for payment options in refueling services and within the ’Yellow’ stores.
Payment Deferral Service – Introduced the capability for users to defer payment for refueling services, offering a check-based payment postponement option.
“Deleting My Account” – Developed a process enabling users to delete their account, complete with a detailed explanation of the procedure’s implications and effects.
“Hi Yellow” – Designed a user flow for a voice-prompt-based coffee ordering service, specifically tailored for on-the-go coffee orders.
Joining of ‘Freshmarket’ Chains to the Application – Developed and integrated several new concepts into the app, along with mapping and updating features to align with the new requirements brought by the inclusion of ‘Freshmarket’ chains.
“My Space” – This feature centralizes all related services and actions, making them readily accessible and organized into pertinent categories for ease of use.
Locating a Service – Includes capabilities for searching and filtering Paz stations and Yellow stores, along with displaying their operating hours and available services in both map and list views.
Coffee to Go – Below is a detailed case study.
My goal was to ensure a smooth, intuitive, and enjoyable user experience within the app. To exemplify this, I selected a case study on the Coffee to Go service, showcasing the enhancements implemented in the coffee ordering process.
Overview
Coffee holds a central place in our daily lives. Beyond being one of the most consumed beverages in the Western world, second only to water, it encompasses a rich and diverse culture.
The ‘Coffee to Go’ service in the ‘Yellow’ app offers users the convenience of pausing their journey to refresh and savor fresh coffee, while also earning rewards for their digital wallet.
Business requirements
After analyzing customer service data, it became evident that users were having trouble placing accurate orders due to user experience shortcomings. A common issue was missing the station details component on the “My Order” screen, resulting in coffee being ordered from an unintended station.
In response, I was tasked with updating the coffee ordering process in the app, with objectives including:
Market Research
I conducted a comparative analysis by testing coffee ordering in the Starbucks app, renowned for its expertise in fostering customer loyalty and seamlessly integrating in-store and digital experiences. Starbucks excels in customizing experiences for each customer, leveraging extensive data on their spending habits and preferences. This enables the app to suggest new menu items and tailor recommendations based on the time of day. Additionally, it offers personalized discounts and real-time notifications.
Starbucks’ strategy revolves around four key digital competencies that permeate the entire business, with continuous refinement: rewards, personalization, payment, and ordering. Enhancing the coffee ordering feature in the ‘Yellow’ app was inspired by these competencies, demonstrating how they can be effectively applied in a road service context.
Persona
Amir Segev
Age: 46
Status: Married + 2
Occupation: Lawyer
Amir Segev, a dedicated lawyer, has his office near Paz Oz station on Jabotinsky Street in Ramat Gan. A self-proclaimed coffee aficionado, he’s made it a habit to stop by the ‘Yellow’ store daily for the past six months, always opting for a decaffeinated Americano.
On a recent trip to Herzliya for work, Amir, on his way back to Ramat Gan, paused at the “Ronit” gas station for fuel and decided to get a coffee. However, he inadvertently placed his order at his usual “Yellow” branch in Ramat Gan instead of “Ronit”. Upon entering the store to collect his order, he was informed by the staff that there was no record of it. Disheartened, Amir left without his coffee, continuing his journey.
Needs:
- A quick and precise coffee ordering process.
- Assurance of receiving his coffee at the specified location.
- Accuracy in fulfilling his coffee preferences.
Pain points:
- Unfamiliarity with the staff at the “Ronit” store.
- Challenges when ordering from a new location.
- Time and money spent without receiving the expected service.
Motivations:
- Comfort with the known ordering process.
- A desire to keep using the service.
- Satisfaction from receiving a credit after reaching out to customer service regarding the issue.
I'm disappointed that I didn't receive the coffee that I ordered.
Strategy Overview
Implementing Key Components of Starbucks’ Strategy into the ‘Coffee to Go’ Service:
Personalization: The app will remember your previous orders, including the last station you ordered from. Plus, as a special treat, you’ll receive free coffee on your birthday.
Payment: Multiple payment options are available for your convenience. You can use the card saved in the app, funds from your wallet, or redeem coupons for extra discounts.
Ordering: Place your orders with ease and pay in advance through the app. This streamlined process saves time and ensures a more efficient experience.
Reward: Every purchase helps you accumulate money in your wallet and earn punches on your coffee tab. When you hit your 8th coffee purchase, it’s on us!
Displaying the existing flows:
Flow for Placing a New Order - Previous Design:
Flow for Entering the Service After Placing the First Order:
Once the first order has been placed in the ‘Coffee to Go’ service, each subsequent time the user accesses the service, they will be directed to the ’’My Order’’ screen (the first screen from the left). If the user makes any changes to their order, this new order will overwrite the previous one and will be set as the default for future service uses.
Improving the ‘Coffee to Go’ Ordering Process:
- Implement location and tracking technology similar to that used in the “Refueling Quickly”” service. This addition will enable the app to detect the user’s current location automatically and display the details of the nearest station.
- Redesign the ”station selection” component to make it more noticeable and user-friendly throughout the entire ordering process. This redesign aims to prevent users from missing this crucial step, ensuring they select the correct station for their order.
- New design for the menu item feature:
Previous Design
New Design
New Design Update: The (+) button is removed. Now, each click on the (>) button opens the “Coffee preferences drawer”. After selecting preferences and clicking “save”, the item is directly added to the order.
"What to make for you?" screen
The “What to make for you?” screen has been thoughtfully designed for ease of use and engagement. It prominently features a “My Last Order” component at the top, allowing users who have previously ordered coffee to quickly select from their past choices. Below this, there is a section titled “We have a lot more to offer”, displaying the full menu of products.
This design enables users to either quickly reorder a favorite item or explore new options and special offers by scrolling through the menu. As users scroll, they’re introduced to new products and promotional offers.
The station selection’s placement is also strategically considered. It is located at the bottom of the screen in a fixed position, which becomes minimized upon scrolling. To change the station, users can simply click on the “to change station >” button, which opens a new screen for station selection, ensuring a seamless and user-friendly experience.
Bottom-drawer Coffee preferences:
Selecting an item on the “What to Make for You?” screen triggers the “Coffee Preferences Drawer” to open. The product is added to the cart only once the “Save” button is clicked, following preference selection.
Shifting the drink size selection to this drawer streamlines the main screen, reducing the number of displayed items. To enhance clarity, headers above the selection buttons in the drawer are also updated.
Previous Design
"My order” screen
In the updated ordering process, when a user selects coffee, they will have the option to upgrade to a coffee and pastry deal directly from the “My Order” screen. Additionally, the “Save as Permanent Order” button has been removed to simplify the ordering experience.
Previous Design
New Design Flows
Place a new order flow:
Signing into the service after placing the first order and editing the order details:
The characterization process for this service was conducted in multiple phases, and the implemented improvements comprehensively meet business requirements. However, to further enhance the user experience, certain additions could be considered, such as:
Expanding the Hot Drink Selection: Introducing options for other hot beverages like tea and hot chocolate.
Broadening Product Range: Offering the ability to purchase additional items available in Yellow stores, including mineral water, soft drinks, snacks, and more.
