Naperville Garden Club

1
Naperville Garden Club

• LIS 220
• Project 2
• Dan Lucas

2
Website Redesign

• The Naperville Garden Clubs current site is in
  poor shape. The site was created on Homestead by
  a first time web designer. Because of this the
  site contains multiple errors.
• An overall redesign is necessary to fix these
  problems. Tweaking the current site is not an
  option.

3
Current Site

• URI www.napervillegardenclub.org
• Problems
• Color scheme
• Banner
• Menu Bar
• Body Copy
• Interface Design
• Information Architecture

4
Color Scheme

• The sites old colors are loud unnatural.
• The colors within the site were taken from the
  stained glass window on homepage. It would make
  sense to base the colors off of real, not stained
  glass flowers.
• While yellow and purple are on opposite ends of
  the color wheel, the concept of simultaneous
  contrast does not work with the site. Gardening,
  while exhilarating to some, is an activity
  linked with relaxation for most people.
• The color scheme overpowers the eyes and causes
  difficulty reading the copy.

5
Banner

• The banner is congested and unorganized leaving
  the user confused. This conveys the notion the
  website was created by a novice.
• The title is lost between the picture and the
  seals.
• While crests and seals establish authority and
  legitimacy, the two in the banner look as if
  they were slapped on last minute, nullifying
  their authority.
• The Naperville, IL in the title is redundant.

6
Menu Bar

• The menu bar offers too many choices. It violates
  the 7 /- 2 rule.
• Events, programs, Cup of Cheer and projects can
  be located under one section.
• A page should never have a home link on the home
  page.

7
Body Copy

• Cut the text in half because people read 25
  slower on a computer screen.
• Text needs to be broken up and/or bulleted for
  scannability.
• The text seems to be a mix of the club history
  and the end of the current newsletter. These
  should be located on separate pages.

8
Interface Design

• The update/ whats new box dominates the banner.
• The menu bar and the copy window go too far down
  the page. This forces users with a low resolution
  to scroll.

9
Information Architecture

• Clicking on About Us leads to information on how
  to join before the clubs history. This
  information is out of place.
• The events, programs, and notices contain
  similarly structured information (date, title,
  description). Therefore three sections are not
  necessary.

10
Naperville Garden Club Redesigned
11
(No Transcript)
12
Strategy

• User Needs
• Two types of users.
• Current club members. Check the site for recent
  announcements or upcoming activities.
• People interested in joining. Check the Get
  involved and Club info sections.
• Site objectives
• To inform current member of club happenings and
  attract new member to the club.

13
Scope

• Functional specifications
• An HTML page relying heavily on CSS with
  updateable calendar and announcements sections.
• Content requirements
• All content on current site

14
Structure

• Interaction design
• The image will change when page is reloaded.
• Links will change color when underlined.

15
Structure

• Information Architecture
• The initial 12 links were consolidated into five
  sections.
• Library, committees, affiliations and
  scholarships are now located in About Us.
• New members and volunteer are now under Get
  Involved.
• Programs, events, Cup of Cheer, and projects are
  now found under Activities.
• Notices was changed to Announcements.
• A Calendar section was added to keep members up
  to date.

16
Structure

• Information architecture
• Body copy broken into small paragraphs.
• The first two paragraphs explain the what the
  club is about.
• The third paragraph serves as a call for action
  (get involved). This helps the club grow.

17
Skeleton

• Interface design
• Designed with ample white space for a clean,
  simple feel.
• Including the announcements and calendar on home
  page increase efficiency.
• No scrolling necessary on home page.
• Page has closure at bottom.
• Title leads eye to main copy.

18
Skeleton

• Navigation design
• User can click on Activities for a general page.
  User can also click on info, programs, events and
  projects for the specific page. This applies to
  all sections.
• User can click on Calendar or on the text for
  more information.
• The dates serve as bullets to separate
  information.

19
Visual design

• The site colors are taken from nature to mesh
  with the desired feel of the site.
• The banner is clean, uncluttered and leads the
  eye to the main copy. A one pixel tan stroke was
  applied to set the green text from the brown
  background.

20
Before After