Table of Contents

LO3: Utilize website technologies, tools and techniques with good design principles to create a
multipage website................................................................................................................................2
A. Create a design document for a branded, multipage website supported with medium
fidelity wireframes and a full set of client and user requirements...............................................2
Detail of the company:.................................................................................................................2
Objectives of website...................................................................................................................5
Website Functionality..................................................................................................................5
Website Content...........................................................................................................................5
Website Benefits...........................................................................................................................6
Aspects before creating website..................................................................................................6
Produce the user requirements...................................................................................................7
Produce the client requirements.................................................................................................7
Medium fidelity wireframes for the web pages..........................................................................8
B. Use your design document with appropriate principles, standards and guidelines to
produce a branded, multipage website supported with realistic content...................................17
C. Compare and contrast the multipage website created to the design document.................18
D. Critically evaluate the design and development process against your design document
and analyze any technical challenges...........................................................................................19
LO3: Utilize website technologies, tools and techniques with good design principles to
create a multipage website.

A. Create a design document for a branded, multipage website supported with medium
fidelity wireframes and a full set of client and user requirements.

Detail of the company:

 Known as Starbucks
 Started and founded by Howard Schultz
 The first Starbucks was based on 1971 in Seattle’s Pike Place Market
 In 1982, Howard Schultz joins Starbucks as director of retail operations and marketing.
Starbucks begins providing coffee to fine restaurants and espresso bars.
 In 1983, Schultz travels to Italy, where he’s impressed with the popularity of espresso
bars in Milan. He sees the potential to develop a similar coffeehouse culture in Seattle.
 1984, Schultz convinces the founders of Starbucks to test the coffeehouse concept in
downtown Seattle, where the first Starbucks Caffè Latte is served. This successful
experiment is the genesis for a company that Schultz founds in 1985.
 In 1985, Schultz founds Il Giornale, offering brewed coffee and espresso beverages made
from Starbucks® coffee beans.
 In 1987, Il Giornale acquires Starbucks assets with the backing of local investors and
changes its name to Starbucks Corporation. Opens in Chicago and Vancouver, Canada.
 In 1988, Offers full health benefits to eligible full- and part-time employees, including
coverage for domestic partnerships.
 In 1990, Starbucks expands headquarters in Seattle. Unveils Starbucks Mission
Statement.
 In 1991, Becomes the first privately owned U.S. company to offer a stock option program
that includes part-time employees. Opens first licensed airport store at Seattle’s Sea-Tac
International Airport.
 In 1992, Completes initial public offering (IPO).
 In 1993, Opens roasting plant in Kent, Wash. Announces first two-for-one stock split.
 In 1994, Opens first drive-thru location.
 In 1995, Begins serving Frappuccino® blended beverages. Opens first LEED-certified
store in Hillsboro, Oregon. Announces second two-for-one stock split. Opens roasting
facility in York, Pa.
 In 1996, Begins selling bottled Frappuccino® coffee drink through North American
Coffee Partnership. Opens stores in: Japan (first store outside of North America) and
Singapore.
 In 1997, Establishes the Starbucks Foundation. Open stores in the Philippines.
 In 1998, Extends the Starbucks brand into grocery channels across the U.S. Opens in
underserved neighborhoods through joint-venture partnership with Magic Johnson.
Launches Starbucks.com. Establishes the CUP Fund emergency financial assistance fund
for partners. Opens stores in England, Malaysia, New Zealand, Taiwan and Thailand.
 In 1999, Acquires Tazo Tea. Partners with Conservation International to promote
sustainable coffee-growing practices. Acquires Hear Music, a San Francisco–based music
company. Announces third two-for-one stock split. Opens stores in China, Kuwait,
Lebanon and South Korea.
 In 2000, Establishes licensing agreement with TransFair USA to sell Fairtrade certified
coffee in U.S. and Canada. Opens stores in Australia, Bahrain, Hong Kong, Qatar, Saudi
Arabia and United Arab Emirates.
 In 2001, Introduces ethical coffee-sourcing guidelines developed in partnership with
Conservation International. Introduces the Starbucks Card. Announces fourth two-for-one
stock split. Opens stores in Austria, Scotland, Switzerland and Wales.
 In 2002, Establishes Starbucks Coffee Trading Company (SCTC) in Lausanne,
Switzerland.
Launches Wi-Fi in stores. Opens stores in Germany, Greece, Indonesia, Mexico, Oman,
Puerto Rico and Spain.
 In 2003, Acquires Seattle Coffee Company, which includes Seattle’s Best Coffee® and
Torrefazione Italia® coffee. Opens roasting facilities in Carson Valley, Nev., and
Amsterdam, Netherlands. Opens stores in Chile, Cyprus, Peru and Turkey.
 In 2004, Opens first Farmer Support Center in San Jose, Costa Rica. Introduces Starbucks
