This is an entry for the evaluation of my Pasto app prototype dating from 6/07/21 – 12/08/21.
Before I started building the app I needed to ascertain what the companies brand identity was. Pasto are a traditional Italian restaurant serving traditional dishes therefore, the logo for Pasto needed to be eye catching whilst retaining a traditional Italian aesthetic to suit the existing brand identity. I conducted some market research into the branding of large pizza delivery companies and also local Italian restaurants. I found that the larger delivery chains such as Domino’s and Pizza Hut didn’t aim to evoke an Italian feel to their branding. Papa John’s, whilst being minimal, did use the colours of the Italian flag, predominantly red, white and green.
The smaller independent restaurants in Birmingham relied heavily on their Italian influence with flags, olives, and paintings of the leaning tower of Pisa. This helped facilitate and convey the idea to potential customers that the restaurant served Italian food, through its branding.
Pasto’s Homepage:
I chose a deep red for the background colour as it has strong passionate and emotional effect on people’s perception of a product with strong links to the Italian dishes that frequently use tomato sauces as ingredients. I stayed away from green as it usually is associated with vegan and vegetarian only restaurants. I added a pizza pan to the top left above the ‘P’ and then a slice of pizza at the bottom right side under the ‘O’ and beneath the logo the phrase ‘The heart of Italy’. This phrase along with the two Italian food related symbols either side of the name was a way to illustrate Pasto was the heart of Italian food.
Analysis of the Logo:
I had originally made the pan and pizza slice icons on the logo a black in colour, but they were too harsh on the eye, so I chose a dark grey which softened the contrast of the red background and white font. I chose the font as it was chic and modern but retained elements of traditional typefaces used in Italian restaurants and brands. Although I thought it worked well, I think my design would’ve been improved if I made the pizza icon below the logo a green colour, just to give it a hint of that Italian flavour.
Pasto Call To Action Buttons:
I began to incorporate the brand identity I established last week into the landing page of the app. I included the buttons ‘About Us’ and ‘Contact Us’ as the brief stated so that customers could easily contact the restaurant and find out more about the restaurant on the home page. this makes the user experience easy and convenient as it contains all the crucial information about the restaurant on the first page.
I decided to have three prominently placed ‘call to action’ buttons in order to aid the user experience of navigating the app. I placed an image of the restaurants signature pizza behind the three main CTA’s for a more appealing layout rather than a solid colour background. I reduced the opacity of the image so it blends nicely at the background without being too overbearing.
The three CTA’s are: ‘Menu’, ‘Book a Table’, and ‘Delivery’ contained in rounded corner white boxes. I chose rounded corners to soften the appearance and improve the UI by highlighting they were buttons to press. As the restaurant is both dine-in and delivery I chose to place the Menu at the top to minimise conflict between the two identities of the company. On selection of the Delivery button, you are taken to a page asking for users to input their postcode.
Pasto’s Menu:
You are then directed to the menu with the four options: Pizza, Pasta, Drinks, and Desserts. Each of these has an image relating to the selection and were separated by thin horizontal white spacers to visually assist the UX. I added a Menu header below the now smaller Pasto logo with two grey horizontal lines either side, which broke up the blocks of which and subtly hinted at classic menu design and formatting. I continued with rounded boxes for each category but decided to make the font larger as they only contained a single word in each.
Customising the menu:
When designing the menu UI, considerations were needed in the combination of form and function. The menu needs to be enticing and appetising to the user but also clearly displaying the information. I chose to use a white background for ease of reading. Each item needed the name, description, and picture to be clear and concise for the user. I chose a uniform layout with the images on the left with the name and description on the right. The ‘Add’ button was placed at the bottom right of each box and continued the consistency of the button shape with rounded dark grey boxes. I added elegant thin dark grey line to break up the expanse of the white background and to separate the items. This is when I determined the addition of a ‘Back’ button on sub-pages would aid navigation of the menu when placing an order. On clicking ‘Add’ you were taken to a ‘Customise your order’ page which shared the same header font and grey lines as the menu page. This section allows you to select the portion size of the user’s order.
Stating ‘Your Pizza Order’ on this page also brings a personal connection to the transaction for the user. The price and indication of size was displayed on the left side and ‘+’ and ‘–‘ buttons on the right. The ‘–‘ button improved UX by allowing for fast alterations to the other without having to go to the checkout page. The final stage before heading to the checkout page is a display of confirmation of selection. I chose green for the checkout button as I wanted the user to feel relaxed and easy about the transaction. Green brings positive connotations such as ‘go’ at traffic lights or ‘correct’ in a quiz, red would have been too aggressive or threatening to use for the same reasons.
Pasto’s checkout page:
The next stage of the customer journey is the checkout page. I wanted to make this page as clear and concise as possible. I achieved this by continuing the clean white layout of the menu pages with ‘Checkout’ and accompanying horizontal lines under the logo. I found that the market leaders were focusing on add on sales of sides, drinks, and deserts at the checkout page in the form of pop-ups. This can be confusing to customers as some may believe something unwanted has been added to their chart. Whilst having add on sales is a good money making tactic, I decided to not include them in the checkout page as the restaurant relies on delivering quality traditional food rather than using quick money making tactics. This could be added at a later date should the client wish to include a page in between their last selection and the checkout page. This could be a simple page asking if the customer had room for desert or wanted to add drinks to their food order. I also refrained from including any distracting images or text and instead chose a simple ‘complete your order’ and a thumbs up symbol.
Pasto’s checkout & payment method:
There is also a confirmation of the price to the customer including delivery fee. The payment methods were in clear view at load up to minimise the user having to scroll or use drop down menus and the user selection was indicated by a simple tick. On reflection I could have added a light green shading to the selected payment method, but at the time of building my research into Pizza Hut, Domino’s and Papa John’s suggested they were also choosing the less distracting tick instead of fully shading the selection. To guide the user out of the checkout post payment there is a simple ‘Next” button at the bottom of the screen.
All the major market leaders include a form of order tracking once an order is complete. This is usually included on the confirmation page or via a link. I chose to include this on the confirmation page to streamline the UX. Therefore, confirmation page includes the ability to track your order in real time via a map and estimated arrival time. If the customer does not wish to continue to track their order, then they can return to the homepage by pressing the Pasto logo or the green ‘return to homepage’ button at the bottom of the screen. Below the map I included the delivery address along with a help button should the customer need to change their order or require assistance.
I then ran the process of an order and found that adding a ‘cart’ link at the top right of the menu sub-selections would increase checkout speed and ease of navigation. I have compared the UI and UX for the confirmation section to the market and found mine to be simple but effective. Pizza Hut use cartoons on their confirmation pages to notify where your order is in the production and delivery timeline. I tested this on family members of various age groups and the predominant feeling whilst it was entertaining, it was confusing. This strengthened my decision to only include the thumbs up symbol in the checkout stage and then the live map and time updates on the confirmation page. Whilst I agree that the Pizza Hut cartoons are entertaining the map is far more useful at improving UX. Dominos utilises ‘DOM’, a character who shows the timeline from order confirmation to and whilst this is a more direct and logical method of tracking an order it finishes at ‘out to delivery’ rather than giving live locations of drivers included on apps such as Uber Eats and Deliveroo.
Pasto’s booking & online delivery:
At the homepage, when you tap on the Book A Table CTA button, it takes you to the reservation page. I added the title of the page ‘Book A Table’ so users can know what page they are on. I sorted this page into 3 rows which consisted of: guest number options, option to choose a date, and option to choose a time. I did it in this sequence priority because it is clear and easy for the user to book a table.
Then, i included a next button that takes you to the final page where you can input the name the reservation should be made under. I think it is a good idea i included this action last because it consolidates the user experience by personifying the reservation. Additionally, I added an email option below it so that users can entire their email and receive an email confirmation with their booking details. This assures them their booking was successful.
The confirmation page gives extra reassurance that the confirmation was successful. I added the message: ‘We hope to see you soon’ because it shows the user that we are anticipating their visit which makes them feel valued and welcomed.
My Target Markets:
I had been focusing my market research for UI design and development mainly on companies focusing on delivery services. In order to design an effective table booking UI I needed to research my target market, which is Socio-Economic Classification: ABC1, who were based in Greater Birmingham, broadly within the West Midlands area. My target market’s age ranged from 20-40. Their psychographic classifications are explorers, Reformers, Succeeders. Their behaviours and interests are cosmopolitan outlook and foodies.
In the brief in class, it also stated that my target market consists of students and young professionals (and some young families) interested in good quality food on the go who are willing to pay a little more for good quality, authentic food. Because of this, I thought to research my competitors who are Italian street food restaurants, based in Birmingham. I chose three of the top restaurants in Birmingham: Wildwood, Pasta Di Piazza, and Cucina Rustica.
Analysing my competitors UX & UI:
Both Pasta Di Piazza and Cucina Rustica’s landing pages were predominantly directing you to book a table whilst Wildwood (on direction to the Birmingham branch) had the booking section at the bottom of the page. I found that the immediacy of the first too where much more effective and efficient. Wildwoods booking page was more focused on describing the atmosphere rather than allowing people to book. This didn’t make sense to me as most customers will have already decided they wanted to visit the restaurant after following the ‘Book a Table’ link. Wildwood’s page did include their opening times on this page which the other two did not however Pasta Di Piazza and Cucina Rustica’s utilised OpenTable which only allows you to select the available times from the drop-down menus. I found it to be much more streamlined to have real time indications on availability rather than having to cycle round a few times with Wildwood’s ‘check availability’ tool.
The best approach was to use a live calendar with available days highlighted for the customer to select along with separate menus for the number of guests. The combined result of the two would then display available times below. Once the user’s selection is made you are taken to a page asking for a name to place with the booking. In order to minimise confusion, I thought it was appropriate to ask for a name by means of a full sentence ‘What name should the reservation be made under?’ rather than ‘Name’. This also made the UI more welcoming and human-like.
Evaluation & conclusion from testing my app prototype in real life:
I took this week to run tests with family and friends to get feedback on the UI and UX. I asked them to comment on the functionality and their experience when using the app and compare it to other apps they had used. I also would welcome any of their suggestions on the aesthetic design of the app. Overall the app received mainly positive feedback. Positives were the aesthetic design of the app was inviting and modern without distracting the user and the UI was elegant but still easy to navigate. There were some criticisms that were raised about the calendar on the booking page being too small making date selection difficult at times.
This is easily rectified as there is space to expand both horizontally and vertically. A confirmation page was suggested to be at the end of the table booking process which was added along with a ‘Return to Homepage’ button below the confirmation messages. The basket icon in the top right wasn’t a live link on all pages. The presence of an indicator of where your order is in the preparation not just delivery was also mentioned, which means that a Domino’s style ‘DOM’ timeline could be a possibility in app development. When compared to apps like UberEats and Deliveroo some test subjects suggested a means of contacting the driver along with being notified about their name and mode of transportation would also be useful.
I will make the necessary technical changes and improvements to the UI. I have continued to research and develop ideas for further improvements to the tracking page. Uber Eats and Deliveroo both allow for information and direct contact with the delivery driver. Whilst this is useful for larger companies relying on multiple drivers the restaurant will need to confirm on their position in either using a delivery company or providing their own service.
I have found the process of building this app rather informative of aspects in UI and UX I hadn’t considered before. Overall, I feel I have succeeded in creating an elegant and functional app that meets the requirements of the client with considerations to the market and submarkets.
