Page 1

Information: It’s interesting to see how they’ve used barely any information but more visual work on the first page to draw the customer’s attention and as the user proceeds the website, they get a better understanding of “Munchery”. The understanding is developed through the user’s experience.

Welcome page: Instead of explaining what Munchery’s service is about, they’ve displayed a large photograph on their welcome page, which I find quite self-explanatory. Other than showing the variety of food which is their main focus but they’ve also included items such as keys, a book, bag, cards, wine opener etc. These items represent different busy lifestyles. Also the spilled sauce and water droplets may represent the speed and enjoyment of their meal. These small details have have concluded what the photograph is suppose to represent which also supports their bold simple statement “Wholesome meals in a snap.”

Text: I think it’s important to have a bold and simple statement that not only represents your service but it persuades the user to proceed out of interest and curiousity. I definitely feel that the typefaces they’ve used fits in with their branding (simple and bold) which is important because you have to ensure that the branding all connects and stays within one identity. The colour used stands out because of the placement and not because they’ve used a bold and vibrant colour to catch the user’s attention. I recommend websites to stick to at least max of three colours when picking the palette and making sure that it works well together.


About: After the photograph, you scroll down to get a much better understanding of Munchery’s service as they explain in small four paragraphs what they’re about. Also placing small illustrated icons on the right-hand side to further explain the “uniqueness” of their system. The icons definitely helps balance the formal approach and overall the layout of this section is easy to read and straight-forward.

Chefs: As you scroll down the welcome page, you will then be introduced to Munchery’s chefs. I think this section takes unecessary space because there isn’t much text and the photograph is more dominant. However, it’s interesting to see that they have a rating system underneath the chef ’s name which eatro could consider.

A simple subscriping section that is fixed above the screen as you scroll down.

Fresh ingredients: This section includes further information about their ingredients but again, is it necessary to have and to use this much space? On the other hand, in terms with space, this would be better than having a sperate link. Also they’ve mentioned “fresh ingredients” on the about section which means they need to support that statement (developing the trust and dependacy relationship with the user).The small links above allows them to keep their website tidy and acessible instead of scrolling down for more info.

Further information: It’s always nice to see what press, charities, fundings etc are involved with the company as it builds the trust for new users and it’s bonus to see how it impacts the community. A lot of companies are ensuring that they’re making an impact towards the community, especially eco-friendly materials which is almost a must-have for all companies to have. However, this can be an on going development/research. They again use simple illustrations to represent their information, which means there isn’t much text needed.


This simple layout allows important information to be displayed clearly which gives the user to a better understanding, instead of displaying too much information which can be overwhelming to read. Interesting to see how munchery explains the “uniqueness” of their company, in terms with packaging, charity, food etc. Not only what they can provide their customers but to the community as well.

I personally think that the title link doesn’t match with the content as it’s more about the company instead of providing information of how the system runs. It’s important to ensure that certain titles etc matches with the information will give the user a much better experience.

There’s a further impact in purchasing their food which may persuade people more to use their service. Similar to the innocent brand.

It’s clear to identify that they’ve thought through clearly on the materials used on their packaging and how the food will be displayed and how that may benefit the customer. It seems as if every design has a reason to it.

It’s interesting to see how they kept their design theme consistent on the packaging and how they used the surroundings to compliment the design, for example the yellow cutlery, orange and yellow drinks and orange carrots. This allows the whole structure to stay balance without being too overwhelming, and then the white background to keep a clean look. Packaging: You would think using the colour orange and yellow would be quite vibrant and articfical for food, but the careful selection of palette allows it stay subtle. The colours definitely give a much positive and fun look. The level of “fun” is balanced out by the structure of packaging and typeface.


By seperating the selection of the food depending on the avaliability will allow users to look at the listings in advance, instead of scattering the photograph altogether. It creates a much better accessibility instead of the user searching through different webpages.

