Grapevine 2.0

CONTEXT:

After a summer of learning and developing my UI skills, I wanted to rework a project from the end of the last school year. Grapevine was a project I was proud of, and one that’s still in the development stages, but there were a lot of elements that I wanted to fix personally and after getting feedback from pitch night.

This isn’t a new features list; this is my thought process laid out and justifying the changes I made to 2.0.

View Version 1.0 Here.

INSIGHT:

There are so many food delivery services on the market, but with so many options, it’s hard to comb through all of them to find the cheapest delivery options or find the one that will satisfy your appetite the fastest.

IDEA:

The food delivery market is estimated to be $210 billion. When surveyed, 80% of particpants ages 17- 27 use food delivery services, meaning that they have multiple applications on their phone. With so many choices of delivery options, including UberEats, Postmates, and GrubHub, it is time-consuming to find the cheapest and fastest delivery option.

Grapevine is a food delivery service aggregator that compares top services and presents the cheapest and fastest option. It also aims to provide a social feature where users can “bill split” between nearby friends to split delivery or food costs. Grapevine aims to make the entire food ordering process streamlined, providing a platform from search to checkout.

The main changes were made through prioritizing what mattered when ordering food through our service. Font sizes and target areas are bigger after constant mirroring and testing onto my small iPhone SE. I also made interaction results more consistent, using paging and modals, and removing popovers that didn’t make sense.

It took me a while to get past the category listings of the food items as the home page, but it didn’t make sense for that to be the first screen. Grapevine is focused on comparing prices and time so having that more prominent on the home page, along with custom recommendations for convenience is what mattered more to the mission.

Fonts were darkened for legibility, the address was placed at the top for targeted results, and the search bar was pulled down because it was the most common interaction a user would have. The categories that used to be front and center were moved inside the search page since they correlated with the search process.

I debated between keeping Filters in the top bar because it wasn’t universally used throughout the flow. However, including it on the home screen allows the user to filter through all nearby restaurants, instead of being limited to a search phrase.

Another change was having the tab bar moved to the bottom, consistent with iOS guidelines. Although I was previously viewing it as a segmented controller before, this format didn’t allow for it to be consistently shown throughout the flow. Being able to switch over to the social tab was necessary, especially in checkout, to view last minute requests without starting over.

Information about the restaurant, including a location confirmation before finding out delivery times, was taken out of a popover and added to the page itself. This was done because of all the micro-interactions that could be done with the information, including linking to Yelp and changing the drop off location.

In the delivery service page, the column format was kept. Some options aren’t able to be selected if the minimum order amount isn’t met, and a purple text color is used to indicate which partner is the fastest or cheapest for a quick comparison glance.

A big change in the flow was reversing the partner comparisons and the menu screens. Having the comparisons beforehand worked to see the costs upfront, but because there was no order data, the prices and time depended on minimum estimated orders. Moving the menu before choosing the delivery service allows for more accurate cost estimates, and if the minimum order isn’t reached, then the user can go back and add more items or choose a different service.