Postmates Redesign

Driving the attention to the undervalued functionality

Challenge

Our goal is to improve the usability of Postmates by applying the user-centered design process. Postmates is a company that operates a network of couriers who deliver goods, mostly food and drinks, locally. Users either order the items for delivery and a courier will deliver it directly to their location; or they can use it to order for pick-up at a later time. We chose to redesign Postmates because it is an app that is saturated by many college students and is a great influence on the lifestyles of many people.

My Role & Contribution

UX researcher - conducted online and  interviews to gather user insights

UX designer - created personas, prototyped and designed the core functionalities

UI designer - created mockups, design specs and user interface of the app

Interview & User Testing

We conducted interviews in person with our users before and after testing in order to get some basic information and their experience with the Postmates. We collected the data by using a google form during the interview or recorded the interview and summarized it afterward. Here for interview details. 

users testing.png

During testing, the user was provided a smartphone. The observer was taking notes alongside the user sitting next to them while they are facing their screen. We then started delegating tasks to the user one by one. We asked the user to think out loud by narrating their actions while we took notes. Once the user finishes with all the tasks, we wrapped up with the user with closing questions and comments.

These were the tasks we designed: 

Screen Shot 2018-12-31 at 12.02.28.png

Testing Results and Analysis

We used heuristic evaluation to categorize the problem. Most problems we found were about the flexibility and efficiency of use and user control and freedom. Here for detailed results. 

Examples of users’ top usability problems:

Group.png
Analysis
worked.png

The Turning Point

After our interview and user testing, we found two major problems. The first one is about the flexibility and efficiency of use due to the bad categorization. Our users had to spend a long time scrolling to view restaurants at the homepage or scrolling through the menu at a restaurant page. However, this is not a good component to work on because the information architecture is a case by case problem. Since too many screens have this issue, it is difficult to come up with a single solution. In addition, the solution is more visual than interactive. 

 

The second problem is the map for pick-up. From our initial interview, we found that all of our users would like to use the map for pick-up since the map is a straightforward presentation of the location and distance of a restaurant. Two out of the four users we tested wished that they were able to explore restaurants on the map on the delivery page with categories and filters, a need the current map screen failed to address. Thus, we decided to work on this map component for pick-up. But before we started our redesign process, we still needed to get more data to frame the problem and justify our redesign. So we conducted another map specific interview (here for interview question and testing task) with a similar structure to the first round but different questions.  

Results/Feedback

We found that our users would be most interested in using a map so that they can see the distance to a restaurant. Since most of our users always have a general idea or preference of what kind of food they want, Postmates should include some sort of search mechanism or filter. Here for detailed results.

In its current state, the Postmates map does not include either and is very frustrating to users to be forced to scroll through all of the restaurants when they already have something in mind. 

Redesign Component

We redesigned the map component that displays nearby restaurants in relation to the user’s current location. Doing this helped the user explore their options within the area and enables them to make informed decisions. 

The map function was undervalued by many delivery apps. Popular delivery apps like Uber Eats, Doordash and Grubhub do not have this feature for users to explore areas around them. They only include a map after the user places the order showing the location of the restaurant and where the driver is once the driver picks up their order. This feature is more prevalent in apps like Yelp and navigation maps(click here for Comparative Analysis). However, confirmed by user testing, this feature is important for the pick-up feature because the location of restaurants affects user decisions. This is because the users need to physically go to these restaurants and their effort is dependent on the proximity. 

Current Problems

Problem #1: Presentation of information isn’t intuitive or efficient.
Screen Shot 2018-12-31 at 14.55.27.png
Screen Shot 2018-12-31 at 14.55.02.png
  • With the arbitrariness of color-coding and limits of the numbered dots, the map is not informative nor understandable. Users hope to see at least the names of restaurants on the map.​​

  • Information at the bottom of the screen does not correspond with the presentation on the map. The listing of restaurants on the bottom seems random.

  • The way of getting information is inefficient: Users need to zoom-in multiple times to see the exact location of a restaurant. Users need to click on dots multiple times to view which dot corresponds to which restaurant.

Problem #2: Limited action
Screen Shot 2018-12-31 at 14.54.35.png
  • The map doesn't allow users to search or filter for specific types of restaurants, which leads to inefficiency. (the Redo Search Button is like a refresh button)

 

  • Restaurants are only grouped by location on the map

 

  • The thumbnail picture with minimal information at the bottom is not enough for users to make a decision. 