This quick and easy function allows the user to skip to a certain course, instead of constantely scrolling through the page. It definitely benefits listings that have a lot of variety of food. It’s important to ensure that the webpage connects and flow by providing functions that would benfit the user’s experience. Questions: What common questions may they have when looking through the page and how can you include a simple function to answer to it? If you do, does it flow well as a whole?

I think the way they’ve structured their listings would be effective towards the customers because it allows them to see the variety of food in one go without having to click from one page to another etc. The number of photographs can become slightly overwhelming as the customer may feel as if there’s too many choices, however the simple and clean layout balances that out.

Munchery displays the important details in very a simple statement. Also including keywords of what food the category belongs in which will help any customers who not only suffer from allergies but may prefer the food to be vegeterian, organic etc. Improvement: They could develop this slightly further by making the keywords into links, similar to the “#” that social networks have. It narrows down the search, especially useful for user’s who have their own preferences.


Icons Munchery may have more of a formal approach to their website which is interpreted by the positioning of their layout, typefaces, branding and photography. However, it’s interesting to see how they also include simple icons to give a better understanding and may be a more playful look to it? When designing icons, it’s important to make sure that the icons are easily recognised/readable. Not only has Munchery designed simple recognisable icons but on the main icon link, they have used their iconic orange to highlight the purpose of the function. A simple add of colour creates a small difference but creates a stronger definition to the icon.

Check-Out The “check-out” is similar to as if you were shopping for clothes online. It updates the bag as you shop and one dish is placed underneath another which allows you to view your “virtual shopping bag”. The dishes can be removed by changing the quantity which is preferred than having to go on the final check-out page to adjust it etc. Having a drop down bar allows the webpage to stay clean and not over crowd. Improvement: The only slight improvment I would personally change is the drop bar width because it extends too far which I find unecessary.

Having filters doesn’t only benfit the user’s preferences but it’s simple for chefs to tag the dishes instead of having to state it in the information section. It automatically adds to a list.

Delivery I’m aware that “Eatro” wants to improve their delivery system. Therefore this example of how they show the delivery options would be helpful. Very simple to understand without stated too much information and a clear layout. However, because the chefs at “Eatro” are local chefs, they’ll be able to adjust the time options that the user’s would be viewed. The placing of the delivery options is important because you have to think step by step how an user will be jumping from one page to another. For example, Munchery has placed the three important functions next to each other instead of scattering them at different parts of the page.


Other than including the details about the dish, Munchery has included other information such as prep info, ingredients, chef details, ratings and share via social networks. All information is minimum and layout nicely. However, I find the photograph too large and dominant of the webpage and the chef section could be not only smaller but placed somewhere else as you have to scroll to read that section. Opinion: The overall website of Munchery is wide which means everything has to be spaced out according to their original grid. This keeps the webpages to stay consistent but I find wide websites to be slightly overwhelming for the user’s eyes. It’s either the website’s grid or the large photographs.

The official check-out page then displays further options which can be adjusted such as pick up, payment etc. They decided not to include that on the summary check-out section as it’s uneccessary. It’s important to keep note that it’s unecessary to place all information on one part of the webpage, and when you do provide information, ensure that everything has a reason for it to be there. Less is more.

This function may only be provided by a bigger company because they’re able to employ workers who are able to provide the “Live help” service. However, it’s interesting to keep note of this function for further references. It’s similar to the “send message” function that “eatro” already has. This is a function that not only “Munchery” has but a lot of online retail stores, network providers etc. It may be something “eatro” wants to add on in the future as people are starting to get used to this service.


Munchery’s phone app has the same consistant design theme but the structure of it is straight-forward. and to the point. They’ve included the main points such as the menu, details of the food, reviews etc. However, the only negative point I would identify is there’s no filter options which results the user to constantly scroll through the long listings. That’s an unique navigation system that should’ve been carried from their website on to the app. It’s important to remember that phone apps are normally downloaded from people who are regular customers and would use the service often (on the go) which means they would like something simple and easy to use. It’s a shortcut.

