Why I re-design the website.
Le Petit Chou has changed its name to Le Meadow Pantry since I've came up with the concept. The labels has been changed along with the graphic collaterals, but the client has kept the concept. I thought it would be a great case to go over the existing website, UI design and analyze the entire website.
Current Site and Heuristic Evolution.
Hierarchy
The font is not easy to readand lack of order of information.
Navigation Bar
The navigation bar is dis-organized.
Contrast
The font is not easy to read and a lack of order of information.
Colour Theme
The colours on the page are not part of the colour scheme.There are neither consistency nor flow.
Consistency
The more you explore the page, the more youfeel as if you are on different one.
Design and Layout
The entire website is not welcoming and eye catching for poor design and layout.It’s very confusing and that makes hard to find the page you are looking for.
Images, Words, and Icons
Too much words and information. The images are dis-organized,low quality, and no consistency. There are no icons just words.
Problem Statement.
-
UI style guide
-
Colour scheme
-
The information architecture
-
OrganizationConsistency
The Process.
Colour Scheme
I just have chosen one primary colour for this project to keep it simple, organic and original.
#2C292A
Botton States
The bottons in the site is vary look wise and there's no consistency. I have created it simple and in a way to suit with other elements.
Create Icons
I've added some icons to prevent the pages wordy and make it more simple and appealing at the same time.
Typography
I came up with three typefaces.
-
Amatic SC (titles)
This mostly used for titles that gives it more home made feeling to it.
-
Andalo Mono (body)
This font face has more modern looking and it gives original feeling. It also easy to read.
-
Stay Writer (logo)
This is the logo font face.
Amatic SC and Andalo Mono are used for contrast in a complimentary way.
Images
I've changed the images to a better quality, and keep the consistency by having the background and the angle of the photos the same as well as the entire theme.
Slogan
By adding some short and memorable sentences made the pages more welcoming and catchy look.
Site
Map.
Low-fi Wireframes.
Hi-fi Wireframes.
When the user click on 'Learn More' a small window pops up for more detail.
