Site Branding: Beyond the 404 Page

Site Branding: Beyond the 404 Page Farid Mokraoui | Market America & SHOP.COM@farmok

Introduce myselfCurrently work at Market America | SHOP.COMPreviously worked at Stratosphere Casino in Las VegasMy role at Market AmericaIn charge of interactive departmentCreate ui, ux, marketing banners, landing pages and emailsAlso do UI, UX and some Front End workOversee designs for over 20 brands in 9 countries in multiple categoriesOverview of topicHighlighting opportunities that developers can present to designers and business owners to reinforce the brandStory about inception of topic isotonix no-item in cart

1

Your brandis what other people sayabout you whenyoure not in the room.Jeff Bezos, CEO & Founder Amazon

prologue: branding basics

Give overview of this section

Brand = a bundle of attributes. What do you think of when you think of BMW? well built, comfortable, German, high performance most of all luxury

Strong human need to have a relationship with the item we are interacting withIf all I did was read off my slides you will get the information you came from but you will probably not want to come back to any more of my talks

3

What makes up a brand?

Ask question to audience about what makes up a brand

4

VisualsVoiceproductColorFontLogo ContentTerminologyCustomers HardwareSoftwareService

Explain why branding is important:Talk about it like its a relationshipBuilds a connection so users keep wanting to come backVoice Customers = your usersHow this impacts big brands like apple or starbucks5

Strong branding

Ask if anyone can give other example of strong brands6

Google - Simple, fun, accessible, elementary7

Apple well built, luxury, simple design, easy to use9

10

Target fun, quality, fancy11

weak branding

Ask if anyone can give examples of weak brands13

JCP coupons?

Amazon Prime Free Shipping, Kindle, lots of stuff

If you remove a strong element, can you tell who they are?14

Part I: introducing the brand

Overview of this section creating a dating profile15

How to make introductions

17

Search ResultsFacebook shareTwitter share

Business owners are aware of SEO and Social but do it by the numbers ends up very cold and robotic18

Expect More. Pay Less. Free Shipping with $25 purchase or free same day store pickup on all online orders. Plus, save 5% every day with a Target REDcard.Online retailer of books, movies, music and games along with electronics, toys, apparel, sports, tools, groceries and general home and garden items.

Dont read the whole thing19

Amazon more robotic and generic than TargetShould not feel roboticGive example of bland dating profile Male, likes to do stuff, very active

20

Why is this important?

For un-known brands its a differentiatorDating example Goes sky diving regularly, travels the world and has run a marathonTarget and Amazon dont have to worry because they already have name recognition new businesses/services/products should use this to differentiate themselves from top contenders21

Part II: having fun with the brand

Overview of the sectionYou are starting the relationship

22

404 Page was the start

Allows to commiserate with user about the error well designed moments can build brands

Fun Fact404 error came from CERN Room 404 (database holding all the files) Original error was Room 404: file not found23

LegoGitHub24

Mike Kus Illustrator and DesignerBlue Fountain Media25

Why just the 404 page?

Build great relationship with through branding on other ui elementsTalk about sign up process, empty cart, empty search results

26

Sign up

27

Effective but boringTreat the ui more like you are talking to the person who is signing upImprove the relationship with the user28

Empty cart

Simple but robotic a bit cluttered with up sell31

33

No results in search

No branding very robotic35

Slightly more human but still not much branding36

Ok for branding still needs more of the user beyond I cant find it37

Great branding taking are and changing it to arrrr

Well designed moments build brands Renny Gleason38

Part III: making errors fun

Talk about how every error is really a chance to build a better relationshipUse relationship example of you made a mistake39

Something broke

This is like a slap to your face41

CodeMeaningDescription400Bad RequestSyntax of the request not understood by the server.401Not AuthorizedRequest requires user authentication402Payment RequiredReserved for future use.403ForbiddenServer refuses to fulfill the request.404Not FoundDocument or file requested by the client was not found.405Method Not AllowedMethod specified in the Request-Line was not allowed for the specified resource.406Not AcceptableResource requested generates response entities that has content characteristics not specified in the accept headers.407Proxy Authentication RequiredRequest requires the authentication with the proxy.408Request TimeoutClient fails to send a request in the time allowed by the server.409ConflictRequest was unsuccessful due to a conflict in the state of the resource.410GoneResource requested is no longer available with no forwarding address411Length RequiredServer doesnt accept the request without a valid Content-Length header field.412Precondition FailedPrecondition specified in the Request-Header field returns false.413Request Entity Too LargeRequest unsuccessful as the request entity is larger than that allowed by the server414Request URL Too LongRequest unsuccessful as the URL specified is longer than the one, the server is willing to process.415Unsupported Media TypeRequest unsuccessful as the entity of the request is in a format not supported by the requested resource416Requested Range Not SatisfiableRequest included a Range request-header field without any range-specifier value417Expectation FailedExpectation given in the Expect request-header was not fulfilled by the server.422Unprocessable EntityRequest well-formed but unable to process because of semantic errors423LockedResource accessed was locked424Failed DependencyRequest failed because of the failure of a previous request426Upgrade RequiredClient should switch to Transport Layer Security500Internal Server ErrorRequest unsuccessful because of an unexpected condition encountered by the server.501Not ImplementedRequest unsuccessful as the server could not support the functionality needed to fulfill the request.502Bad GatewayServer received an invalid response from the upstream server while trying to fulfill the request.503Service UnavailableRequest unsuccessful to the server being down or overloaded.504Gateway TimeoutUpstream server failed to send a request in the time allowed by the server.505HTTP Version Not SupportedServer does not support the HTTP version specified in the request.

This is like a slap to your face42

Can we make it fun?

Renny Gleeson quote A simple mistake can tell me what you arent. Or remind me why I love you.46

Although what we talked about is outside of 404 page, I did want to show this video that helps summarize why this is important.

TED Talk VideoRenny Gleason March 2012 404 Error Page47

Questions?

Site Branding: Beyond the 404 Page Farid Mokraoui | Market America & SHOP.COM@farmok

Introduce myselfCurrently work at Market America | SHOP.COMPreviously worked at Stratosphere Casino in Las VegasMy role at Market AmericaIn charge of interactive departmentCreate ui, ux, marketing banners, landing pages and emailsAlso do UI, UX and some Front End workOversee designs for over 20 brands in 9 countries in multiple categoriesOverview of topicStory about inception of topic isotonix no-item in cart

49