The dishe’s detail page is almost the same as the webpage but worked around the phone app’s grid instead which I think works well. Simple and not over crowded.

As you scroll down the dishes detail page, you will then read the reviews which I think is a must have. A lot of businesses rely on what people have to say about the food, service etc such as tripadvisor, top table, etc. in able to develop their business further and to be recommended to others. The placement of the review sections is really acessible and not hidden as it just follows through after reading about the food dish. Keeps it flowing.


-

+ Other then inputing different functions and services, in terms with design Munchery has definitely identify different elements that work well together which helps the designs to stay consistent throughout navigating their website.

01 Choosing one of two typefaces that work well next together (main text typeface and headings)

02They’ve chose typefaces that are no only readable but it fits well with their clean and polish look

03The text sizes are adjustable 04They’ve made great use of their two colours (black and a pop of orange) and I find it interesting how they use orange to highlight points of the illustration which creates a clear understanding of the mesage

05Their layout spaces everything out well creating the right balance when scrolling through the page

Munchery and Eatro? Overall, it can be difficult to compare Munchery to Eatro because it’s not the exact same service, however they’re similar and even though it’s much more simpler, the functionality should be at a simlar level. The simplicity of the website allows the user to have a consistent flow when navigating through the site. How did they achieve this? Munchery has clearly identify the needs of an user and in-put it in their design, for example, filtering through the listings, checking delivery etc. Also, they’ve paid attention to the small details that contributes to the overall image such as sizing, typefaces, placements and so on. I have mentioned small work that could be improved on Munchery but that’s down to preferences and are only slight changes.

In terms with navigating Munchery’s website, I didn’t personally find any problems but my experience was slightly restricted due to it being a US website. Other than that, I felt the pages flowed well and it answered to any questions I had about purchasing the dishes. There were only slight changes I would develop on but this may be due to my own preferences such as:

01 Due to a lot of dishes on Munchery’s listings, it would be

preferably good to have a “Save” link which allows users to compare dishes when they can’t decide between the options instead of scrolling back and forward

02 The quality of the images are excellent but can it start feeling overwhelming because of the number of dishes they have? May be re-sizing the images? Especially if it’s unnecessary to have it at a large size.

03 It would be good if Munchery can carry the positive aspects of their website on to their phone app. For example, filters is a shortcut used to define the research which their phone app doesn’t have and phone apps are used on a go? Shortcut?

How can Eatro learn from their competitor Munchery? The current designs of Munchery is a re-brand from their previous designs which means that there must’ve been issues that they had and wanted to change.

Eatro are aiming for a more fun, close-community and social website instead of formal which Munchery has done. Therefore, in terms of designs, it shouldn’t be similar but understanding how they position and kept their website simple and clean is something that can be taken from this analysis because every website is design around how an user would navigate the site and how that would then impact their overall experience?


It’s clear to identify that Eatro have gone down the route of an informal and fun look to their website. The wood brown texture gives a slight organic feel to the brand, however does that look run throughout? I would also consider centering the logo in the middle as everything else is placed at the centre of the page?

The “become a chef ” is highlighted in the colour orange, but if another important highlight link is in turquoise then it’s best to keep it the colour. Depending on what colour works well with brown. Close kerned typefaces are normally difficult to read especially if it’s a thin. - Consideration?

Overall, I personally think it’s a good welcome page in terms with the design’s aim and the website’s structure. However, I think there needs to be some considerations and changes in terms with typefaces, sizing, positioning and colours that needs to be adjusted.

It’s clear to identify that Eatro’s main colour is brown, however the other selection of colours should be decided depending on what works well with brown? Stick to three colours as more than three, will become overwhelming and loses it identity. The three colours must compliment each other to impact the overall image.

Aa

I don’t suggest a closed kerned typeface to be used for the links. I would suggest a typeface that’s more versatile to all audiences which means simple and clear. Also, the current sizes are a huge contrast and there needs to be a constant balance when the user scrolls down the welcome page. It’s understanding that the larger text is suppose to be more focused, however there’s other ways to do that.

