Di Mario’s Website

Di Mario’s Website

Performance Analysis

On Di Mario’s Menu page, ChromeDev analyses that it took approximately 3.9secs to load 27 requests with a total size size of 12.4MB or resources. I can see that the menu item images took the longest time to load, with the largest file being 2.9MB. This particular image is 1500px in dimensions. While the images look nice and are coloured to match the site’s overall aesthetic, these images can be compressed more as it does not require full screen display and instead affects the load time of the site. On Lighthouse auditing tool, the site scores 62% on performance with its main suggestion being “properly size images” followed by “efficiently encode images” which reiterates that the main issue with the site’s performance is the size of images.

Menu item images, while large in file size and resolution, are only displayed on the site as medium-size thumbnails.

Read More

Week 9: Client Feedback & UX User Testing

In this week’s class, I was able to get some client feedback. Here were several issues raised after presenting my initial prototype:

  1. Checkout / Order page had too many headers that were visually contending for attention (cognitive overload). I need to better differentiate the order section from checkout.
  2. Date and time of “Last Order” should be added.
  3. Minimise paragraph on About page as it is too wordy.
  4. Add Value Proposition on Homepage. Client likes the description of “fresh, local, all-Irish produce” written in About page. This should be added to the homepage to identify a unique selling point of the brand.
  5. Reposition “Last Order” and “Favourites” button to be above the “Meal Deals” banner as it better serves its purpose for convenience and speed for regular/ returning customers.
  6. Change “You” login page to “My Account” as the indication of “You” is vague and unclear.
  7. Add more interactions to better illustrate and portray navigation and UX of the final product.

Read More

Week 7: Survey, User Stories & Ideation

As introduced in the end of my last post, we created a survey investigating a broader group of Users’ experience ordering food online. We sent it out to 63 people and received 58 completed surveys back giving us the following final report which can be viewed here:

Survey Results: https://martinr.surveysparrow.com/public/reports/survey/87853/pMv4i4vc

The results have proven the following:

  1. 90% of users use a smartphone to order food.
  2. 61% prefer to check out their order as guests.
  3. Most common abandonment point of the process is when the website is too confusing.
  4. 76% of users choose their food based on text descriptions.
  5. 53% of users prefer a smaller menu to select from.
  6. Most users give a on-the-fence (3/5 on a scale) opinion on the statement “Most websites take too long to complete your food order.”
  7. Most users (although not by much) are willing to trust less well known brands.
  8. Most users expect 10 – 15 clicks to complete a food order.
  9. The most popular priority during the process is live price update.

Read More

Week 6: Mapping Empathy

In this week’s session, we developed the following based on our tutor, Martin:

• 1 User Persona
• Conduct User Interview & User Task: Order food on Apache website
• Identify pain points and issues with site from user interview / task
• User Stories based on Persona
• Create Empathy Map based on Persona
• Create a User survey as a group to send out to at least 10 – 20 Users

Based on a short description Martin gave of himself, I created a User Persona to work off, for the interview and finally the Empathy Map:

User Persona “Martin” developed, based on our tutor.
Click here to enlarge.

Read More

Part 1, Section A: UI/UX: Wireframes & Prototypes

In the third part of my first assignment, I have constructed wireframes for each of the case study brands using drawi.io as it is a free and easy introductory program to wireframing. Other programs that I have been recommended by UX designers, that I would like to try are Figma and Adobe XD which I may have a go at, in the prototyping phase. Draw.io however, has proven to be easy to use, intuitive and uncomplicated in its click, drag and drop functions. It also allows you to save each project to your Google Drive and design multiple pages for one site, linking them together with button paths.

For each of the brand, I have done a quick sketch on paper first before construction on draw.io. As it is my first time drafting up wireframes, I found sketching it out useful to have a general structure in my mind before opening the program. In my experience working as a digital designer, a pencil sketch is my go-to first step for the design process. As evident in the wireframes below (they are presented in the same chronology as how I made them), the outcome gets better with each time I use the program, proving immediate improvements from every practice. Read More

Part 1, Section A: UI/UX: Colour, Font Choice & Readability

Colour

