The Other Coast Cafe
Landing Page Redesign
Improving Visual Design and Layout
The Other Coast Cafe is a local sandwich shop in Seattle, Wa. They typically cater to the lunch crowd, but also offer other services such as catering.
The Project
BACKGROUND
As part of my five week Visual Design course at SVC, I was asked to redesign a landing page for a website. With such a limited timeframe, I began by surveying local small businesses that I frequent. That way, I would at least have some initial familiarity with their product offering and branding.
I ended up choosing The Other Coast Cafe, a sandwich shop just a block away from my work, that is a favorite lunch destination for my office.
PROJECT SELECTION
When browsing their site I noticed something I hadn’t come across before. They had a catering section. In all the times I had called up to put a large order in, they had never mentioned it. According to the copy, they offered to take orders for parties of up to 500 or more.
The page was underwhelming and outdated. There was a banner message at the top warning customers that they would be closing early on Tuesday, so that their staff could watch the presidential election results. Which was nearly two years ago at this point.
It was hard to imagine this page would inspire trust in the potential customer who wanted to use Other Coast in their event planning.
FIRST IMPRESSIONS
I did a quick survey of some of my co-workers to see what they thought of the site.
"Never really go on there except to look at the menu."
"I just go there for lunch. I don't think I'd ask them to cater anything."
"That site looks so old."
GOALS
For this redesign, I narrowed down my objectives to:
-
Inspire customer confidence
-
Highlight the brand and product with images, color, and typography
-
Provide direction to the ordering process
The Process
CONTENT AUDIT
I started by conducting a quick content audit, and doing some initial brainstorming. I wanted to list out what Other Coast felt was important enough to put on the page, and get a general sense for their site template.
-
Heading Bar
-
Main Nav on Left-Sidebar
-
5 Content Sections
-
Introduction
-
Catering Platters
-
Bowls of Salad
-
Sides
-
Beverages
-
-
Footer with copyright information
-
Two Highlight Pictures
INITIAL BRAINSTORM
Content
Hierarchy: Create a hierarchy that aims to highlight the highest margin products, and gives a clear picture to the customer on what’s most important to their order
Layout
Controlled Proximity: Create ready-to-order product groupings.
Scale: Try to emphasize products through different uses of scale. Everything is the same size right now and looks flat.
Color
Use existing color palette, with some added accent colors, to create visual interest throughout the page.
Typography
Right now everything is relatively the same size and color. Need to create a heading and paragraph hierarchy strategy. Makes the content skimmable and easy to find.
Images
Aesthetic-Usability Effect: Large, enticing, pictures of food
INSPIRATION SITES
Since this project was geared towards visual design, I went out to find another site that was executing successfully for inspiration. I came across the historic Katz's Deli in New York.
Their site looked perfect. All of the ideas I had in my initial brainstorming session were more than covered. I continued to reference back to Katz's throughout the project.
Ideation
RAPID LAYOUT
At this point, I was going into week three of the project and knew I needed to get some layout thoughts down on paper.
I started with everyone’s favorite design tool - the Post-It. I used a Post-It per information object, and quickly laid out half a dozen ideas. Then I narrowed it down to my top three.
OPTION 1
OPTION 2
OPTION 3
WIREFRAME SKETCHES
I took the top three and created some hand drawn desktop wireframes to get my ideas ready for some productive feedback.
FEEDBACK
I ran these past my classmates to see what they thought of the overall content and layout strategy. I wanted to know if my progress was lining up with my initial objectives, so I could stay on track.
The feedback was positive. Everyone liked the new “How To” and “Quick Grab” sections. They thought it would make ordering easy to understand. They also liked my use of proximity when grouping together like items.
There was now a flow to the page, starting logically with how to place an order, then items to order, and finally with how to contact Other Coast and place an order.
Out of these, I needed to choose the best one to move forward with. I considered my goals for the project, and my remaining time. I ultimately went with option number two. To me, it covered all the bases, and I felt a high fidelity prototype was possible.
WIREFRAMES DIGITAL
I converted the hand drawn sketch to digital, prepping for the final visual push on the project. I created three versions. One for desktop, tablet, and mobile.
DESKTOP
TABLET
MOBILE
Final Design
The previous steps covered content and layout, from my initial brainstorming session. Now it was time to populate the wireframe with color, content, and images.
COLOR
I started with color. I used Other Coast’s red as a call to action color throughout the page. I introduced a dark blue for some backgrounds and text, instead of just defaulting to black.
I had also picked out a dark brown and light bronze color. At first I was going to use them as accent colors but, as the design progressed, ended up using them as inspiration to bring wood elements onto the page.
TYPOGRAPHY
For headings I chose the Montserrat Alternates font. It’s a fun and easily accessible Google font, that that gave me that East coast subway vibe.
I was inspired by the famous Katz’s Deli website from my initial design inspiration. For body text I chose an easy to read Sans-Serif.
IMAGES
The most interesting part of this project for me was the images. I was only planning on using images of sandwiches to highlight the product.
When I looked at the content layout of the page though, I saw that it would only make sense in the menu section. Unless I just wanted to put random sandwich images in the How To and Contact Us sections, but that didn’t make sense.
So I started to pull images that directly related, as much as they could, to the section of the page they were on.
I have stacks of sandwiches for the introduction. A quick effective glimpse of what you’re about to see on the page.
I put images of a deconstructed sandwich in the How to Order section.
For the Menu section, I grabbed an actual chalkboard image that you might find hung up in a restaurant, and put it against a subway tile background.
For the Quick Grabs section, I chose a lunch tray, coupled with a drink and plate. To me, this symbolized a complete meal.
Finally, for the Contact Us section, I came back to individual ingredients on a cutting board. I wanted to remind the user of the fresh ingredients Other Coast was going to use to make their meal. The cutting board shows potential. That your order is just waiting to be made.
Outcomes
FINAL FEEDBACK AND PRESENTATION
I showed my final design to my class and the feedback was great. While they liked the photorealistic look to the site, they did feel that it was less modern. They appreciated that I took the risk these choices though. They said it made the design fun and engaging to look at.
They did have some criticism for the Quick Grabs section. They thought the image choices fell down here, and had some suggestions for improving it.
WHAT I LEARNED
While going through this project I learned a lot about visual design. There’s so much that I still don’t know. Going forward, I will be putting an equal amount of effort into these visual choices that I do with IA or user interviews.
You can have the most researched solution for a site, but you still won’t be successful unless you pay attention to these details.
NEXT STEPS
Develop checkout/ ordering scheme
It would be nice for Other Coast to automate some of this process, and have an online ordering system in place.
Further prototyping and user testing
Now that I have a new visual design to play with for the site, an obvious next step would be to develop a prototype to conduct some testing. Develop some customer journeys and see how users respond.
Pitch to company
After doing some additional testing, and refining the design, I would love to take this in to Other Coast to see what they think. If they like it, maybe I can help take it to the next level.