Prototyping

Sketches 

Screen Shot 2019-01-01 at 17.57.48.png
Screen Shot 2019-01-01 at 17.58.09.png

This prototype focuses improving presentation of information on the map page. We designed a bookmark information box. Each bookmark is color coded, where different colors represent different areas on the map. For example, in figure 1, the different area has a circle with a different color. When you click on a bookmark (Figure 2), the map will zoom in to the area and restaurants show as dots on the map. Moreover, each bookmark has a number representing how many restaurants are in this area. 

Screen Shot 2019-01-01 at 17.58.33.png

This design allows for efficiency when users search for food based on their preferences and want to discover restaurants depending on their location or pick-up time. We include the use of filters so users can easily sort through what they prefer. Additionally, we provide restaurant and food item details so they can make an informed decision without having to navigate to the lists page. Specific icons transform the dots into indicators that let users easily recognize what may be around them (their home location, bookmarked restaurants, etc).

High Fidelity Prototypes #1 
ezgif.com-video-to-gif.gif
Key Changes 

 

  • We added a radius design to the map. We implemented this design by adding multiple circles with different colors to the map. Each radius indicates the distance from the user’s location.

 

  • We listed all the restaurants with pins separately along with a number on it.

 

  • We added a bookmark design to make the information at the bottom more closely related to the map. Each bookmark has different colors which indicate the distance to the user’s location matching with the circle on the map.

 

  • Users can swipe up the bottom part to view more restaurants within certain distances. This works with the number on the pins which allows users to get more information in a more efficient way.

 

  • We added a search function on the map screen because we found that most users thought it was better to include filters and/or a search bar from our user tests. Users don't have to look over all the restaurants to find one they would like to order from.

High Fidelity Prototypes #2
ezgif.com-video-to-gif (1).gif
Key Changes 

 

  • Using a pointed shape to indicate location is more accurate than the circle used by the original design and names of restaurants are shown on the map.

 

  • The restaurants that don’t fit the search are represented by a tiny dot.

 

  • In the preview box, more than one picture is available.

 

  • The handle on the preview box of restaurants indicates an up-and-down slide. Compared to the original design of going to the right to the next step, this interaction is quicker and better supports browsing.

 

  • The omnipresent search bar on the top is more conventional and offers bigger freedom to the users.

 

  • Filters on the bottom are the two most important factors to users while choosing a restaurant.

 

  • Users can create their own category with the star option.

Prototype Testing

We conducted our second round user testing (here testing question) on four new users. Half of the users  tested on the same prototype and the other half tested on the other to eliminate bias. We then used qualitative data from their feedback and quantitative data from their decisions to decide which one was more preferable. Our method of observation is identical to our first round of user testing except that we will be providing a laptop to access our redesign prototypes instead of a smartphone. Here for detailed results.

Screen Shot 2019-01-01 at 21.05.43.png

In comparison, the map section of all three designs varies widely. The original design contained colored dots and numbers; Prototype #1 adds color-coded radii; and Prototype #2 uses varied indicators and labels to identify the restaurants.

Our redesigns are better because they take advantage of the visual aspects of the map and add information without adding to visual clutter. However, what might not have worked is the lack of varying indicators or labels directly on the map and the limited actions for Prototype #1 and the inability to sort or encourage exploration by proximity for Prototype #2.

Reflection

The map function has been a source of confusion for most users because it is difficult to search for restaurants according to user preference and is not intuitive to use to explore what might be around the user’s location. Therefore, we recommend our Prototype #1 to be the redesign of Postmates’ map component. Our redesign implements filters and search functions that allow users to easily determine which restaurants are in the vicinity and filter/search within the their proximity to decide where to buy food for pick-up. The second round of user testing confirmed Prototype #1 to be the most user-friendly when compared to Prototype #2 and the original Postmates app.​​​​​​​

We do believe there needs to be a redesign for the map functions of the Postmates app and recommend a change to Prototype #1.

However, Prototype #1 potentially makes the app harder to use overall. Since it incorporates too many elements into one design which although could be more comprehensive, also could be too complicated. 

We thought a better recommendation may have been to incorporate prototype #1 into the existing map. 

Special thanks to my teammates: 

Yun Tang 

Tim Wei

Loc Truong