role
Product Designer, Web Design
overview
Designed responsive website to create a digital presence and online ordering for the Mediterranean restaurant located in New York City.
background
Our client rebranded their restaurant concept from Operation Falafel to ZaZu Mediterranean Street Food and hired The Forking Group for the design and development of their website and their in-store displays.
1. Research
process
I began an in-depth examination of restaurants based in New York City, where our client resides. I pored over various aspects of their online presence, from sitemaps and footers to headers and imagery selection. Additionally, I looked into the intricacies of their online ordering systems to understand their approach. By comparing and contrasting these elements, I gained better understanding of industry trends, best practices, and nice-to-haves which laid a solid foundation for the website design process. I then bounced my findings off the rest of the team, especially those that were dealing with the client directly to ensure our visions aligned.
2. UI Design
problem
How might we allow prospective patrons to easily:
・View the menu online
・Order delivery/takeout
・Find the restaurant
Conversely, how might we allow the restaurant owners to easily:
・Communicate their brand identity
・Create customer loyalty
・Collect customer emails
process
With only a style guide, some imagery, and a sitemap provided by the client, I had a lot of autonomy in making choices for the site which I was really excited by, being accustomed to in-house work with strict guidelines. The restaurant's brand positions itself as bold, vibrant, and approachable. I wanted to make sure my choices regarding font, color, and layout would emulate the feeling of their physical environment in-store. While I wasn't able to experience their architecture firsthand, their style guide provided plenty of context.
My first iteration of wireframes leaned heavily on the graphics they provided along with stock, placeholder images. I really enjoyed the typefaces chosen by the client due to their bold and punchy character. Layout-wise I kept things simple and approachable. I also chose to include an actual menu design on the site that would be separate from a PDF file so that users can choose which viewing style they prefer.
Home Iteration 1
About Iteration 1
Menu Iteration 1
Gallery Iteration 1
While I was busy with the first iterations of wireframes, the rest of the team finalized planning for ZaZu's Rewards and the online ordering strategy. They chose to go through the restaurant's POS system, Toast. This was ideal because online ordering and joining Rewards would be as simple as linking the users to the 3rd party site. As long as branding was consistent, it would prove to be a seamless experience for the user.
After presenting my initial designs, I received detailed feedback from the client. They provided further direction on the menu, asked to remove the 'About' page for the time being, asked for a few edits on other pages, and requested I replace some of their secondary blues with more pink as they really wanted their primary color to be the focus. After a few more iterations, they approved the following wireframes.
3. Implementation & Development
problem
How might we build the site in a way that's quick, agile, secure, and easy for the client to maintain in the future?
process
The team chose to contract a web designer who used Elementor to build a WordPress website. I worked closely with this designer to ensure my designs were responsive and as close to pixel perfect as possible. This process involved a series of feedback loops with detailed annotations and extreme attention to detail. Unfortunately, the team ended up hiring a less-than-reliable contractor and this process took nearly a month to complete.
Another hurdle we had to overcome was procuring images that were up to the client's standards. The photographers hired to capture the food did a mediocre job and we were left tinkering over small details in photos and used a variety of tools (and even some AI) to improve the quality. Eventually we pulled it off though, and I was able to learn Elementor and update the images myself, ensuring that the images looked good on all breakpoints and that the Toast online menu images were consistent with the website's.
Overall, I'd say this project was a success. It was a lot of fun, very hard work, and an incredible learning experience. As this was the agency's first web development client, we have a better understanding of the full process and intend to make changes to remove some of the roadblocks for future clients.
