Responsive image

The Project

I was responsible for all the UI/UX design for this app! You can have a look at the whole thing here.

Kinfly was a grocery delivery service app, serving two user groups, customers and drivers. From the start, we knew we'd have a few problems to solve:

  1. How will we differentiate between the two sides of the app?
  2. How will we circumvent the need for access to store stock lists?
  3. How will we ensure a streamlined experience for couriers?

Userbase Differentiation

The app's userbase would consist of customers and delivery drivers/shoppers, and both sets of users would use the same app, for simplicity's sake. The most straightforward solution was to split the userflow from the login page. From that point, users are differentiated with different colour schemes and homepages.

Stock List Circumvention

Our main challenge was most likely our lack of access to vendor databases that would show us their stock. We needed to find a way to communicate what shoppers were looking for without those tools, and still have the process be easy and quick.

We landed on a page with the fewest amount of text boxes we could manage. Users can specify a variety of preferences for their grocery shopping and can set up a budget, to get around our lack of access to store pricing, and can designate certain items as low-priority if their courier reaches the budget's limit.

Courier Satisfaction

We wanted to create a smooth experience for couriers, to set us apart from other services and to retain our users. Several iterations of the shopping list component were developed, and the most successful model used swipe gestures to mark items off. This was to ensure couriers wouldn't have to spend any time battling with a tapping-intensive UI while gathering items at the store.

We also wanted couriers to feel safe while doing their jobs. We added a function where the courier could provide the receipt upon checking-out, the requirement for a picture upon delivery as is common with delivery apps, and the ability for couriers to review their experience as well.

Iterations

This project went through several designs and layouts before landing on the final appearance. We went through the process repeatedly and discovered parts of the userflow that needed extra clarification, direction or information.

Order hub display

A priority during development was figuring out how to show couriers what orders were available for them to select. We initially displayed orders on a map, but decided that could be confusing or overwhelming, in addition to the practical problems presented by map plug-ins. Then we sorted them by the name of the location, which didn't seem practical from the perspective of a courier. Finally, we decided to sort by which order was closest, and included the timeframe in each item.

Better value selection

There were a few places in the userflow where a slider was used to select values; however, a slider isn't very effective on small mobile screens for precise information. In this particular instance, it was much more effective to use simple drop-downs to determine delivery time.

Swipe gestures

Upon consideration, we determined that item selection would get very tedious if users had to tap two items each time they attempt to check something off. Swipe gestures are much quicker and more intuitive, and provide simple visual cues when reviewing.