Home page: Interesting use of illustration because it’s not only fun and quirky but it’s also self-explanatory of what Eatro’s service is about (different characters, different foods and different homes), and then to support the illustration, there’s a bold and simple statement. I definitely feel that the welcome page is strong and illustrations can always be developed and expanded further as the business grows. However, the turquoise location box could be re-size slightly smaller so it doesn’t feel as if it’s dominating the illustration or either designed different and change the placement.

Aa I personally think the selection of typefaces could be adjusted because I don’t think it works well with the overall image of the website. Also the sizing of some headings are either too large or too small. Using a close kerned typeface that is not only sized small but also similar colour to the background will only make it difficult for the users to read. or barely noticeable.

!


A lot of websites now use illustrations to explain the step-by-step process because it’s more simpler to understand. It would definitely benefit Eatro’s unique service because it’s a niche in the market which people are still learning about. I think the illustrations definitely fit with the words right. The drawing lines may just need to be cleaned up more and may be a little add of colour?

The illustrations on this page could be cleaned up in terms with the outlines and also it may also be a good idea to re-size and re-arrange them on the website. Is it necessary for it to be spaced out? Also, looking at the descriptions under each heading, it would be good to cut them down to simple sentences.

Is there any need for a title? If so, may be shorten it.? Also the typefaces could be changed as previously mentioned.

Aa Typeface: The typefaces should be changed to a versatile typeface that is more readable and cleaner. I definitely don’t think it goes well with the overall webpage, especially the illustrations. Colour: It’s understandale why three colours were used (turquoise, orange and brown). Colour for each section. However, I think it’s best to keep to one colour for the small headings. The illustrations already differentiate them from others, no need for a change of colour.

I personally think the overall webpage could be adjusted in terms with structure and finding a certain grid that would work well for all of the webpages. However, in terms with the selected section (text), there needs to be a cut down on the amount of text displayed. Is it all necessary? Too much text can be slightly overwhelming for users to read. Would they read all of it? Is it Appealing? These questions need to be answered in order for further design development.

It’s interesting to see how the illustrations are being using elsewhere on the website because it links back to the home page. However, the illustration could blend in better instead of the harsh corners. In able to re-consider the placement of the illustrations, the text must be adjusted first in order to understand what space is left to work with.


This section’s size is slightly unnecessary and could be re-arranged. There could be an alternative way of moving the location map somewhere else such as a pop up when you click on the radius info (next to dish). It’s understandable that the map is important because of the new delivery service that Eatro will be introducing. Figuring a way the map could connect better instead of being placed to one side.

Instead of leaving extra space on the right-hand side of the page for the basket, a basket icon could be placed on the top right corner of the website. The basket icon can drop down which allows the users to view what’s in their basket. The current extra space means that everything else is squashed due to narrow page.

As previously mentioned, the eatro logo could be placed in the centre, which then means the location search bar could be placed on the left-hand side (where the logo is currently placed)

Aa Instead of having the dishes placed under one another, you could instead have them next to each other (In a row of 3 or 4) and the description will then be placed underneath the image. It allows users to get a better view as a whole instead of constantely scrolling. They’ll be able to compare if they’re stuck between choices? Also the images could be re-sized slightly bigger which gives a much clearer image.

The titles could be slightly smaller but instead replacing the typeface with a well kerned typeface. The linger the dishes titles are, it increases the difficult to read the title because of how compact the current typeface is. Also, the descriptions could be cut down which means may be giving the user a word limit. For further information, the user could then click on the dish to view it.

Reviews: The review icon could be changed to a rating system for example stars or pans? This allows the user to see whether it has better reviews instead of showing that it has 1 or 2 reviews etc which they’ll then have to go on another page to read and calculate themselves.


I personally think the colours of a photograph can sometimes over complicate the other colours involved in a design (website). May be consider black & white photo?

