#2: Designing the Perfect UI Experience

The new year begins and alas! It was time to work on our application.

I started to work on designing the application's user interface on Sketch. To find out the best choice of where to put each buttons or what not, I went through tons and tons of applications that could be found on the App Store – some of which included Carousell, Moovit and even messaging applications such as WhatsApp, to figure the secret to a user-friendly application design.

As I started to design the application, I found that there were many things to consider – the colour palettes that I decide to use (whether it can cater to those with colour-blindness), the font selections (I have decided to use SFPro, Apple's default font as the main font of my application. Also included the use of Aperçu for headers and Nanum Pen Script for a tinge of fun...!); whether the keyboard can affect how the interface looks.

As such, the first version of our application design was not very much of a success as there were some parts that went wrong whilst designing. For example, the storyboarding process was a little off – the 6th box was probably supposed to come before the sign up page itself, instead of after sign up. However, there were also several parts that received praise from various potential end-users. The user on-boarding experience was indeed crucial to help users transition into using the application.

[first version]

After making several mistakes in the first version, my team and I proceeded to make new changes to the application design. Through a week of brainstorming of what to go where, we came up with this second design.

Welcome Page

[version 2, after two weeks' worth of changes!]

Customer: Upon launching the application, the user will be prompted to Join FoodTree or Login. The login page will apply to both businesses and users.

Joining FoodTree as a 'Customer' will bring the user directly to a sign up page. After filling in and registering as a customer, they will be brought to an on-boarding page (start from 1.1) which briefly explains to them what FoodTree is about.

Business: If the user signs up as a business, they will first be brought to the on-boarding page immediately (start from 2.1). After which, they will be led to a page that will request from them their basic business information.

I felt that these welcome pages are easy to follow.

I've also decided to change the opacity of the backgrounds to better please the eyes of our users. The font selections were reconsidered and changed accordingly too!

Ah! At this point in time you should've already realised that the colours of the background for the sign-up pages are white in colour. It is meant to be that way as it is designed as a pop-up screen.

Main Page [Customer]

The 'Home' page features a place where the latest news regarding FoodTree's activity will be published. It also showcases the different brands that we have, ordered by recommended, trending, new, etc.

In the 'Nearby' page, there will be a Map and List view feature that users can select.

Map View: When the user clicks on any one of the pins on the map, a pop-up will show, showing the available items the store has. (TBC)

List View: A list of nearby places will be shown to the user. We are also considering to implement filters for this page, so that users can quick select the places that they want. Location services must be enabled!

A search button can also be found on the top of the page. The user can search for a place he has in mind, or filter for a place -- he can filter from location (Islandwide, North, South, East, West), category (Chinese, Malay, Indian, Thai, Viet, etc.), and dietary restrictions (Halal, Vegan, Vegetarian, etc.).

On the 'Me' page, users can manually enter the amount that they have saved to track their savings throughout their time on the application (TBC). The user can also track their following and favourited places.

The user can also choose to write a review for FoodTree by selecting 'write a review' on the application.

An in-app inbox can also be found on the top right hand corner of the page. When new notifications come in, users are able to receive them in this inbox, regardless of whether they enable push-notifications or not.

This page also features a QR code camera, which will be elaborated further on in the business user section.

Main Page [Business]

When a user signs up as a Business user, this is what he will see when he first enter the application. The 'Home' page and 'Nearby' page will be identical to that of the customers.

The 'Me' page of this user features an 'Edit Notification' and 'Signal Boosts' function.

Edit Notification allows this user (main user) to edit notifications from all of the branches to be sent out on a specific day and time. The user can configure the repeat details: None, Every Day, Every Week, Every Month, Every Year or Custom.

Signal Boosts allows this user (main user) to send out notifications to each and every individual using the application to their in-app inbox, regardless of whether they've 'liked' their page. This is similar to advertisements.

Manage Accounts shows a list of sub-accounts that the user has, each with a unique username tied to it. The main account can then manage its branches from there (further elaborated down below).

The above image depicts how a sub-account would look like. Most of the functions are similar to that of the main account, except that these pages are specific to that branch only. There is also a place where the user can easily record their inventory for the day as well as record the total sales to better predict the amount of food they have to make each day (KIV).

Additionally, there is also a QR code that is uniquely assigned to each branch account. Users with FoodTree's application can open their QR code scanner and scan the code from the businesses, which will automatically record down the transaction date and time (KIV).

The above was a rough guide that my team and I came up with within a week. As we create the application, slight changes are expected to happen along the way.

See you on my next post where I'll be delving into our coding process with Swift.

Have a good year ahead!

xo,

Wan Ning