UX, Web and Print Design / Photography and Content Creation
Project Overview
Challenge: Moka and the Starlight Lounge, two intertwined businesses in a small town, faced an identity crisis. Despite being in the same building and owned and operated by the same people, patrons were often confused about how connected the two were. I sought to draw the connection between businesses and resolve questions guests often posed with my designs, creating a smooth experience for anyone visiting the restaurant physically or digitally.
Team: One UX designer, later joined by one marketing specialist
My Role: Interviewing, contextual inquiry, user research, wireframing, mockups, interaction design, information design, service design, print design, social media and marketing strategy, content creation, administrative document design
On the consumer-facing end, I revamped the website and redesigned the main menu and to-go menu to visually unify a dual-business and convey its information.
Website
Moka’s website was in need of a redesign and some slimming down. After breaking down the information architecture and cataloging which pages are linked from the homepage and how many times, I set to work simplifying the structure and designing a new website.
Cataloguing and making sense of the existing content.
I spent time looking at what tasks were most important for users to accomplish quickly and easily on a restaurant’s website. By asking restaurant goers what they usually were looking for when they checked the location’s website I developed an understanding of what users’ goals and priorities usually looked like.
Diagram showing users' priorities when they visit a site, based on guerilla interviews of Moka's clientele.
I did a competitive analysis to see how other establishments with similar customer bases addressed those needs, then began mocking up the website. I chose to design wireframes for most of the pages by pulling content directly from the menu design and current website, but created more comprehensive mockups for the landing page, which has a lot of visual weight and is the most drastic part of the redesign. Quality photography on a restaurant’s website can whet users’ appetites and urge them to visit, so I made a full browser width image slider the highlight of the landing page.
Most of my artboards in Adobe XD acted as wireframes rather than high-fidelity comps. I used the tool to plan the organization of content and the user interactions rather than to create a picture-perfect prototype.
I took notes alongside my design and kept the original website in an artboard to look back on whenever necessary. Once I’d filled in the design and some content for each page, I used Adobe XD to create a prototype to show to my client and other stakeholders. It can be viewed and interacted with below or at this site.
After testing the prototype with Moka patrons and my client, I had some valuable feedback with which to make modifications. Most users seemed happy with the design concepts, but were concerned that there was no Facebook feed, where the night’s specials are primarily communicated. Because of this input I included a sidebar on every page that contains the Facebook feed. I also included a link to Facebook within the main navigation, highlighting its prominence.
The live Moka website, complete with Facebook feed and Google Map of the restaurant location.
I shot some new photos of the restaurant, using a wide angle lens at a quieter part of the day to offer an uncluttered view of the dining room and its location in the heart of Bellaire, and also used shots of sandwiches, coffee, and Moka’s famous quiche to top off the design.
The menu went through several stages. Keeping in communication with the client, I learned about restrictions as I updated her on the design.
From right to left: iterations of the Moka / Starlight menu.
From the initial conversation with my client, I knew she was opposed to photos in her menu, so I looked for other opportunities to create visual intrigue. My first design pulled colors from the current Moka logo and sought to make more of a visual connection across the brand. All copy was written in lowercase to reflect the logo and chalkboard menus found in the restaurant itself, and the entire design was on legal size paper to move away from the standard 8.5×11.
After the first update, I learned that this size difference was not going to be feasible, because the restaurant already owned sleeves for a standard sized menu. To accommodate the change in dimensions, I pushed some of the content to the back cover and added a block telling the restaurant’s story at the top. It was also in this iteration that I chose to format the pizza section in a table, because pushing it into the same type of columns used across the rest of the design was making it more difficult to perceive the information.
In between the previous version and the final, I visited Moka and had a chance to talk to my client and members of the staff in person. I learned about another restriction: color. Because Moka is a small restaurant in a small town, it wasn’t economically feasible for my clients to be printing that much color, and because they often made small changes to the menu and printed it off at a home computer, the likelihood that it would print poorly was heightened. I instead utilized shades of grey sparingly so that the hierarchy was clear without using too much ink.
I also spoke to servers and learned that one of they were currently handing each table a Moka menu, a Starlight Lounge menu, a drink menu and a specials sheet. One of their biggest frustrations was having to explain all of these documents to guests, and it was much more of a cognitive load to juggle every menu than people sitting down for a meal wanted to take on.
Condensing the Starlight Lounge bar menu into one menu design saves time for servers and makes it easier for users to navigate all of the different options available to them, while also assisting in my goal of making the connection between the two restaurants more clear.
Reflecting the new menu design, I also put together a to-go menu for Moka. Because my client found that most of the restaurant’s to-go orders came during the day and didn’t want to ask the kitchen to prepare both menus when Starlight didn’t officially open until the afternoon, the Starlight menu isn’t featured here. While maintaining the same font and hierarchy scheme found in the full menu, I put more emphasis on simplicity in this design and used a two column layout with solid lines. I also chose not to repeat the grey header bars here, avoiding too much complexity in a small handout menu. The final design is meant to be printed double-sided on a standard 8.5×11 sheet of paper, then folded in half hamburger-style.
Get in Touch
Email me! Connect with me on LinkedIn!