Rationale

Fantuan Delivery is an online food ordering and delivering platform that allows users to order food online and deliver to their footstep. Users can connect with their favourite local gem through the applications that they developed, which facilitates instant pickup and delivery of various products, such as groceries, restaurant and many more. The design study is to rediscover the application on android platform and redesigned the layout into a more consistent layout.

Logo and UI Elements

Before

The original logo is simple and it conveys the message strongly. Therefore, there is not much edits from the original logo.

After

The main logo has a smaller logo on the background to make the overall look more cleaner and balanced. In additional, there is a very light shadow applied to the foreground subject to make it stand out more on the background.

Before

The original log in page does not have enough information for new users or existing customers to use. The sign up button is hiding from the other page and the login page does not engage users to use the application.

I found that the original layout require users to click multiple times in order to get to what they want. For example, the signup page is hidden, the language options require users to click more than once when it can be done in one step.

In addition, the layout is not clear as there is no main logo to the welcome screen.

After

The welcome screen contains a logo for users to know they are using the right application, and it allows user to either sign up to use the application or login when they have an account.

The language button has turned into a toggle where customers can switch between languages with just a tab. In addition, the sign up button is now separated from the login button to create clarity for customers.

The re-design layout is lot more easier to use and it overall looks a lot cleaner than the original version.

After

1. The search bar has been redesigned to suit the material theme of android. The original user interfacesearch bar is more rounded. Compared to the original search bar, the redesigned one is more simple and suit to the theme more.

2. Throughout the user study, we found three sets of icons are used in the original user interface. For example, the 3D icon on the top bar, and the flat 2D icon in the bottom navigation bar, and the coloured icon in the account page. For the redesigned layout, all the icons have been redesigned so that they are more unified. Overall, the icon sets not only convey the message strong, but also more consistent.

3. Throughout the design study, I found that all the restaurants has been combined in one continuous scroll in the main user interface. Not only it is not consistent, but it also confuses the users asthere are no separations between each restaurant. In addition, the layout is very unorganized and it is hard to find information. The redesigned user interface has been redesigned in a way each restaurant is in a card format. By doing that, users can identify different cards represent different restaurant. For example, users can identify the beginning and the end of one card while they are scorlling.

4. In the redesigned layout the ads has been grouped into one section so that there is a hierarchy for the layout. Compared to the original user interface where all ads are implemented into random places, the redesigned layout will have a section where they can put the ad.

AFTER

The original user interface for the tracking page is informational, however, it is lacking a design. Therefore, in the redesign process, I was trying to apply the same design style to the tracking page.

In the redesign, it shows an estimation of when the food will be delivered on the top. It shows on the top as it is one of the more important information that users would like to know.

The timeframe was kept but the layout has been redesigned slightly so that it is better for reading and it suits the new redesign layout. The redesigned layout has a better hierarchy than the original user interface.

AFTER

There is not much redesign in the account page. The original ui is easy to use and convey message clearly. However, the redesign user interface is to update the user interface with more icons so that the interface is easier to read.

The design has been re-designed a bit by using icons. Users can easily understand the function of the button without reading all the texts. All the important texts are bolded in dark gray, and the least importance text are in a smaller font and it is in a lighter shade in gray. By doing that, the redesigned user interface is more simplified compared to the original user interface.

In addition, all the icons have been redesigned to suit the overall theme to the redesigned layout. The original user interface have different sets of icon. Having a set of redesigned icon will help to unified the layouyt.

The top half of the user interface will stay the same as it is the most important part to attract the users to join their membership.

Before

The original user coupon interface is consistent and easy to use. However, it is lack of hierarchy. Therefore, there is a need to read every single word to understand the actual usage of the coupon.

After

The re-design layout is more easy to use and it creates a sense of hierarchy for users to view. The design of the coupon has been revamped and the colour scheme is more closer to the brand colour.

The redesigned layout is more easy to read. The store names are bolded and in a slightly bigger font. The rest of the information is in a regular weight and smaller font.

In addition, the status bar has been redesigned so that it can be used in cross platform. For example, iOS and Android.

Customers can also click the conditions text to view more conditions of the usage of the coupon.