Tablet & Smartphone Mockup

Home Page

Landing Page


Midterm Project – Communication Brief

Project name: The Coffee Bean & Tea Leaf

1. Project Summary:
The Coffee Bean & Tea Leaf is moving forward to a current/future trend of website–with the goal of creating an organization that conveys usability, interaction design and user experience skill. The redesigned website will focusing on a responsive web design that suits into any browser devices.
Preferred date for launch by client: First quarter of 2013

2. Audience Profile:
Urban/local people, traveler or international tourist, student, educated, business/working people, company, housewife, retirement. Both gender 18-65 years old. Low to high income. Primary task the visitor could easily achieve on new redesign website is lookup/find information–location and store hours, account log in/register, purchasing whole bean/tea leaf products, look up menus and joining conversation blog. The visitors go on a new website by any kind of devices–desktop, tablet, smartphone and feature phone which both used Android and iOS. Intermediate to advance computer skill level. They are interested in upcoming promotion that the site always offers.

3. Perception/Tone/Guidelines:
Current perception: Contemporary, full of information, lose in the middle
Desired perception: Characteristic, compelling, stylish, focused, user centered, flexible, responsive, effective and rich

4. Communication Strategy:
The overall message we would like to convey is organization, capability and responsive.
We will convey this message by clearly experience that shows the site of new organization by focusing the main content more, locating the navigation clearly and quickly that help visitors get to their tasks, and with the new design color scheme, rich visual design and concept will make people remember the Coffee Bean & Tea Leaf brand.

5. Competitive Positioning:
The number one competitive’s website is trendy, modern, well-organized, responsive, capability and recognizable appearance which difference from the Coffee Bean & Tea Leaf current website. A product showcase is the most successful of the current site not an in store beverage because a visitor who check in the site is looking for an online product purchasing more than seeking the in store drinks.

6. Targeted Message: Rich

Midterm Project – Answering the Questions

  1. Who is your target audience?
    • • Both gender, 18 to 65 years old, low to high income, student, educated, business/working people, company, tourist, housewife, retirement.
  2. What are the business goals and objectives of the client?
    • • Increase product sales, coffee and Tea, in both store and online.
    • • Keeping touch with loyalty customer and gain more trust for a newly customer.
  3. Thinking about the concept of “Mobile First,” what are the primary things that a user will want to do on the mobile website?
    • • Find store location/hours
    • • Purchasing/viewing product, offering promotion and news
    • • log in to an account/ card register
    • • Connecting/sharing to the social media
    • • Joining conversation/blog
  4. Which of those things from  #3 are better suited for a tablet device and what things are better done from a smartphone? Why?
    • • Things are better suited for a tablet device: everything could do best in their own way with both tablet device and smartphone.
  5. Based on lookup/find, explore/play, check-in/ status, and edit/create, what is the organization of your mobile site? What will you include in your navigation for the mobile website?
    • • Lookup/find
    • • Main navigation: Coffee, Tea, Essentials, Shop, Card, About us
    • • Secondary navigation: Shop now, Find a store, Log in

Midterm Project – Competitive Analysis

I choose to create a responsive web design (RWD) for The Coffee Bean & Tea leaf as my midterm project.

Competitive Websites for The Coffee Bean & Tea Leaf:

Starbucks Coffee:

This coffee brand is a worldwide and the #1 competitive, the website is the only responsive, well-design I’ve found so far.

Costa Coffee:

The London coffee brand worldwide is already has a Web Mobile version.

Peet’s Coffee & Tea:

Similar theme but this brand has their Mobile version website already.

Caribou Coffee:

Nice, clean and fun. Good concept, chic theme and design. But still use a flash on the homepage and no Web Mobile version or RWD.

Team assignment: Find native or mobile web examples of the Capabilities

+ Location detection

Disneyland Maps (Native App): It has location detection that allow my to find my position on a map of the park, where I am and easy to relocate while I’m walking in just a touch.

Foodspotting (Native App): It can locate the nearest restaurant from my position. They are several features available, like post/share photo called “Spot Dish/Share Dish”, Flag Dish – let a developer know if something is wrong, and direction on the map.

Redbox (Mobile Website):

+ Device orientation/accelerometer

Compass (Native App), Doodle Jump (Game), Flick Fishing (Game)

+ Touch

