index.html

---
layout: page
title: Yelp - Redesign Prototype
description: "Scott Mathson, Web Guy. Optimizer, project manager, designer, & developer in Missoula, Montana. This page: a redesign and working prototype of Yelp."
---

<section class="cf db center fl-ns w-50-ns nt5 mb4">
	<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
		<div class="tc">
			<img src="{{ site.baseurl }}/img/google-map-shot.jpg" class="br3 dib" alt="Yelp map">
			<p class="f5 yelp-red-secondary">3625 Midway Dr, Ste B
				<br>San Diego, CA 92110
			</p>
		</div>
		<p class="lh-copy measure center f6 black-70">
			Directions
			<br>
		  (619) 226-1600
			<br>
		  classicsmaltshop.com
		</p>
	</article>
</section>

<section class="cf db center fl-ns w-50-ns nt5-ns mb4">
	<article class="cf center w-100">
	  <div class="fl w-100-m w-50-ns tc ph3-m ph2-l">
      <a href="#" class="link dib hide-child br3 cover bg-center" style="background-image: url(/img/classics-malt-shop-image-one.jpg); ">
        <span class="white b dtc v-mid w-100 h-100 child bg-black-40 pa5 br3">This is my review of this establishment...</span>
      </a>
	  </div>
	  <div class="fl w-100-m w-50-ns tc ph3-m ph2-l mt4">
			<a href="#" class="link dib hide-child br3 cover bg-center" style="background-image: url(/img/classics-malt-shop-image-two.jpg); ">
        <span class="white b dtc v-mid w-100 h-100 child bg-black-40 pa5 br3">This is another review of this establishment...</span>
      </a>
	  </div>
		<div class="fl w-100 w-50-ns tc ph2-l db-l dn">
      <a href="#" class="link dib hide-child br3 cover bg-center" style="background-image: url(/img/classics-malt-shop-image-three.jpg); ">
        <span class="white b dtc v-mid w-100 h-100 child bg-black-40 pa5 br3">This is my review of this establishment...</span>
      </a>
	  </div>
	  <div class="fl w-100 w-50-ns tc ph2-l db-l dn mt4">
			<a href="#" class="link dib hide-child br3 cover bg-center" style="background-image: url(/img/classics-malt-shop-image-four.jpg); ">
        <span class="white b dtc v-mid w-100 h-100 child bg-black-40 pa5 br3">This is another review of this establishment...</span>
      </a>
	  </div>
	</article>
</section>

<section>
	<article class="cf w-100">
		<hr />

		<p>Yelp's above the fold experience: messy and cluttered. The color overload and contrast issues, therein are a major factor behind this, along with too many options for a user to click on.</p>

		<p>What's screaming for the user's attention?</p>

		<p>Everything in this high-priority red (#d32323).</p>

		<p>Between the colors, navigation, ads, and more, it's all just a bit...well, Vegas.</p>

		<p>After digesting this <a href="https://www.yelp.com/biz/classics-malt-shop-san-diego-3" target="_blank">original landing page's content hierarchy, layout, and structure</a>, I decided that more than 50% of the content and navigation links, above the fold, needed to go. There's simply too much going on, and with no clear intent.</p>

		<p>Though I like using Sketch, Balsamiq, PS, and more, I took to paper for this exercises's wireframes.</p>

		<hr />

		<h2>Yelp v. 1 - "The Anti-Fold" (why: users will scroll):</h2>

		<p>I'm calling this version the "anti-fold", with it's big, bold hero space and minimal design, yet with just the right amount, exactly what's needed, above the fold.</p>

		<p>Visually, it's obvious that there's more content to see if a scrolling action is taken. I mindfully contained the hero section's height and added a negative margin on the second section's content, moving it up into the hero container.</p>

		<p>This version will get users leaving reviews. The intent is clear, the call to action of "Leave your review" is more personal and actionable, and users are not overloaded with a plethora of options, links, and places to click.</p>

		<p>Yelp's main, red color has been used sparingly here, reserving it just for the main/primary call to action, anchor links, and star icons.</p>

		<p>I designed this with both primary and secondary call to action buttons. Risky move, right?</p>

		<p>In defense of this decision: the actions of either direction here will essentially lead toward the same goal: user submissions, reviews (assuming they're prompted to add a review, when submitting a photo). Nonetheless, "Leave your review" is still the main call to action.</p>

		<p>The above the fold options of where a user may click: review, submit photo, sign up, log in, search (a less obvious, intrusive search), and again (for emphasis) another "Write review" link. Three of the six clickable actions lend to users submitting content, reviews.</p>

		<p>Read and see more in the <a href="https://github.com/scottmathson/yelp#readme">README</a>.</p>
	</article>
</section>