PROJECT BRIEF
Self-Initiated Website Redesign
Potential Client: Soleil Westwood in Los Angeles, CA
Project Summary
A local French bistro, Soleil Westwood, has great food and a charming atmosphere, but their website needs help. Their current site is a fixed-width design that's showing its age and is quite unusable on a mobile phone. The titling, navigation, and other text elements do not scale on a phone and the site is impossible to read or use without a lot of multi-touch zooming in and out. To explore potential solutions and improvements, I decided to do a quick redesign of the site’s homepage using responsive web design practices, web fonts, etc. My primary goal is to make the restaurant’s website mobile-friendly and usable on any device. While I’m at it, I thought I’d update the branding and the overall look to something a bit more contemporary.
Current Site's Problems
• The page layout is a fixed width of 1000 px. which means nothing adjusts on smaller displays
• The design uses raster graphics for navigation buttons and titling which do not scale
• The use of Copperplate Gothic — a popular font in the late 90s, but not so much now though
• The vertical tab labels on the image slider are impossible to read
• Poor overall branding — no mention of it being a French bistro or even the type of cuisine served
• There’s no visible mention of or promotion of the adjoining bar and casual dining area, P’tit Soleil, on the homepage
• Lacks emphasis on Call-To-Action items and key information (reservations, address, hours, phone number)
• Uses rasterized PDF images for displaying their menus which do not scale and are not indexable by search engines
• And having a Shockwave plug-in automatically play music when the page loads, "ce n'est pas une bonne idée"
Screen shots of their current website.
Homepage Redesign Tasks
• Create a mobile-friendly, responsive web design that would use a grid system/framework
• Use web fonts that scale and maintain legibility (pairing Libre Baskerville and PT Sans)
• Employ a modern, responsive image carousel (moves by touch-swipe or dot controls) showing their delicious food
• Improve overall branding as a French Bistro with a logo update, better titling, and more focused content
• Add advertisement blocks to promote dining in the bar area and their special events
• Provide clear CTA buttons for dialing their phone number or mapping their location on mobile phones
Mockup showing redesigned site on a mobile device (created in Illustrator and InVision).
Suggested Additional Improvements (not shown)
• Improving SEO by replacing their menu PDF images with responsive HTML pages (mobile-friendly and indexable)
• Revamping the Press page eliminating the table and graphics with a cleaner, more legible design
• Combining the owner's blog posts with the event announcements and special promotions
