Date May.03.2010

Name of Client _The City of Los Angeles

Preliminary Schedule

Client: The City of Los Angeles

Project: Website Redesign

Designer delivers new Creative Brief, estimate and schedule


Designer and Client meet to conduct User Profiling session


Designer finalizes and delivers User Profile document

Thursday, 05/06

Designer delivers draft navigation as Sitemap document

Week of 05/06

  • Designer delivers draft wireframes and any revisions to initial sitemap
  • Designer & Client determine schedule for content delivery

Tuesday 05/13

Designer begins site look and feel

Thursday, 05/06

Design direction presentation

Wednesday, 05/20

Designer delivers revisions to look and feel, if required

Friday, 05/28

Once Client signs off on design look and feel, Designer completes page designs (10 to 15 pages estimated)

05/13– 05/27

Client delivers final content

Thursday, 05/20

Designer begins final production of all graphics files

Week of 05/20

Designer begin technical production:

Designer to create HTML, image folder and CSS files for posting to development site.

Week of 06/03

Beta testing

Monday, 06/07

Site launches

Thursday, 06/10


client survey

General Information

  • City of Los Angeles

Current Site

  • The current site is too complicated to use for regular visitors. There are too many information on the main page. There are too many banners on the main page also.
  • One successful thing about the current site is the main navigation on top.
  • 3 shortcomings on current site = color, banners, make it simple and easy.
  • The only important thing to maintain from current site is the logo.

Reasons for Redesign

  • It is an outdated site in which people can get confused easily. An update is needed to make it simple and easy to navigate and find info.
  • Primary objective would be to decrease customer service inquiries (over the phone or in person) by making it simple and easy to find info (forms, directions, etc.). Secondary objective would be to upgrade the brand of Los Angeles City by having a creative and inviting look online so more people out of state will want to visit Los Angeles.

Audience / Desired Action

  • A typical website visitor would be a Los Angeles resident who may be looking to report a street-lighting problem. A visitor could be of any age or occupation.
  • A typical website visitor would be looking to find information.


  • The website should be friendly. It is different from perception of current image.
  • Most other big cities do have a cleaner design compared to L.A. website. They are easier and simpler to use. There were some cities that had similar looking websites as L.A. But most were better.
  • Well-organized. Nice homepage picture. Nice use of gradient.
  • The website has minimal texts on main website.
  • Overall, the colors match very well. Although there seems to be a lot of information, but they are well-organized and easy-on-the-eyes.


  • The site will use the current, existing content from the current site.


  • The target platform would be both Mac and PC. The target browser would be both FireFox and Internet Explorer.
  • There is no need for JavaScript, Flash or DHTML because the site must be user-friendly.


  • Most people will be searching for the website on search engines, using terms like ‘Los Angeles City’.
  • We can tell people who are visiting Los Angeles City offices to use the website.

create a navigational menu

create a navigational menu using the list <li> tags and create a CSS based drop down menu.

“Sephora” website redesign(midterm)

Homepage_add an image in the skincare consultation section

Makeup page(sub page)_add an image in the beauty central section.


This is is sephora redesign. the audience is women from 20 to 40 years old. So I used a lot of pink to make it more feminine.

My focus was letting people know whats hot and most selling and skin consultation. I wanted to educate the viewers on the newest trends of make-ups and different ways.

Most other make up websites don’t have skin consultation so people who don’t know their skin types don’t know what to buy. So its very helpful. So people can read and buy new stuff.

Some classmates told me they liked my sub-page more than they liked the main page. They also told me the text and the images on main page are too small.



subpage (makeup)


2-column with faux column

Create a page with a 3-column Liquid layout

3 column with faux column

create a 2-column layout with a column that extends down to the bottom of the page using a graphic.

moma’s subpages



The New Typography(level3_sub-sub page)