Where are these ratings coming from? Also it could be re-sized and placed underneath the photograph of the chef as it takes too much space and it then means that everything else can be re-arranged to look more cleaner and compact.

Characteristics: It’s important to include characteristics of the food in case there’s a user that’s looking around their preferences. An alternative is having “#” which allows users to find other food that’s dairy free for example. Also, it’s important to link the characteristics to the main listing such as a filter or a quicker search?

Verification: Instead of extra information being placed here, would it be easier having a verification icon that chefs can only have once being verified? I personally think that if there’s extra information that’s not benefiting anyone then it shouldn’t be there. The information that’s currently there could still be fake but it’s Eatro responsibility to make sure it isn’t, this is where the customer gains trust and experience with Eatro.

The titles and profile images could be re-sized because it would mean that more reviews are shown. May be also linking the title to the actual dish in case users are interested and would like to request etc. Another alternative is not having the profile images there and instead having a link on their name. The profile images creates quite a busy page. However, is Eatro aiming for a social networking style but instead for food?


I personally think this would be perfect for the chef ’s profile instead of the verifications section that I believe is unnecessary. It’s similar to giving a chef a certificate but for passing the verification test. Simple and iconic.

This function is definitely helpful as Eatro’s is still fresh, there’s bound to be loads of questions asked. Placing it at the corner is definitely accessible. This is an example of how you can answer to the user’s needs? Being one step ahead and that then impacting their overall experience.

Instead of these notifications, you could may be have another illustration here that demonstrates that there’s no dishes being currently cooked but a link to previous dishes that were cooked? Or a simple statement saying “Request a dish instead!” which could be placed underneath the illustration? Using the illustrations to maintain the fun and friendly image that they currently have.

The location icons could also be used on the dishes and when clicking on the icon, it can then have a map popping up instead of the map being placed on the left-hand side. That’s an alternative in keeping the website clean. The filter options are really handy and should be kept but may be considering to re-locate it or structure it differently?


-

As mentioned in the positive section, Eatro has great fundamentals to run the service on their website which is great for upcoming businesses that still need people to acknowledge their service. However, what then happens when people are aware and users have increased? Increase demand? Having a basic website that “works” will no longer give people the satisfaction. It may get the service from A to B but the increase of demand will only mean that people will expect more. How do you maintain and keep your users? Yes, the quality of the service is important but if your service relies on your website, it also depends on their overall user experience which design has a major impact on. Would it be interesting to use and look at?

+

Eatro’s website has currently got the correct fundamentals to provide their unique service. Due to the two different types of users that the website has, it can be difficult putting everything together without it looking over complicated but they’ve done a great job at keeping everything simple, understanding and straight forward. It’s clear to see that thought has gone into understainding where certain functions should be put and how it may connect together.

Overall, after analysing Eatro’s website, I personally think that the fundamentals are there, in terms with how the service runs, the overall image and how they want people to be a part of it. I think that the elements that are involved with the fundamentals need to be adjusted and re-arranged but by achieving this, there needs to be a better understanding on how certain elements work together such as colour, layout and type. The understanding can be developed by analysing other design work and continue to experiment with different designs because you’ll then see what does and doesn’t work well together.

Therefore, what is there to improve on? The negative points I have pointed out when analysing Eatro’s website are mainly based on the typefaces, layout and sizes of certain things that are used on the website. It currently needs a lot of cleaning up.

Aa

A reason why it’s quite difficult to adjust the design and navigation system of Eatro’s website is because there’s a lot involved with the service other than people purchasing home-cooked dishes but also home chefs that want to be involve. The design will only become better when there’s an improve understanding of the service. There’s a difference between understanding it and then conveying it into a design format. For example:

01 Have you analysed your users using the system and documenting any errors? Feedback?

02 Are there certain goals that you have on your website? For

example, a sequence/process? You can test this by using AB testing which is based on statistics and finding out what works better for the users. However, this testing does involve a lot of people but it’s something to consider in the future.

Eatro research  
Read more
Read more
Similar to
Popular now
Just for you