Thindi adopts a complicated, contrasting colour palette for its website. While its logo uses Red and Yellow, these colours are not referenced in the website. Instead, I find Orange (#fc6e1f) to be the primary colour even though it does not command the most visual weight on the page. I come to this conclusion because the key buttons (Order Online) are coloured Orange to draw attention and it is the first noticeable block of colour on entering the homepage. Moreover, Orange seems to have been used to match a lot of the food photography of their curry dishes. I find orange to be quite a common colour used on food websites (ie. JustEat), as it is an organic colour found in food, although on Thindi it is much brighter than organic. Orange is appropriate for an Indian takeaway as it evokes a sense of heat and spice in cooking. The brightness emotes energy and optimism, feelings of which consuming food should give you.

There are blocks of two other colours on this homepage- Turquoise (#14a892) and a deeper Maroon at the footer (#4f0504). On the colour wheel, the contrasting colour for Orange is Blue so Turquoise is theoretically a good choice for a secondary colour for contrast. However, this scheme is a complicated one coupled with a tertiary Maroon colour, none of which are in the brand’s logo. I appreciate the bright pops of colour throughout this website but I feel that the choices are disparate and can be unified more so as to not distract the eye while navigating through.

My suggestion for design improvement for Thindi’s website is to use the logo’s Red as the primary colour and Turquoise as its contrasting, secondary colour- used only as an accent. Maroon should be used as a darker complimentary colour to the primary logo Red, perhaps just for text or on a smaller footer and or navigation bar (refer to below diagram).

REF 1: Colour study & recommendation for Thindi.
(Source: Material Desing: Color Tool https://material.io/resources/color/#!/?view.left=0&view.right=0)

Read More

Part 1, Section A: UI/UX Nielson’s 10 Heuristics

In this exercise we are given a sample client brief: a new brand who is looking for Web Design consultation to launch their new website to coincide with the opening of their new restaurant. The brief outlines three primary goals:

  1. Create an online experience to entice people to come in and visit their new restaurant in Dublin.
  2. Attract people to work for the restaurant.
  3. Providing the media with information needed to do an initial review of the restaurant.

The client brand DiMario’s is a wood fired pizza specialist, with a target audience of a younger demographic consisting of college students, news and social media, influencers, families and potential employees. The objective of the brief is to create a functional website that is interactive, clear and delightful to use while being accessible and adherent to modern trends. Here are some of the site features the client would like, outlined in the brief:

  1. Pages should include: Home, About, Menu and Careers
  2. Optimised for mobile device access
  3. Some drop-in interactivity
  4. Rich image gallery and PDF Menu download

In this part of the exercise I will be using Nielson’s 10 Heuristics to assess 3 brands similar to DiMario’s to conduct Market Research and Competitor Analysis. The objective of this exercise is to utilise the Heuristics as a tool to preliminarily examine websites according to a set, standardised grading system that can be done by the UX researcher, him or herself. As defined by Wikipedia, the term “Heuristics” is a term to describe “an approach to problem solving or self-discovery that employs a practical method…sufficient for reaching an immediate, short term goal or approximation.” (ref: https://en.wikipedia.org/wiki/Heuristic) The 3 brands that I have chosen for this research are distinctively different from each other, broadly covering the competitor market for DiMarios’s:

  1. Thindi – Dublin’s new, local Indian takeaway restaurant in Glasnevin
  2. Domino’s – Global household brand
  3. Bao London – A successful, award winning London-based food business owned by a personal friend of mine.

I have designed a scoresheet (please open image in new tab to zoom in) which will function as a checklist for the 10 Heuristics. On this I have noted down issues, comments and recommendations. After each brand assessment, I will highlight the pros and cons of the website, throwing a spotlight on key usability strengths and issues that I encountered while completing the user task of ordering food for delivery on the website. Read More

Part 1, Section B: Web Design

For this assignment, we are given a sample client brief, a new brand who is looking for some web design consultation. The client is a new wood-fired pizza restaurant and takeaway, Di Mario’s who is looking to launch a website alongside the opening of their new restaurant and takeaway. For this research assignment, we are tasked to analyse 3 similar brands that I can reference for comparison, inspiration and similarly, things to avoid in Web and App design. I will delve more into the UX/UI side of my research in my subsequent posts which will cover usability, design, wireframes and prototypes. For this post, I am focusing on web design principles, examining 3 real-world case studies from a front-end development standpoint, questioning- what does a good food and dining experience look like on a website and app? How do I recreate that for my client?

Many new restaurant and food businesses now use websites and apps, especially with the heavy consumption of takeaway and delivery, to promote and advertise their food and dining experience. It is quintessential that my client brand adheres to industry standards of functionality, efficiency, design and construction for its website and app to launch with a competitive edge. In my research I will be looking at Thindi (Dublin, local), Domino’s (global) and Bao London (a personal friend’s successful London-based food business). I will be focusing on three areas of analysis:

  1. Animations, Interactions & Behaviour
  2. Behaviour on Mobile Devices
  3. Accessibility, Usability and SEO

Thindi

1. Animations, Interactions & Behaviours

The website is fairly minimal in design and could afford to have more animation and interactive features for greater delight in browsing experience. I however enjoy the clean layout and especially the sections of text boxes overlapping images. The site uses 3 contrasting, block colours (#fc6e1f, #14a892, #4f0504), clearly demarcating sections and text boxes. The homepage has a large banner (div.content-wrapper) that has a look-book style gallery of attractive food photography that “flicks” through on its own. I found the body text a little too large (16px) for a basic (Avant Garde Gothic Pro) sans serif font. The ordering site which seems to be separately hosted by Mobi 2 Go had more animation features with a rollover buttons on the menu pages. This feature is handy in making it clear to the user that an item is “clickable” or about to be selected.

In ChromeDev Tools I have identified that the website takes approximately 2.26s to load 78 requests, 17.4MB resources and 12.9MB transferred.  I have identified one linked script fbevents.js that is blocked but takes 174ms to load- this should be removed. I have also noticed that scripts are at the top of the waterfall, suggesting that the scripts load first before the other types of files and links.

Gallery on homepage and images changes on its own. (source: http://thindie.ie)
Text boxes overlapping images. (source: http://thindie.ie)

2. Behaviour on Mobile Devices

When I accessed Thindi on my mobile device, the layout and features appear to be the same as on the browser (considering the website is generally simple by design). I do not feel that the site is fully adapted for mobile device screens as Some of the images appear to be cropped in the gallery images but it is not overtly noticeable or visually disturbing.

The load time on a mobile device, fast 3G network took approximately 19s and taking up to 30s for the images to start changing on the banner. This is quite poor performance. Some of the images while lovely to look at are very large for a mobile screen (and on a slower, less reliable network). The largest image is a 1.2MB sized png file that took 17.13s to load. Perhaps images can be further scaled down for optimal mobile device use. Otherwise, would it be possible to remove the gallery and just have one static hero-image in place?

On Lighthouse auditing tool, the website faired poorly for mobile device access with a performance score of 24%. The time it took to interact with the website was 10s. The lead suggestion that Lighthouse gave is to remove unused Java Script with an estimated time saved of 3.95s.

3. Accessibility, Usability & SEO

I was unable to find any keywords on metadata tags in this website which explains why, when I search “Thindi” or “Thindi Dublin” in Google, the website (not Facebook page) does not come up in the first page of results. This is a great opportunity loss that can easily be rectified by adding some relevant keywords such as “Thindi”, “Indian”, “Takeaway”, “Dublin”, “Glasnevin”. As the restaurant is only recently launched, I assume that the website is still a work in progress and the brand is preliminarily advertising through their Facebook page, where SEO is embedded in the platform.

I did notice several Twitter metadata tags. Coupled with the heavy reliance on Facebook, I infer that the brand is attempting to trend and promote itself on social media. Thindi is perhaps using its millennial branding to reach out to local influencers to promote their food. Consumer vs Influencer, Trending vs Evergreen (REF: https://www.searchenginejournal.com/seo-guide/seo-strategy-trade-offs/) are common tradeoffs that we can observe in new businesses that target the younger, social-media savvy consumer.

Lighthouse tool has given Thindi a 92% SEO rating. It does note however, that “there are additional factors Lighthouse does not check that may affect your search ranking”.

 

Domino’s

1. Animations, Interactions & Behaviours

Domino’s website is very brightly coloured with animated effects through out the navigation of the page. For example, the navigation bar at the top has a rollover buttons that change from blue to red (Domino’s primary brand colours) when your cursor hovers over. With a load time of 3.04s for 69 requests, I find the site fairly optimised for performance. In Chrome Dev I have identified 5 blocked scripts- this should be removed. Interestingly, I found the same fb.events script that I saw on Thindi’s website.

When you access the website there is a pop-up promoting Domino’s deals. This is very directive and effective as I used a deal myself for good value. In the Elements tab of Chrome Dev this pop-up has an embedded HTML, <div class=”arrival-modal”>. There is also another pop-up promoting the new vegan pizzas on the menu, on the top left corner in green (apt colour choice). This pop-up also has a gif animation of fireworks to catch your attention. I especially love the graphic of pizza slices that the site uses for loading screen.

Pizza graphic loading screen. (source: http://dominos.ie/menu)

2. Behaviour on Mobile Devices

When I access Domino’s on my phone, the same pop-ups are a little annoying as it covers most of the Home screen- 4 of them overlapping and I have to X them one by one to access the main page. Perhaps these pop-ups can be removed for mobile access. Pop-ups aside, the site functions and looks mostly the same as on the web browser. It appears to load quickly (even the many pictures of pizzas) on my mobile network (Fast 3G). The rollover buttons are(sensibly) removed from mobile access. On ChromeDev the mobile site (Fast 3G) takes 9.18s to load. I suspect that many of the blocked JS that attempts to load first, bogs down the loading time. The thumbnail pictures of the pizzas are downsized for mobile viewing (from 230px square to 170px). Domino’s also uses <meta name=”viewport”> tag to define the area of the window in which web content can be seen, controlling the layout on mobile browsers.

I was surprised that similar to Thindi, Domino’s had a poor mobile device performance score on Lighthouse of 20%. “Time to interactive” is 15.2s and the main suggestion by Lighthouse is to eliminate render-blocking resources, with an estimated 1.61s time saving. The second suggestion is to reformat images in next-gen formats for “better compression, faster downloads and less data consumption”.

Pop-ups on top of each other covering the device screen. (source: http://dominos.ie/menu)

3. Accessibility, Usability & SEO

Domino’s does a pretty neat job with SEO, being a global household brand. In the HTML elements, I can see that there is the meta keyword “Pizza delivery” and IE locating it as pizza delivery in Ireland- effective and straightforward. The <meta name=”title”> tag has “Order Online For A Tasty Pizza Delivery | Domino’s Pizza” which is meta data content that crawlers may or may not use in browser information, in Google’s case seldom for indexation purposes. Perhaps they can lose this tag and add more keywords such as “takeaway” and “Ireland” for greater searchability on browsers. Domino’s has however, <meta name=”description”> tag, “Visit Domino’s Pizza for a tasty pizza delivery or takeaway near you…” which definitively describes the site on Google search.

Domino’s is scored 91% by Lighthouse for SEO. Lighthouse has flagged that “Page is blocked from indexing” siting that permission is needed for search engines to crawl Domino’s pages. This might be a trade-off that Domino’s does not want to take- having its website advertised without permission, potentially overloading and annoying users. For reference, the blocking directive source is <meta name=”robots” content=”no index, no follow”/>.

 

Bao London

1. Animations, Interactions & Behaviours

From the get-go, Bao London website is a beautiful one with a very artistic, trendy, lo-fi aesthetic that is at once fresh and exciting. In its homepage you are greeted (taking up almost the whole page) with a cool video of branded takeaway boxes stacking up on each other and covering the screen, illustrated with its distinctive lo-fi, pixelated aesthetic. I found that this is a video source (looped) with the code <div class=”video-wrap”> and the video itself is an uploaded mp4 file. I also like the crawler at the top promoting complimentary national shipping which is a text marquee, reminiscent of 90’s style HTML/CSS lo-fi websites.

The overall colour scheme of the website is monochromatic with all the text and navigation menus in black and white. Navigation buttons have a simple rollover effect that highlights the area when your cursor hovers over. In the menu, some thumbnails use video loops (also uploaded mp4). I especially like that some items uses two images so that when your cursor hovers over the item, it changes to a picture of the food product, with a bite taken out of it. The code for this is <div class=”second-img”>. In the navigation bar, the website uses 8-bit type graphics, some animated gifs, for icons such as “Shop Home Kits” and “BAO Borough” which I find visually very well designed. I would like to additionally note that the website utilises minimal JavaScript.

In ChromeDev, Bao takes approximately 1.55s to load, and 7.77s to finish 36 requests. This is impressive considering the number of linked mp4 videos in the website. Unlike Thindi and Dominos, I did not find as many blocked scripts that attempted to load. Partly due to the lo-fi aesthetic, the linked videos on this website appear to be significantly compressed for optimal website performance. While you can notice some artifacting in the video, it is in sync with the overall design aesthetic of the brand. Photography on the other hand (ie. 720 x 972px) is quite large but superficially, does not seem to affect the overall performance.

Loop video on homepage. (source: http://baolondon.com)
<div class=”second-img”> (source: http://baolondon.com)

2. Behaviour on Mobile Devices

On a mobile device, Bao London has a much longer load time of 18.38s on Fast 3G network. Most noticeably, the large video on the homepage is taken out of the mobile site and is replaced by a static graphic, “Bao Connect” which is the linked page for the video. The menu uses the same “second image” effect, such that the second image appears when you click on the link, as opposed to when your cursor hovers over. Images on mobile device access are well adapted for mobile screen and I don’t see any images cropped, stretched or awkwardly resized. The high-res images do not seemed to be scaled down for mobile access (as in Domino’s) which could potentially affect the performance of the site on mobile devices.

Bao scores 57% on Lighthouse for mobile device performance, fairing better than Thindi and Domino’s. The lead suggestion from Lighthouse is “serve images in next-gen formats” listing JPEG 2000, JPEG XR and WebP as image formats with better compression than JPEG and PNGs. It also suggests using an image optimisation WordPress plugin for a list of images that are relatively large in size and resolution, for a mobile network to load.

3. Accessibility, Usability & SEO

Bao appears to be well optimised by <meta name=”keywords”> tag with a list of 30 keywords. I would comment however that this is a little bit of keyword overloading as some keywords such as “dream drinks” have less relevance and the brand is potentially trading off relevance for traffic. I can see as well that the site has all the meta tags for description, title, site_name, listed and appears to be very thorough with SEO.

Bao is scored 83% for SEO by Lighthouse. Its main suggestion is to add descriptive text to links but I am guessing that these links without a description are the linked videos for which it may be unnecessary to add. Descriptive link text functions to help search engines understand your content. Lighthouse has also identified that [alt] attributes can be added for image elements. The alt attribute “specifies an alternative text that is to be rendered, when an element to which it is applied to cannot be rendered.” (REF: https://en.wikipedia.org/wiki/Alt_attribute) This is particularly relevant to this website considering several large, high-res images may fail to load on a slower and less reliable network.

UX Research: User Interview & Test: ASOS

“Although functionality is still the top priority, now digital products are also required to be user-friendly and visually appealing.In this context, UX (user experience) testing is a cornerstone of the product’s lifecycle.”
Brooke, Sophia (2018) The Essential Toolbox of UX Testing Methods
https://uxplanet.org/the-essential-toolbox-of-ux-testing-methods-6e8e564768c3

UX design and research is extremely important in the improvement of digital platforms to keep up with the expanding and rapidly modifying competitor landscape. For corporate businesses, it gives insight into the consumer market, realising behaviours, wants and needs- sometimes very personal, nuanced and even subconscious. It is the role of the UX designer / researcher to explore these subjective behaviours and opinions, and qualify them in data that can instigate action and steps to improve the experience of a given product.

I have summarised User Research, its types, means and purposes into the following flowchart for my personal reference:

Read More

Just Eat App

Being a person who frequently orders takeaway, I find myself using takeaway apps 1-3 times a week. The three most popular food delivery apps in Dublin are Just Eat, Deliveroo and Uber Eats, the former two of which I use. In this post I would like to do a small review of Just Eat and point out one inconvenience I find in the app which can be improved. Admittedly, it is the most popular and dominant food delivery app that has brought a lot of convenience to my life so while there is room for improvement, it is unlikely that I will ever stop using it.

Firstly, I love the layout of the app and I like that my orders, addresses and payment methods are saved for quick re-orders of the weekly usuals. All this can easily be accessed in the drop down menu on the top left corner with clear pages – Find Takeaways (search), Orders, For you (offers), Settings, Help and Log Out. I also like the bright orange icons and simple but eye-catching illustrations of the different food cuisines. I personally like the orange colour used for food-related packaging and marketing as it is a warm colour that reflects a lot of the earthy colours in food (ie. brown, yellow, white, orange, red). As you browse through the different restaurants on the app, you will scroll through many images of food photography that will whet your appetite if you weren’t already hungry.

There is just one annoyance that I have with Just Eat that I have experienced: Sometimes I browse for new takeaways that I have not tried before on Chrome. When a takeaway does not have its own website for you to view the menu, you are directed to the Just Eat app. This is where it gets problematic because when the Just Eat app launches, it does not go straight to the restaurant’s menu. You will then have to go through the following steps:

1. Enter your address
2. You will be directed to a page with all the restaurants available in your vicinity
3. Find the search bar to type in the restaurant you were originally looking for
4. Search Read More