Moo’s Food Design Thinking Process

Sketch Design I made for Moo’s

The Challenge

This is a project from an Internship which I am currently running and this week I was tasked to design a landing page for a friends restaurant with just text, this design is to come with a minimal high-resolution image and no vector illustrations or image of a person allowed. This has proven difficult to everyone in the internship, the reason being that we are used to making things out by the imagery we see or how they make us feel, well the goal of this task which I believe is to open our minds to a world of possibilities and to the fact that text makes up at least 80% of a product, without texts, users would find it difficult to navigate between one point to the other and also to identify how good we are at telling product stories without having to add something as descriptive as an image or a vector.

This has been exciting as it has made me understand the extent of texts in creating a product and understanding that you can make good products with less and still have people enjoy it,

My Difficult Thing to do

I have been asked most times about what could be the most difficult thing for me to ramble about when designing and I always mutter the word “Colour”, well apart from the research part, empathizing with the user, being excited about the survey research and the amount of information that could make me design for human, creating the user flow and mapping the user’s mind, colours can be pretty difficult to navigate and I don’t know if it’s just me or if its a general problem but realising that there’s so much to learn when it comes to design is something I always look forward to.

Here’s how I developed the Moo’s Food Landing Page.

Understanding the Project: I never commence a project without fully understanding what is needed to achieve the project, this makes the whole design thinking process less burdensome and cuts the workload by half, I got to understand that.

-The project is typography based.

-No Vector Illustration of food or person is allowed.

-‘High-Resolution Food Imagery is allowed

-The design must adhere to the design principles

-The utilization of layout and composition

-It has to be designed both in greyscale and colour

Source Inspiration: Every project has to go through a rigorous source for inspiration in order to understand the direction to go when you finally commence and for my source of inspiration, I chose Pinterest to source for foods, colours, varieties of fonts, food website and websites with just text alone, this helped me get my perspective in check.

Design Thinking Process

Sketching: Made a simple sketch on the direction I needed to go with the project, this gave me a simple insight into what I need to build, what I need to let go and the effectiveness of knowing that I could bring a simple sketch to life.

Wireframing: Made a wireframe of my sketch in grey-scale and this helped put my design in perspective, it became easier to place my assets in the right place and followed the principles of design which are repetition, proximity, space, Alignment, font style, balance and eventually contrast.

High Fidelity Design: Here, I added colours, high-resolution images and shadows to the product to give it more depth and definition.

Creating the Magic called Moo’s Food

I commenced the project by creating a word-mark logo for the restaurant even though it’s fictional, creating an identity for it was important, from the brand guidelines I could easily plot my way through the colour and not fight too hard to know which colour or font fits the brand, the fonts used for the landing page was Poppins, the reason for using Poppins is to give it both a professional and relaxing look, Poppins belong to a font family that gives different variance and it is scalable.

I gave the logo size 34.67 Bold with a touch of green and orange

Colour is a major contributor to how long users stay and interact with a product, so I chose to go with Yellow and Green after doing extensive research on the best colours that are associated with food, nature and calmness. Yellow is well associated with Happiness, Joy and Sunshine and it goes well with colour green which associates itself with Calm, Agriculture, Food and Nature

Both colours gave radiance and meaning to what the product really does, which provides an edible meal at the cheapest rate to its customers from all walks of life.

The headers were specifically placed in such a way that when the user lands on the page, they can easily search for their favourite meals, log in and register and below is the categories section which proves useful when searching proves futile, the user can navigate through the categories section to make do with the products that have been identified and to the left is the Homes, Services, Bookings etc.

The Hero section has an undeniable attractiveness attached to it which is intentional, 90% of the time customers choose what they want from a website is because of what they see and if what they see looks attractive, the customers wouldn’t ask too many questions.

The CTA (Call to Action) was intentionally placed as yellow to make it easier for the user to easily identify and click on it that’s why it carries the yellow.

The landing page for Moo’s Food can easily make the users get familiar with what it sells, Moo’s Food doesn’t just sell dishes, Moo’s Food sells the feeling that comes with eating which is safety, accessibility and the freedom to choose.

Conclusion

Some projects could take weeks to complete without defining the process adequately and the easiest way to make do with time, energy and resources is to better understand the project being worked on and breaking it down to your better understanding.

This Project is believed to be very minimalist by design and I hope and believe I did justice to it, it was exciting to work on and I would really like to do something much more tasking than this soon.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store