SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

Mobile Experience Design 126Drink ProjectMario Telles

Fall 2014San Diego City College

MISSION BREWERY

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

Table OF ContentsObjectives :

Landing Page :

Beer Page :

About Page :

All Screens :

To show a mobile website that would scale.

Landing page on mobile phone and on tablet.

Bottle layout design and real life use view.

About the brewery layout design and real life use view.

A full preview of all screens together.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

Objective

To show a mobile scalable design:

Starting off with Mission Brewery was a daunting task. The website lacked cohesivness in its images and a very unorganized structure. Along with the mess they did not have a scalable mobile side. So my task I took on was to bring the companys colors, images, and overall direction together and display it in a mobile website.

However since this project was started the company must have read my mind, because they re-did the whole website. So instead of showing images of a before web-site, i’m showing logo’s that they still use that demon-straight how they are going in several directions.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

The Mobile Design

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

Home Page

Two moble device views:

Landing on the home page has gives you a video about the company, and information about how the beer is created.

On the home page you get a facebook and twitter link.

There is also a menu and location icon that remain on all screens.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

Menu

Slide out menu:

I created a slide out menu for navagation through the website. The menu slides out from the left by tapping the menu bars at the top.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

Beers

Slidding over to highlight:

The company has very nice bottles and the color pallet is somthing I wanted to show off in the beers page. By sliding over the beers they highlight and info about the beers changes above.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

The Story

The companys story:

This section talks about the companys history were they came from and why we have two Mission Brewery buildingsin San Diego.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM

The Story

The companys story:

And about the new owner of the company, How he got his start.

SDCC MOBILE EXPERIENCE DESIGN 126 CRN 41522 MARIO TELLES EM: MARIO.A.TELLES@GMAIL.COM