Design Challenges – Presentation – Quick Overview



Design Challenges – Presentation – Quick Overview

0 0


eastpoint

Eastpoint Presentation

On Github somecallmejosh / eastpoint

Design Challenges

Presentation

By Joshua K Briley / @joshuabriley

Quick Overview

  • Mixed Message
  • Time Challenge
  • Shared Data
  • CSS Mental Challenge
  • Honorable Mentions

Bishopsgate Inn

Mixed Message

  • Situation - Client felt their website was very outdated and made their bed and breakfast look cheap.
  • Task - Redesign the website to give a feel of rustic elegance. Design should feel "modern and fresh."
  • Action - Analytics review. High bounce rate, limited clicks. Redesign to communicate a focused message.

Result

Low bounce rate, increased time on page, deeper site penetration.

Full Site

Woody's Steak House

Time Challenge

  • Situation - Client needed a sophisticated and elegant redesign and rebuild of their website, within 24 hours, to be featured on national television show.
  • Task - Use storyboards presented by the show's design crew to create a site consistent with the new look and feel of the restaurant.
  • Action - Rapid design and development.

Result

Project completed to satisfaction. Huge traffic spike. Increased loyalty.

Full Site

The Rental Guide

Shared Data

  • Situation - Completed original design that used a basic CRUD to enter property Information. Needed Mobile version that used exact same data. Images not displaying properly in mobile.
  • Task - Ensure usable layouts in both desktop and mobile environments without changing data entry method.
  • Action - Used DOM on mobile layout to remove manually entered height and width attributes. Added a class to all pertinent images, and set the images to display:block; in the CSS.

Result (code)

$(document).ready(function(){
  $('#listing img')
  .attr('width', 250)
  .removeAttr('height align style')
  .wrap('<p />');
});

Result (design)

Full Site

Big Res Challenge

CSS Mental Challenge

  • Situation - Flash website not working in iOS browsers.
  • Task - Use HTML and CSS to recreate animation.
  • Action - Considered Google Swiffy to convert .SWF to HTML5. Client needed design tweaks, so this wasn't an option. Completely recreated front end design to account for design change mods, and coded W3C Compliant and semantic HTML5 and CSS.

Result

Fast loading. Works as expected in iOS and other modern browsers. YSlow Score - A.

Full Site

Honorable Mentions

Inbound Planner

Full Site

Dressed to the Nines

Full Site

Black Eyed Sally's

Full site

CT Drummers Association

Full Site

Available on Github

Thank You

BY Joshua Briley / joshuabriley.com