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:
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:
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.
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).
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:
Create an online experience to entice people to come in and visit their new restaurant in Dublin.
Attract people to work for the restaurant.
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:
Pages should include: Home, About, Menu and Careers
Optimised for mobile device access
Some drop-in interactivity
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:
Thindi – Dublin’s new, local Indian takeaway restaurant in Glasnevin
Domino’s – Global household brand
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.
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:
Animations, Interactions & Behaviour
Behaviour on Mobile Devices
Accessibility, Usability and SEO
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.
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:
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