DESIGN PROJECT 2 (CITYDANCE WEBSITE REDESIGN) 4-APR-12 ADEEL BHATTI JESSIE CHEN KAYS FATTAL RAVIKANTH ARIKATLA VENKATA INFM700 – Information Architecture.

1

DESIGN PROJECT 2(CITYDANCE WEBSITE REDESIGN)

4-APR-12

ADEEL BHATTIJESSIE CHENKAYS FATTAL

RAVIKANTH ARIKATLA VENKATA

INFM700 – Information Architecture

2

Contents

1. Introduction2. Client’s (CityDance) Requirements3. Understanding the Client4. Problems in Current Design5. Research & Strategy6. New Design – IA Tools & Techniques7. New Design - Summary8. New Design - Demo (By Ravi & Kays)9. Issues & Obstacles – Design Tool10. Question & Answers

3

Introduction

1. Team Members

Adeel Bhatti Jessie Chen Kays Fattal Ravikanth Arikatla Venkata

2. About CityDance

Incorporated: 1994 Objectives: Dance Education & Programs

(Centers/Theaters) citydance.net: Current Design Implemented in 2006 Stakeholders: Dancers, Supporters, Sponsors & Donors

4

Client’s (CityDance) Requirements

Organization Compelling Design Mission Focused

Support org expansion & communicate it effectively

Showcase citydance's programmatic activities and organizational successes

Enable stakeholders to easily locate & learn about program areas specific top their interests

Boost online tools calendar, ticketing, online giving & provide easy access to those tools

5

Understanding the Client

We Understood our client by: Focusing on “Client’s Requirements“ & Studying site's “Design Problems” (hilited

by client)

6

Problems in Current Design – Hidden Info

7

Problems in Current Design – Redundancy/Labeling

8

Problems in Current Design – Presentation of Info

9

Research & Strategy

“Market” Research Surveyed other websites with similar focus (in dancing,

performing arts, etc.) for similarity and difference in: Information organization Labels and specific terms used Website layout and color theme

Card-sorting Focus on the categorization and labels from current

site Final result aggregated based on the card-sorting

activity done by each group member (online collaboration)

10

New Design – IA Tools & Techniques

Following is the summary of “IA tools & techniques”, which are used for citydance redesign: Understanding user experience

Card Sorting Labeling System

New Labeling Organization System

Hierarchical Org New categories are shallow but wide

11

New Design – IA Tools & Techniques (Cont’d)

Navigation System Opening, Middle & End game Global, Local & Contextual Navigation Menu Bars Breadcrumbs

Page Layout CRAPY Design Used Grid Layout (to avoid Navigation Overload)

Design Tool HTML/CSS

12

New Design - Summary

Organization - New Organization System Compelling Design

Combination of Organization, Navigation System, Page Layout & Design

Mission Focused Support org expansion & communicate it effectively

(By implementing mission-focused design) Showcase citydance's:

Programmatic activities - (Displayed registration & study with us on front page) &

Organizational successes - (Placing social media, events, news on the front page)

13

New Design – Summary (Cont’d)

Mission Focused (Cont’d) Enable stakeholders to easily locate & learn

about program areas specific top their interests (By doing site reorganization & adding navigation

system) Boost online tools

Calendar – (a clickable calendar placed on the home page)

Ticketing - (Included in quick links in home page) Online Giving – (Included in quick links in home page) Provide Easy Access to tools – (backed by navigation

system)

14

New Design - Demo

To demonstrate redesigned & mission-focused citydance.net website having: Organization System Labeling System Navigation System Page Layout & Design

Link: http://terpconnect.umd.edu/~kfattal/

CityDance/index.html

15

Issues & Obstacles – Design Tool

Choice-1: WordPress (Free Version) Selection Reason: Easy & Good Aesthetic

appeal Problem: Faced Editing Problems

Choice-2: HTML/CSS To meet design requirements before

deadline

16

Thank You!

Question & Answers