Project at Downtown Surrey Business Improvement Association
Role:
Tools:
Designer
Figma & WordPress
Date:
Summer 2023
Link:
https://wordpress.guacmexgrill.ca/This website was created during part of my internship at the Downtown Surrey Business Improvement Association (DSBIA). I was part of a team called Click on Surrey, that outsourced to local businesses in the Downtown Surrey area to offer marketing, technological and other design based services. I was specifically in charge of website related services, including website designs/development and any related technical assistance. Guacamole Mexican Grill is a restaurant in Surrey BC, that was a client of my team and I. As a team we assisted them with marketing, social media, a new menu and website design. My individual role was to design them a new website. Their major concern with their previous website was an inconsistency with their branding from what was established within the physical restaurant to online assets.
Within my team’s initial meeting with Guacamole Mexican Grill we discussed the previous website in detail to check what aspects they’d to carry over and information that would require updates. we also discussed menu changes at the same, as we wanted to ensure that my coworker and I kept with a similar branding between the two designs to ensure cohesive designs. From this initial meeting, we took several images of the restaurant’s interior for inspiration, especially from their signature mural they had contracted be painted named, “Katrina.” Since this was such a focal point within the restaurant's image I wanted to incorporate it within the website. This can be seen in the figure below (figure 1) I also determined a baseline for a colour scheme using light and bright colours, compared to the dark colour scheme they had on their current website. This was inspired from the bright interior (figure 1 & 2) - with white walls and bright colours within the mural.
Figure 1: Photograph of restaurant interior
Figure 2: Photograph of Restaurant Interior
My next step was to start by reviewing their old branding documents which included typefaces, and colour schemes shown below in figure 3. From this branding document I utilized their main font for the header that is shown in the prototype below. It was very bold and striking font, and was the same font used in their logo so I wanted to keep the consistency here. My coworker, Meera, created a vectored version of Guacamole Mexican Grill’s mural “Katarina”, which I then used to create an eye-catching header, with the flower trails for accents. I experimented with various placements of their slogan, header text and background colours for the headers, before bringing these mock-ups to a meeting with the owners to discuss.
Figure 3: Screenshot of Guacamole's original colour scheme
Figure 4: Prototype of landing page
Figure 5: Prototype of landing page
Figure 6: Prototype of landing page
Upon discussing these prototypes with my client I determined their preference for particular assets and styles such as the header style in figure 4. They also particularly liked the green background, as they felt the yellow backgrounds (along with some other experimented colours) was not quite on brand. With some adjustments to the specific green, and placement of components I ended up with the final design shown below. Due to the addition of additional information displayed on the homepage, the map was shifted to the bottom.
Figure 7: Screenshot of final implemented design on WordPress
Working with a local business as a client one on one was an incredible experience. One of the most challenging aspects of client based work I found was communication, and ensuring that the new branding was consistent with their in store branding but would still translate to a digital platform. For example there were some challenges in finding the exact green they wanted, that retained the same appearance as the green of their branding, but would look good digitally. Having consistent check in’s with my client and creating many different mock-ups really helped to overcome these challenges and ensure I created a website that captured their restaurant and vision. In conclusion this project helped me to develop and strengthen my skills in communication, website design, WordPress and client based work. It was an incredible opportunity.