2dles | My Site 1

The Project

2dles is a noodles customisation website that I created for my UI/ UX specialisation course at Coursera. The project focused on primarily on composition, visual design principles and UI.

Duration: 2 months

Tools: Figma, Balsamiq, Canva

Context

Idea generation:

I noticed variety of noodles in super market which shows the great demand of noodles amongst people and also I realised there is no specific outlet of noodles which provides the complete customisation possibility just like we have pizza hut for pizza or McDonald's for burgers. So, I came with an idea to create a cloud kitchen specifically for noodles which gives freedom of taste to customers by highly customisable menu.

Objective:

To make a website for a cloud kitchen with modern and easy to use design which offers high. customisable options in food ordering.

User Personas

From the user interview findings, we created 2 user personas, Fully Customisation and Menu-Based Users. Fully Customisation users follow a new model where they are more interested in discovering and customising their own noodles rather than the one which is pre-mentioned in the menu. Menu-Based Users follow the existing model of food delivery where all the regular dishes are already in the menu.

FULLY CUSTOMISATION

Want to customise everything from the scratch to get maximum satisfaction.
Always looking for more and experimental in nature.
Occasionally tries ordering from new restaurants
Will use whatever food delivery app the restaurant endorses

“I search what I want to eat, but not anything specific. For example, noodles or something with it. Then I look at the maximum customisability options and food pictures.”

“I only read reviews of the restaurants and check the great deals and offers, if they are good then i just go for it to order”

MENU- BASED

Look for food to satisfy one’s cravings (impulse-based)
Look at pictures to know what to expect
Usually orders from the same restaurants

“I usually order from the same restaurants I like to have my food from. I don’t like to order food from a new place without knowing what it’s like beforehand.”

“I am too lazy to go over any place to get my food, I would just order it online.”

BOTH

Don’t want to or couldn’t cook or pick up food
Want to read restaurant reviews and blog mentions
Values price, restaurant variety, delivery fees, and speed the most
Looks at distance, reviews, pictures, and discounts when selecting a restaurant

User Flow

Moodboard

Friendly, vibrant colors, round edges, and a combination of illustrations and high-toned photography makes website approachable and gives modern feeling.

Style Guide

LOGO

Logo combines bowl and a pair of chopsticks which gives an authentic feel which tells about the company along with wordmark which makes it easy to recall whenever the user sees the logo again

COLOR PALETTE

Purple is bright, positive and intriguing as it soothes, but also presents space for new ideas. Creativity is also most often associated with the color purple.

The secondary pallete is used in combination with the primary pallete to create illustrations.

TYPOGRAPHY

Crimson text was chosen for it beautiful old style serif design.

Lato was chosen for its elegance and clean feel, less distracting. It also has a touch of warmth.

Used together, these fonts give users a welcoming response and also they are very much legible.

UI ELEMENTS

Various UI elements have been created in order to create a cohesive product image. Rounded corners, careful use of colours, clean & simple lines have been used.

LAYOUT

Layout of the website is symmetrical, clear, and well organized which is easy on eyes.

Clear navigation makes liberal use of white space to highlight the headline, standout Call-To-Action and content.

As visitors scroll down, keeping the menu and button static ensures that it is always prominent and also have a way to access the content they need making it Simple and easy to use.

Overall styling is really minimal by maintaining a sense of calm.

Feel of the Website

The whole idea for the website is

functional
modern
friendly
approachable
engaging

while maintaining it's simplicity. All the dynamic components like dropdown menus, forms, user tags reflects the sight of modernism whereas all the static components like buttons ,galleries and user-centered content reflects the feeling of consistency.

The whole customisation process is also unique in itself as it manifests the functionality & exclusiveness of the website. All the pages including images are highly optimised so that the user can successfully accomplish their tasks.

Tone Of Voice

The Voice is

Functional
Considerate & Consistent
Simple & Clear
Friendly

The functional tone is used for customising and ordering with the goal to provide the variety in choices and preferances to the customer.

Considerate and consistency together tries to unite the experience for the user throughout the website.

Simple & clear refers to writing in a straight-forward and easy to understand way as we value clarity above all.

2dles is Friendly as it connects positive feelings through evocative images and perfectly-constructed layout.

Screens & Features

HOME

Menu, how it works, and search: colors, font sizes, and product listing layout were determined by running multiple A/B tests. For the our menu, it turned out that a grid arrangement slightly increased the conversions, also how it works section also was completely different from what it is right now.

The main CTA i.e "customise your noodles" for each user is the focus on our very main page.

The colour scheme is used carefully throughout this screen in order to create a clean and minimalistic view.

Illustrations enhance the aesthetic and emotional appeal of 2dles.

CUSTOMISATION PROCESS

The whole customisation process will be done in 3 steps. All the 3 screens prioritize in selecting the choices from the given options.

This gives users a clear understanding of what to select and then proceed.

Also, a user can anytime wish to change their previous choices can do so by coming to the previous page.

A user can choose any item from the menu and customise it or add to cart as it is.

After doing Survey i found that most users wants to skip the sign up process so to encourage sign up/login ,one way is to ask only relevant details of the user and make it less clickable.

CHECKOUT/ CART

On this page a user can view his/her final order, can go back and edit or customise anything if he/she wishes to.

Then after finalising the order, price of the order will be displayed and user can checkout by making payment through his/her desired medium.

Additional Pages:- CONTACT US, BLOG, ABOUT US

Contact Us page is one of the additional pages where a user can give feedback either through a mail or by submitting the enquiry form.

ABOUT US

In About Us page, a user can get to know more about 2dles and also can connect on other social media handles.

BLOG

In Blog page, a user can check various topics and if want he can further read them more.

Prototype

View the interactiive prototype

here !

Responsive Design

HOME

On desktop website a conventional header and a full banner with a navigation arrow downward telling viewers about the content below.

While on tablet and mobile maintaining the readability and white spacing, menu has to be redesigned into “hamburger’ on the top right side of the screen making accessibility of the menu on any screen while taking minimum space on the screen

CUSTOMISATION PROCESS

On mobile and tablet to show more content without compromising viewability, grid of 3*3 on tablet and 2*2 on mobile screen to show the customizable options of the product.

BLOG PAGE

The first impression of the blog comes with It’s thumbnail/ image, so on tablet 2 posts at a time on screen looks more appealing and on mobile screen after redesigning 1 post at a time gives better glance of image and short description of post in a better way.

CHECKOUT/ CART PAGE

Overall design on all screen is similar to keep it more simple and quick checkout process but some minor changes are done regarding viewability of the final order and by removing navigation menu to potentially increasing conversion rate.