Coffee Master Program. Opens stores in France and Northern Ireland.
 In 2005, Acquires Ethos Water. Announces fifth two-for-one stock split. Opens stores in
Bahamas, Ireland and Jordan
 In 2006, Launches the industry’s first paper beverage cup containing post-consumer
recycled fiber. Opens stores in Brazil and Egypt.
 In 2007, Eliminates all artificial trans fat and makes 2 percent milk the new standard for
espresso beverages. Opens stores in Denmark, the Netherlands, Romania and Russia.
 In 2008, Chairman Howard Schultz returns as chief executive officer and begins
transformation of the company. Acquires Coffee Equipment Company and its Clover®
brewing system.
Adopts new Mission Statement “To inspire and nurture the human spirit – one person,
one cup and one neighborhood at a time.” Launches My Starbucks Idea, Starbucks first
online community. Also joins Twitter and debuts Starbucks Facebook page. Opens stores
in Argentina, Belgium, Bulgaria, Czech Republic and Portugal.
 In 2009, Launches Starbucks VIA® Instant Opens Farmer Support Center in Kigali,
Rwanda. Launches My Starbucks Rewards® loyalty program and Starbucks Card mobile
payment. Opens stores in Aruba and Poland.
 Starbucks product:
 Handcrafted Beverages: Fresh-brewed coffee, hot and iced espresso beverages, co
ffee and non coffee blended beverages, Vivanno™ smoothies and Tazo® teas.
 Fresh Food: Baked pastries, sandwiches, salads, oatmeal, yogurt parfaits and fruit
and cups.
 Coffee: More than 30 blends and single-origin premium arabica coffees.
 Merchandise: coffee and tea brewing equipment, mugs and accessories, packaged
goods, music, books and gift items.
 Ready-to-Drink (RTD): starbucks bottled Frappucino coffee drinks, starbuck
discoveries chilled cup coffees, starbuck doubleshot espresso drinks, starbuck
doubleshot energy+coffee drinks, seattle best coffee iced latte, taco bottle iced and
juiced teas.
 Starbucks Ice Cream: Super-premium coffee and coffee-free flavors.

 In 2010, Expands digital offerings for customers with free unlimited Wi-Fi, Starbucks
Digital Network. Seattle’s Best Coffee reinvents business strategy to extend brand’s
reach. Opens stores in El Salvador, Hungary and Sweden.
 In 2011, Launches first annual Global Month of Service to celebrate company’s 40th
anniversary. Opens first Community Stores in Harlem and Crenshaw neighborhoods.
Launches Starbucks® K Cup® packs.** Acquires Evolution Fresh. Opens Farmer
Support Center in Mbeya, Tanzania. Launches Create Jobs for USA to encourage small-
business growth. Opens stores in Guatemala, Curacao and Morocco.
 In 2012, Introduces Starbucks® Blonde Roast. Opens Farmer Support Centers in
Manizales, Colombia and Yunnan, China. Acquires La Boulange® bakery brand to
elevate core food offerings. Launches Starbucks Refreshers® beverage platform.
Acquires Teavana to transform the tea category. Opens stores in Costa Rica, Finland,
India and Norway.
 In 2013, Strengthens ethical sourcing efforts with coffee farming research and
development center in Costa Rica. Starbucks ceo Howard Schultz reinforces company’s
commitment to marriage equality at company’s Annual Shareholders Meeting. Come
Together petition urges U.S. elected leaders to reopen the government. Opens stores in
Vietnam and Monaco.
 In 2014, Enhances iPhone app with shake to pay and digital tipping. Launches Starbucks
College Achievement Plan with Arizona State University to offer qualifying Starbucks
U.S. partners the opportunity to complete a college degree through ASU’s online degree
program. Announces commitment to hiring 10,000 veterans and military spouses by 2018.
Opens first Starbucks Reserve® Roastery and Tasting Room in Seattle. Launches
Starbucks Mobile Order & Pay. Hosts first in a series of Partner Open Forums to discuss
race relations in America. Opens stores in Brunei and Colombia.
 In 2015, Launches Cold Brew iced coffee and Evolution Fresh™ handcrafted smoothies.
Announces sixth two-for-one stock split. Commits to hiring 10,000 opportunity youth by
2018. Expands Starbucks College Achievement Plan to offer full tuition coverage for all
four years of an undergraduate degree for qualifying U.S. Starbucks partners. Commits to
 25,000 partners graduating by 2025. Reaches 99% ethically sourced coffee milestone.
Opens stores in Panama
 First opened in Brunei Darussalam on 2014 at Mabohai Shopping Complex, Bandar Seri
Begawan
 Has 22,519 stores in the whole countries.

Objectives of website
The objectives of the website are it must can be access and shared any materials and also
desired link.

Website Functionality
The purpose of each pages is to:
1. Homepage:
Homepage is the main page that the users can see what the Starbucks latest product the
company have, what company services, the summarization of the company details, the
feedback from the users or customers that have been / already buy the product and make
deals with the company and in homepage to the users can see and contact the company if
they want to make the deals or have a question about it.

