Phase 2: Onboarding Flow, Menu, and Checkout
3 weeks, 2021 | Aug 2021 - Sep 2021
Goals
At first, we used a customizable ordering program called Flipdish. We ran into a couple of issues with the program and focused on fixing three problem areas: ordering, logging in, and purchase flows.
To solve the tabs issue, we made clearer categories that are displayed at the top. The page will scroll down to a category that’s been tapped on. To reduce the long scroll, we’ve also nested the products in a horizontal scroll within each category section.
We also took the opportunity to create Fun Fact Cards at the end of every horizontal scroll in each category section.
(Above) Fun Fact Cards
Order Flow
Menu Screen
Users often fail to use the category tabs. We need them to understand that these are categories that can be tapped on and used to switch between one category to another. Flipdish’s default is to display one item at a time. This creates a really long scroll and makes it hard for users to find a product that they want.
Product Screen
There is no default when ordering a product. Users have to customize the order every time. There is also no choice for more than one quantity when users are on the product screen. The ‘X’ at the top of the menu is often mistaken as a way to close the product screen. That ‘X’ actually closes the whole ordering flow and returns the users to the map screen.
We created a product screen with defaults selected. We also made sure to add a quantity picker and to have only one button that sends users back to the menu screen.
What I Learned
Adding more screens does not necessarily make the flow better. There were many where I found myself wanting to add another screen for the sake of user input. I learned that this would only add more work for users when they’re trying to achieve a task. To solve this, we kept actions like adding a new credit card, voucher code, and tip all in one screen.
Logging in
After ordering, users would be logged into their individual accounts before they can purchase the items. Users had mistaken the top box to be a button that would fill in their numbers. What they actually had to do is to tap on the field below and fill out their numbers manually.
The new account creation flow asks users for their phone numbers. If they are new users, they will be prompted to create an account. If they are returning users, they will be logged into the existing account. Since there’s only one field per screen, users will not miss the field that they need to interact with.
Purchase Flow
Users miss the area where they can add the tip and voucher code. There is also the unusual placement of the total at the top of the screen.
We added a ‘View Cart’ screen so users can see what’s in their cart before going to checkout. The input fields were unified in style so that users can easily find the tip and promo code areas. Lastly, we moved the total to the bottom of the screen.
DELIVERY SERVICE
Zing App
Problem
In suburban life, having a good coffee routine, without making one at home, is hard. Zing offers a solution to this dilemma by delivering a coffee shop experience to people. Zing needed an app that will optimize the company's engagement with its customers, starting from keeping track of the coffee trucks' live and future locations, allowing customers to order, and showing other business features like membership perks.
Solution
-
Phase 1: Created the basic framework of the app which includes the flow of finding a truck's location, ordering, and giving feedback to Zing.
-
Phase 2: Revamped the ordering flow and added an onboarding flow and a purchase flow.
-
Phase 3: Added a feature called 'Zing To You' which allows customers to make an order to their locations instead of having to walk to the most nearby truck.
Final Designs
Role
Research, wireframing, visual design, animation, illustration
Time
6 months
Team
Moxie Method
Year
Aug 2021 - Feb 2022
Phase 1: Laying Down the Foundation
3 weeks, 2021 | Aug 2021 - Sep 2021
Goals
-
Show vehicle and customer locations
-
Display previous and future truck stop times
-
Direct users to tap and order from the vehicle they are closest to.
-
Ask users for feedback and connect to the Zing Instagram.
(Left) Early visionary sketch from client.
(Above) Early visionary sketch from client.
Research and Sketches
My starting point was researching other mobile apps that were heavily dependent on a Map View: Redfin, Hotel Tonight, and Uber. Some features immediately stood out to me – (1) Map vs. List views, (2) Filter & Sorting, (3) Favorites – as navigation marks which could help the users easily find a specific stop.
Another feature I added in the initial flow was to show which items were still in stock inside a particular truck. From a user’s perspective, it was important to avoid ordering an item only to find out that it was out of stock upon arriving at the truck.
Wireframing
Round 1: Two Map Views, Selected Stop States, Ordering Notice
-
Added two different zoom views: When trucks are more than 200 meters away and less than 200m away. This allows users to still see any Zing vehicles in their vicinity whether they are close or far away from one.
-
A pop-up with a notice that’s triggered when users click on a truck that’s too far away from them.
-
Tab bar added with item menus to connect with Zing.
-
User location/icon added.
Round 2: Info Bar, Schedule Screen, Tab Bar Update
-
Info bar with call to action copy added. This prompts the users to take specific actions: (1) tapping on a stop to see the scheduled time, (2) only ordering when next to a Zing vehicle.
-
Tab bar changed to 3 menu items: ‘Map’, ‘Schedule’, and ‘More’ (connect to Zing items moved to here). Now the three main actions (viewing the map, seeing the future and stop times, and connecting with Zing) are distinctly separated in the app instead of all living in one screen.
Round 3: Info Bar & Tab Bar Updates
-
The info bar moved to the bottom to avoid mistaking it for a search bar. Because this bar holds the CTA copy, it was important that users had no ability to close it like they had in the previous round.
-
Portray the fun spirit of Zing identity. The new screen title ‘Spark with Us’ to better portray the fun spirit of Zing identity. The new screen title ‘Spark with Us’ is a stronger indicator of communication than ‘More’ was.
-
Added circles around the active trucks to differentiate from the other stops and have the active trucks stand out more against the map.
What I Learned
-
Iteration is key: it’s alright to not get the layout/design right the first time around. We should test what’s been made and see what could be improved in the next round.
-
Designing for more than just the function: Yes, the function is important, however the visual guides, from icons to the shapes of pop-ups, must echo the brand’s message. It took a couple of iterations before we landed on a design that is both cheerful and functional.
Phase 3: Zing to You
6 weeks, 2021-2022 | Dec 2021 - Feb 2022
Goals
-
Update the map screen to show both Zing to You and Scheduled Stops
-
Create a confirmation flow after ordering
Zing was offering a new program, Zing to You. Unlike Scheduled Stops where zing-mobiles would only be there for a set amount of time during the day, Zing to You would deliver a customer’s order to a customer’s selected location at any time during operating hours. These locations are set by Zing and users can select to have their orders delivered to a stop closest to them.
What I Learned
Design is not the only important part of a good user experience. The wrong phrasing/wording of an item can throw the users into confusion. It took some time for us to land on “Zing to You” for the title of the tab. We had other options but those previous choices could’ve been easily confused with “Scheduled Stops”. With the correct phrasing, users can take the right actions to achieve their intended tasks.
On Demand
At first, Zing delivery operated in zones. Users were either inside the on demand zone or they were out of the zone. The first iterations of these screens involved a tab that switched between the on demand zone and the fixed stops. There was also a search bar so users can enter an address and check if that location is within the zone. The old version of the map screen was moved into the ‘Fixed Stops’ tab.
Virtual Cafes: Zing to You
Not long after, Zing moved on to virtual cafes, which were later called ‘Zing to You’. In this second round, we got rid of the ability to enter an address and simply showed the locations Zing would deliver to. This is a better approach since users are more likely to find locations that are inside the zone. Other useful features we added include: (i) cards with location details and order button, (ii) location pins that were connected to each card, (iii) a tutorial that explained the difference between Zing to You and Scheduled Stops.
