Unsolicited Redesign
Overview
Following the instructions, I was assigned to redesign the website for a bakery located in Montreal, QC, Canada. The site I chose is Boulangerie Louis Marchand & Compagnie. The original of website has numerous issues, including low quality of images, a menu page that doesn't working, and a lack of information. The redesign has fixed such issues and improved the website's usability and user engagement.
Project Goal
The goal for this project is to create a user-friendly and responsive site, using the best practice in designing a website.
Skills and Techniques
- Adobe Photoshop
- Procreatep
- CRAP Principles
Working Process
Milestone 1
I reviewed their existing website and noticed it is quite small, lacking in information, with low-quality images, excessive white space, and unengaging content. I created a site map and a low-fidelity wireframe for the homepage, designed for both mobile and desktop screens to ensure responsiveness.
While the site is small, I found a diverse product menu on their Facebook page. Based on this, I created a separate menu page to allow customers to place online orders for delivery or pick-up.
For Milestone 1, my focus was on developing the site map and low-fidelity wireframes.
Milestone 2
I moved on to the next step, creating the high-fidelity wireframe in Figma using a grid system: 12 columns for desktop and 6 columns for mobile. For the website's color palette, I drew inspiration from an image of their signature croissant and the bakery’s interior decor. My goal is to maintain color consistency across their website, social media, and their store.
For typography, I paired the fonts Arvo and Lato to achieve a harmonious blend of classic elegance and modern simplicity, well-suited to the bakery's web design.
Milestone 3
The high-fidelity wireframes for the homepage and menu page have been fully designed in Adobe Photoshop. This project has been a significant undertaking, as I had to start everything from scratch and carry it through to completion. Although I have only redesigned 2 out of the 5 pages (based on the sitemap), this has been a valuable assignment for practicing essential skills like creating wireframes, setting up grid systems, working with flexbox, applying CRAP principles, selecting a cohesive color palette, pairing fonts, and mastering Figma.
Before
After
Mobile Version
Final Thoughts
When working an unsolicited redesign, I need to understand the balance creative with respect for the original site's goals and brand. The redesign website should not only look better but also improve the user experiences, align with business objectives, and solve any usability issues. This project has helped me to learn how to identified the issues that may affect to the user and research solutions that enhance the overall user experiences.