2. Account:
If the customer want to order the Starbucks product they need to have an account and if
they do they can just sign in and if not they can just create a new account.

3. Cart:
Whenever the customer about to buy a Starbucks product it will goes to cart page.

4. Product or Menu:
The users will know the Starbucks product details, what the product include / have, and
they also see the users review and they can review it to. By knowing the detail of the
product, the users can be interested and want to buy it.

5. Starbucks services:
In services pages will showing the details and full description of the services that been
shown in the homepage.

6. About us:
This page will tell more about the company. The summarization of About Us in homepage
will be explain more in this page.

Website Content
1. Home page:
a. Banner of promotion / the latest product
b. Menu: What they have
2. Product or menu: List of the products and the price
3. Video: introduction of the Starbucks cafe
4. Starbucks Services: Summarization of each services
5. About Us: The summarization of company profile and detail
6. Reservation: to reserve the café via online
7. Contact Us: Their contact, how to contact it is it by phone, email, and also branches
8. Social Profile: The linked to company social profile

Website Benefits
1. Expanding the promotional coverage
With having the website, our products are more in the know of people. The products that
can be offered through the website can be in the form goods and services products. With a
wide range of promotions then automatic will increase company sales.

2. Unlimited data
Internet is the unlimited information media. By having website, we have the same
employees who are promoting the products for 24 hours and 7 days a week.

3. The internet can be accessed

It can be accessed by anyone and unlimited user access

4. Wider promotion
Internet is a wider promotion media in a view of coverage or area coverage and unlimited
scope of areas.

5. The company identification media

If new companies launch a new product, then the website is the solution.

6. Promotional medium
Internet is the one promotion media that offer the effective relative cost that linked to
coverage area by optimizing the greatest benefits.

Aspects before creating website

1. Website User
Before making the website for the Starbucks company, I must be identifying the targeting
users that will visited the site. The targeting website users that will visited Starbucks
website are some of the teenagers such as students and most of it is adults such as
employees, unemployment that wanted to ordered online and don’t want to go to the
outlets that will saving their time and car fuel.

2. Requirement
 The other factor is if wanted to create website for the company, the Starbucks company
must identify their requirements or supplies needed it is hardware such as the computer
sets and also the other one is the software such as WordPress.

3. Designing
Identifying the design and the style of the website. It divided into various phase or
category.
Between the major divisions of the work phase is designing the information then
interaction
design and lastly interface designing. The main components of the website are:
 Text
 Image
 Graphics
 Links
 Mapping
 Audio form
 Video
 Animation

4. Features
Identify the element that have been entered

5. Presentation of information
Identify the presentation of information. The information must be accurate and effective
and also must be the latest information. It must know how to deliver the information, the
processing and their information needs.

Produce the user requirements

Produce the client requirements
Medium fidelity wireframes for the web pages
 Homepage:

Account Cart Social page link

Logo

Home Gallery Product About us

Starbucks introduction video

Banner  A
Starbucks Services c
c
Address Contact us o
u
n
Testimonial t:

Footer
o Sign in:

Logo

Username

Password
Sign in
Don’t have an account? Sign up
Forget your password?

o Create account:
 Logo

Username

Password

Confirm Password

Email

Create account

o Reset password:

Logo

Email

Reset Password

 Cart:

Account Cart Social page link

Logo

Home Gallery Product About us

Product name

Product detail
Product image
 Quantity and checkout button

Account Cart

Address Contact us

Account Cart
Footer

 Gallery:

Social page link Logo

Home Gallery
Product About us

 About Starbuck:

Address Contact
Social page link us Logo
Gallery
Address Contact us
Home Gallery Product About us

Footer
Footer About Starbucks
 Product:

Account Cart
Logo Social page link

Home Gallery
Product About us

Account
Account Cart
Cart
Account Cart  Services:

Social page link Logo

Products Add to cart
Product view and detail
category button
Home Gallery
Product About us

 Reservation:

Social page link Logo

Address Contact us
Starbucks services
Home Gallery Product About us

Footer

 Contact us:

Address Contact
Social page link us
Reservation form Logo

Address Contact us
Home Gallery Product About us

Footer
Footer
B. Use your design document with appropriate principles, standards and guidelines to
produce a branded, multipage website supported with realistic content.

a. Build the website based on your design using current standards, incorporating features
to enable accessibility. Provide clear, annotated screenshots of your completed
website as well as code. (P6)
C. Compare and contrast the multipage website created to the design document.

a. Write a comparison and contrast of your completed website against your design. Does
the completed website match the design? (M4)
D. Critically evaluate the design and development process against your design
document and analyze any technical challenges.

a. Critically evaluate your design and the development process you carried out against
your original design. Also analyse the technical challenges you faced throughout the
design and development phases of this project. (D2)