CITY OF SANTA MONICA - WEBSITE UPDATEPROJECT DESCRIPTION:

I was hired to work for the City of Santa Monica at the Annenberg Community Beach House as the Guest Services Coordinator. The main focus of this job, despite its title, was the graphic design of everything, including the website, marketing emails, brochures, signage, and more. I managed all communications, including maintaining the website.

Within the first week of working at the Beach House I noticed several things about the vast majority of inquiries: 1. Most were about the pool and did not

know that it was not open year-round2. 90% of callers/visitors were not familiar

with the location’s special features that were open all year

3. People thought it was a private club4. There was a general inability to find clear

information online about the site, such as: • Marion Davies Guest House; what it was; where it was; the free tours • Free cultural programming; what they were and how to attend them • Athletic classes; class times, costs, locations • The Splash Pad; what it was, where it was, the hours • The pool’s seasonal hours • Our contact information

5. Above all else, I found the website to be a mess of text, illogically organized navi-gation, few photgraphs, broken widgets, and redundant navigational links and text

The initiation and proposal of a major web-site clean-up/update became my personal priority. (Unfortunately I can not find my notes and screenshots of the old website, my Photoshopped layouts of proposed revisions and my proposal to the manager.) However I’ve created mock-ups of the old

site for reference and will list my process here.

PROCESS:

First, I made a list of the website issues Navigational tools and links were lacking1. Most pages included several sections of

information, but did not include anchor links to these sections

2. Links to the main areas of interest, like the pool, classes, cultural programs, Marion Davies Guest House were either non-existent or posted in hidden submenus

3. Main menu drop down tabs appeared to be arranged without consideration of their relation to the main tab

4. Some menu tabs were duplicated in other menus

5. No ‘Return to Top’ links existed, despite 90% of the pages including so much info that one had to scroll down many times

6. Pages were extremely text heavy, with very few text links to mentioned sub-sections

Photos and images were limited1. Pages were full of text with few to no

photos2. Existing photos were all different sizes

and shapes, and arbitrarily placedThe main website template used on for most of the site’s pages had major issues1. An interactive calendar, weather widget,

and the contact information and hours appeared on every page

2. The calendar also had its own main menu button and took up almost half of the each page, severly limiting the area that could be used for actual content

3. The weather widget was broken and not updating to the current conditions

4. The contact information and hours were not being maintained and had differing information (since the site had seasonal

1/6

MAILE MALIN - PORTFOLIO

CITY OF SANTA MONICA - WEBSITE UPDATEhours), and was nearly impossible to locate hidden under the other two ele-ments

Next I sketched wireframes of the site navi-gation, revising them until they made the most intuitive sense

I then Photoshopped mock-ups of the proposed revision, including:1. Renamed menu buttons

“Visit” became VISIT US “Cultural Programs and activities” be-came ACTIVITIES “Calendar” was removed “Plan Your Event” became PLAN AN EVENT as this section was for private event space rentals; ‘Plan Your Event’ was misleading visitors looking to plan an informal get together or beach party

2. Rearranged and updated sub-menus, grouping related tabs together, making information easier to locate

3. Removed duplicated tabs4. Added submenu/anchor links at the top

of each page with multiple sections5. Added “Return To Top” links6. Added more photographs7. Standardized photograph size/shape/

location on page8. Removed the calendar, weather widget,

and contact information from the right column of every page

9. Updated the template with a side col-umn menu, listing links to the most requested areas of interest, these links were grouped in related sections

10. Added our Twitter page feed under the right column for live streaming up-dates, as hours, classes, events and site sections could be cancelled, closed or changed from day to day

(Note: I wasn’t permitted to make all of my suggested updates and was often limited to existing details/format/text/sections.)

2/6

MAILE MALIN - PORTFOLIO

After: Updated Main Menu

Duplicate tab

Listed in footer

Moved to About Us

Shortened name

Renamed

Admission: confusing to guests. Site was free to visit, pool admission is listed under Pool

Much too convoluted Consolidated ‘type of rental events’ into one section

Removed from About Us/Activities. Neither operated by the site, nor an activity. Links to the Cafe’s site posted here

Before : Old Main Menu

3/6

MAILE MALIN - PORTFOLIO

BEFORE: MOCK-UP OF THE ORIGINAL HOME PAGE

CITY OF SANTA MONICA - WEBSITE UPDATE

• Information was hard to find without links

• Inconsistent Main Menu formatting

• Few text links within text heavy content

• Photos were rarely used

• Contact information and hours were hidden here and posted on every page

• Hours did not reflect current seasonal hours

• Broken weather widget was not syncing with current weather

• Calendar occupied half of every page and links within did not work

• Superfluous calendar button in main menu

• Calendar, weather widget, and contact information / hours appeared on every page

4/6

MAILE MALIN - PORTFOLIO

AFTER: UPDATED HOME PAGE

CITY OF SANTA MONICA - WEBSITE UPDATE

• Cleaned up Main Menu & drop down menus

• Added side column with links to popular/most requested sections

• Added photographs with links to illustrate the site’s special, and often unknown, features like the Splash Pad, the Art Gallery, the Marion Davies Guest House, Cul-tural events

• Added highlights section including photos to upcom-ing cultural and community events, classes, and other important highlights with links to more information

• Added the Beach House’s Twitter feed for real-time updates on the site

• Removed the calendar, weather widget, contact/hours from template

• Limited text heavy content

5/6

MAILE MALIN - PORTFOLIO

CITY OF SANTA MONICA - WEBSITE UPDATEBEFORE: ORIGINAL PAGE LAYOUT

• No anchor links to page subsections

• Few text links within text heavy content

• Photos were rarely used and not uniform in size, shape or placement

• No ‘Return to Top’ links

• Calendar occupied half of page and did not link to information within, which was small and difficult to read or click on

• Calendar, weather widget, and contact information / hours appeared on every page

6/6

MAILE MALIN - PORTFOLIO

CITY OF SANTA MONICA - WEBSITE UPDATEAFTER: UPDATED PAGE LAYOUT

• Added sub-menus at the top of pages with subsections, which made the information on each page more easily accessible

• Added photographs to each section in a standardized shape, size, and location

• Added text links to info found on other pages

• Standardized the right column on each page so frequently requested information was easy to find

• Removed the calendar, weather widget from every page

• Limited text heavy content wher-ever possible

• Added ‘Return To Top’ at the bot-tom of long pages (not seen here)