Speak4it (Native App): It can locate your position and also allows us to speak and draw on the map to find a place you’re looking for in the area you’ve drawn.

Assignment 03 – Create a mockup (wireframe) of a mobile design

Mockups (wireframe) for

responsive design mockup

SimpleHuman desktop website is a four-column site, 770 pixels width which has the overlapped navigation box on the left side. When I browsed on tablet nothing is changed, it fits perfectly because of the 770 pixels width. So on tablet version, I designed to keep the original column but moved the navigation box from the left side to the header section and change to horizontal layout, no need the empty left side space and make the text bigger.

And on the smartphone, I took off the shopping cart but kept the phone number and make it bigger for touch to call. I put the search box and main nav in icons that can expand and hide to keep space, and changed all four columns into one column stack up.

First mockup for tablet (768px) and one for smartphone (320px)


Showing how navigation and search function work on mobile web browser.

Assignment 2 – Compare App to Mobile Website


Yelp - Mobile Web and Native app home page

Mobile website scrolls vertically. “Hot New Businesses Nearby” are presented immediately on the second page of the scroll. Gives option to go to full site or get the app.

App presents icons for personal/social features on the first screen. Mobile web provides a (very subtle) drop down log in to access these features. The order of menu items is different between the two.

App does not give option to go to full site. It’s self-contained.


Zillow - Mobile Web and Native App home page

App offers Notification, Setting and Feedback that mobile web doesn’t. Also, app has automatic location detection (“Nearby Homes” vs. “Find Me” on mobile), Draft a review, Edit business, and Mobile business. Draw and layers are available on the app.

Note: Zillow app kept taking over from mobile website. It was hard to keep track of where I was. It seems the mobile website defers to the app when it’s installed (Android).

Why Have Both an App and a Mobile Website?

Many users don’t bother to download an app, or don’t want to. For immediate connection with a user on a mobile device, the mobile website serves an important purpose that the app can’t.

The app doesn’t require login to get location information, so the information can be given more directly.

Different users take advantage of different features, so having both a mobile website and apps covers a broader range of users.

Criteria for Analyzing Mobile Websites

1. Layout fits the device screen throughout the entire site. If you can’t see the whole “page” you can get the feeling you’re missing part of it, or have to scroll sideways to find the rest. It can be disorienting and confusing if you only see some of the content.
2. Clear and easy to use – obvious navigation and readable content. When users are on small devices, they are usually on-the-go and want very specific information quickly. Navigation must be obvious. It also needs to be big enough or separated enough to make touch choices efficient.
3. Well organized – quickly provide most important choices. Small devices are difficult to navigate, so it’s especially important that the fewest essential choices be offered while still providing an intuitive path to useful content.

Critique 3 Mobile Websites


YouTube is a perfect fit, even on a smaller smartphone screen. There is no need to scroll sideways. A list of options is available from a drop-down menu that fills the screen.

Navigation is very easy and simple. YouTube is focused on videos, so a scrolling list of videos is shown (including images), with the option to search at the top. Headings are easy to read.

The choices are very narrow on the Home screen. The search bar isn’t open until the icon is touched.


Fits on the screen perfectly all through the site.

Navigation is remarkably elegant on this site. Two options are given on the first screen and scrolling down gives many other options, each of which leads to other options, and more after that. I found myself wishing for a “return to home” choice and found a drop-down menu with broader options. Drop-downs are discouraged for small devices, but this was well executed and provided much needed assistance.

With supreme simplicity, only two pieces of information are given on the first screen – park hours. Disneyland is a complex business and caters to nearly everyone on Earth, so reducing the choices must have been difficult. But it seems to work very well and be focused on what a user is most likely to want. Branching choices feel intuitive and information is fairly easy to find.


Home screen fits perfectly and has the look of an app – strong colors, contrast, and images. However, moving through the site, some screens were magnified and it was difficult to get them reduced to a size that fit.

Navigation from the first screen is obvious and easy. Clear choices (4) are listed vertically as well as in a nav bar at the top. Some of the content uses a light text color that is very hard to read, especially in the (very) tiny font, so magnification was necessary. Though there’s no easy way to return to the main screen, it’s easy to get to any of the four main sections of the site.

One word navigation terms make the main choices very clear. Usually “Food” would be the highest priority, but a link to information about a current controversy is featured at the top.