cal alumni network

45
JOEL FULLER, JASON STROYER, CHRISTINA SPONSELLI MARKETING & COMMUNICATIONS Berkeley UNIVERSITY OF CALIFORNIA Building an Alumni Network with a small team, a clear strategy, and lots of chutzpah 1 -Title of presentation -Introduction of speakers -Acknowledge other members of the team, Matt, Rob, Virginia, David. Customer service team at the Cal Alumni Association

Upload: christina-sponselli

Post on 17-Jun-2015

197 views

Category:

Documents


3 download

DESCRIPTION

How to build an alumni network with a small team, clear strategy, and lots of chutzpah Presentation by Joel Fuller, Jason Stroyer, Christina Sponselli, CASE conference, San Francisco, March 2, 2013

TRANSCRIPT

Page 1: Cal Alumni Network

JOEL FULLER, JASON STROYER, CHRISTINA SPONSELLIMARKETING & COMMUNICATIONS

BerkeleyUNIVERSITY OF CALIFORNIA

Building an Alumni Network with a small team, a clear strategy, and lots of chutzpah

1-Title of presentation-Introduction of speakers-Acknowledge other members of the team, Matt, Rob, Virginia, David. Customer service team at the Cal Alumni Association

Page 2: Cal Alumni Network

What we’ll discussBusiness Strategy

Integration Strategy

Building Strategy

2-Describe @cal project-Outline of presentation is in three sections-Questions after each section

Page 3: Cal Alumni Network

Business Strategy

3

Page 4: Cal Alumni Network

Business Strategy

4Launch in August, still soft launch, mailing out postcards next mnth

Page 5: Cal Alumni Network

Business Strategy

77% of alums who have visited the sitehave updated their data

5Its about the data

Page 6: Cal Alumni Network

Business Strategy

6

Page 7: Cal Alumni Network

Business Strategy

7

Page 8: Cal Alumni Network

Business Strategy

81. Exercise to identify actual relationship and ideal experience2. Map service used by an alum during life cycle

Page 9: Cal Alumni Network

Business Strategy

Email forwardingAlumni directoryNetworking opportunities

Core competencies

9

Page 10: Cal Alumni Network

Business Strategy

Team with skillsNeed for a nimble platformBad experiences with vendorsGreater control over environment

Build in-house?

10Also include mobilization

Page 11: Cal Alumni Network

Business Strategy

LoginsAlum’s dataDomain namesAlums’ expectations

But there are complexities...

11Describe pointsReference single sign-on, which Jason will describe later

Page 12: Cal Alumni Network

Business Strategy

Assess functionalityDetermine technical requirementsAlumni directoryReview contract

Exit Strategy

12- Didnʼt bring all functionality over because wasnʼt being used by alums. But saw opportunity to create public profiles, will speak more about it next slide.- Tech reqs: Did not change the user experience, but we upgraded servers to LAMP stacks. Cost was low for us, but we couldn't offer the bandwidth of this new site without new virtual servers.- Review terms of contract, including when notice must be given, process for destroying data, and requesting data be pulled for new site.-look for opportunities!!

Page 13: Cal Alumni Network

Business Strategy

13

Page 14: Cal Alumni Network

Business Strategy

14Creating @cal public profile. About 40% of people who have logged into the network since August have created a public profile.1. Help people find our alums and their social media profile2. Offer a university-related URL for the page3.Allow alums to customer their URL & page4. Make it searchable by commercial search engines

Page 15: Cal Alumni Network

Business Strategy

15This alum is a 1979 grad1. May choose from images we provide2. Allow people to contact page owner anonymously3. Alums may update information in real-time

Page 16: Cal Alumni Network

Business Strategy

16

Page 17: Cal Alumni Network

Business Strategy

Questions

17

Page 18: Cal Alumni Network

Integration Strategy

18

Page 19: Cal Alumni Network

Integration Strategy

Single sign-on

19CS: Before making the move off our vendor, we were fortunate enough to have taken control of system of logging into our alumni network. Jason Stroyer, the projectʼs programmer, will talk more about single sign on and how we worked with other campus groups.JS: Here you can see the login screen (left) and the same screen with the Help section opened up.

Page 20: Cal Alumni Network

Integration Strategy

The passphrase reminder is the seventh most visited page

on the site

The login name reminder is number nine

20JS: Talk about the reminders. Why were they necessary?How do they work?

Page 21: Cal Alumni Network

customer service area

customer service area

2.

Change Your

Passphrase

1.

Confirm Your

Identity

verified 1. Confirm

Your Identityno

Migration of Users to Single Sign-On

5.

CalNet login

with

customization

friendly

name

no

yes

yes

drupal site

successful

3. Update to

a

personalized

CalNet ID

yes

successful yes4.

Instructional

text about

process

no

drupal site

Documents/@cal/flows/emails_080124

Page 1 of 2

Revised Jan. 24

C. Sponselli

continued to

next page

change

password

screen

Notes

1. Shaded box indicates CalNet screen with very little

customization.

update to

friendly

no

yes

Documents/@cal/flows/emails_080124

Page 2 of 2

Revised Jan. 24

C. Sponselli

successful

yes

no

form data

emailed to

customer

service

6.

Customer

service will

contact you

within two

business days.

1. Confirm

Your Identity

no

start point for

users

authenticated

by customer

service

change

password no

form data

emailed to

customer

service

6.

Customer

service will

contact you

within two

business days.

change

password

no

yes

no

continued to

screen 6

no

email

with token

no

Secret

question

process

starts

5.

CalNet login

with

customization

Secret

question

process

starts

5.

CalNet login

with

customization

form data

emailed to

customer

service

6.

Customer service

will contact you

within two

business days.

no

start point for

users not

coming

through an

email

Integration Strategy

21JS: Donʼt know if you want to use this. We can easily delete before presentation.

Page 22: Cal Alumni Network

Affinity

Circles/Haas

Affinity

Circles

Convio Email

Tool

CAS

authentication

Notes:

1. Details on CAS authentication available

on Authentication with CAS

2. ----- represents data synch

3. ___ represents end user experience

Disclaimer:

1. Flow doesn't include LDAP process

Documents/@cal/flows/big_pic_architecture_nuser

8 October 2007

C. Sponselli

Community Architecture, New Users

Post-login for

all units

CADS

Convio

PCI

Email with

CAS login

info

Convio PCI

End user

authenticates

on CAS

Community Architecture, New Users Via Customer Service

Email or phone

call to end user

giving CAS

login info

CADS

Creation of

new CADS

record based

on end user

request

Customer

Service looks

up info on

CADS

Convio PCI

Post-login for

all unitsPCI

Affinity

Circles/Haas

Affinity

Circles

Convio

Integration Strategy

Data synchronization

22JS: Here is an example of our data synchronization before we built the network in-house. The architecture has changed, but this gives you a sense of the complexity of working with data. - Didnʼt want this to lose this data to commercial social media sites and updates stream, too.- Data updates are being made in @cal by users, and can't be overwritten by alumni database updates. Alums are records of source. We don't want to overwrite.- Build admin tools to update site for end users. - When build new site, created tools to compensate for pain points experience working with vendors. We made it more transparent. Information we weren't getting about errors, emails are triggered and we can respond to them. We built into place admin tools.- Taking on data synchronization formatting. Matching the vendor format to streamline import process. Alumni information management staff didn't need to make modifications to their existing work. We looked to vendor documents and replicated it so they wouldn't need to change the nightly processes.- We are synchronizing because their additional fields that the alumni databased doesn't

Page 23: Cal Alumni Network

Integration Strategy

Email forwarding

23One of our core competencies is email forwarding.- Explain what email forwarding is. Allow current students to convert their student email address, and for alums they can select [email protected] Discuss how email addresses are displayed and give examples of affinity based assignments, schools/colleges/alumni association- One of the top reasons people join @cal.- For some alums, only register to get this service

Page 24: Cal Alumni Network

Integration Strategy

Questions

24

Page 25: Cal Alumni Network

Building Strategy

25

Page 26: Cal Alumni Network

Building Strategy

Working in HTMLForm followed function•Initial functionality implemented without design.•Wireframes introduced to add structure for improving UX and testing feedback early in the process.

Functional wireframes26

Working through the wireframe into design.Working in HTML allowed us to get UI testing early on and were able prove the concept sooner in the process.Style was intentionally left out initially. We were able to determine how close we were to our core concepts without the worry of style.This also allowed us to be more agile in development of functionality early on as we had working prototypes to gain feedback.

Page 27: Cal Alumni Network

Building Strategy

Working in HTMLForm followed function•Determined mobile approach mid-way through.•Once functionality was refined, design and styling furthered UI improvements.•We continue to iterate and improve the UI and UX.

27

Page 28: Cal Alumni Network

Building Strategy

User TestingLeveraging on-campus resources and partnerships •“Break our code” night. Never underestimate pizza!

28Christina to discuss user testing and break our code night

Page 29: Cal Alumni Network

Mobile development

Building Strategy

29

Page 30: Cal Alumni Network

Mobile development Overview

• What is Responsive Web Design?

• Why did we choose responsive?The @cal mobile approach.Benefits and drawbacks of responsive design.

• Mobile first and deciding selective features.

Building Strategy

30

Page 31: Cal Alumni Network

Building Strategy

What is responsive design?Developing a website that “responds” to devices based on specific screen sizes (break points).

Single most important development question is:•What are your user's mobile priorities?

http://mediaqueri.es/

31

Page 32: Cal Alumni Network

Building Strategy

What is responsive design?Developing a website that “responds” to devices based on specific screen sizes (break points).

Single most important development question is:•What are your user's mobile priorities?

http://mediaqueri.es/

Demonstrate @cal RWD

Oski Profile

Oski Search

32

Page 33: Cal Alumni Network

Building Strategy

Why did we choose responsive?The @cal approach

• Restricting break points to mobile and desktop.

Skipped initially

DesktopTabletMobile

33

Page 34: Cal Alumni Network

Building Strategy

Why did we choose responsive?The @cal approach•Below the mobile break point uses fluid layout, accommodating many devices, casting a “wide net.”

Mobile Tablet

34Limiting to the technique of having a fluid design below the breakpoint.Easing the development workload by casting a wide net when possible.

Page 35: Cal Alumni Network

Building Strategy

Why did we choose responsive?The @cal approach•Below the mobile break point uses fluid layout, accommodating many devices, casting a “wide net.”

35

Page 36: Cal Alumni Network

Building Strategy

Why did we choose responsive?We looked at other mobile options•Separate mobile site using a mobile framework, or specialized “site” optimized for mobile.•Separate mobile sites can be good for specialized content which does not translate well to RWD, such as a web application.

36

Page 37: Cal Alumni Network

Building Strategy

Why did we choose responsive?Benefits•One is more than two. Maintaining one codebase.

Avoid coding, styling and maintaining two separate websites.

•Can be a much faster development time/testing cycle.•Further CSS development from front-end developer. •No need for additional backend programming or new codebase.•Track analytics on one domain. Users interact with one website on various devices.

37In this case, one truly is more than two.

Page 38: Cal Alumni Network

Building Strategy

Why did we choose responsive?What are “best-use” RWD scenarios?•Project with limited developer resources or budget for mobilizing. •Site that does not have too many image elements (content images) or photo galleries.•Site that is not overly complex in CSS/design.•Site that can naturally "reflow" fairly well using CSS floating techniques as opposed to positioning techniques.

38

Page 39: Cal Alumni Network

Building Strategy

Why did we choose responsive?What are “challenging” RWD scenarios?•Adapting an existing site that uses a content managing system such as WordPress or Drupal with legacy content. Themes are available for both CMS’.•A site with highly complex detailed content such as a news portal, albeit this is possible with the right developer experience and markup planning.•A site with many image elements or large images such as photo galleries, etc.

39unless you have thorough template experience.

Page 40: Cal Alumni Network

Building Strategy

Mobile First and selected featuresA mobile first approach•Plan for feature set you want to provide for mobile users first. This will help establish your required priorities and site structure (markup).

Features•Decide what you will or can offer users of your site.

Do they need that picture gallery?Is the contact information paramount?Look at current site’s metrics to help you determine site use.Maybe they don’t need to upload files or pictures.

•What must they be able to do?

40We had to be clear on what can we offer.

Page 41: Cal Alumni Network

Desktop switch•Allow mobile users to view desktop version of site.

Building Strategy

Mobile First and selected features

41

Page 42: Cal Alumni Network

Building Strategy

Mobile First and selected featuresStructuring markup to “flow” naturally

42Think about how you structure your markup ahead of time to plan for re-flow.Here is also where following compliance in markup can help you in the long run. Well formed code avoids problems in the future.

Page 43: Cal Alumni Network

Building Strategy

Front-end mobile and browser testinghttp://crossbrowsertesting.com

44

Page 44: Cal Alumni Network

Building Strategy

Questions

45

Page 45: Cal Alumni Network

Sites:

http://mediaqueri.es/

http://www.responsinator.com/ (quick-view tool)

https://github.com/teleject/hisrc

https://github.com/scottjehl/picturefill/

http://developer.sencha.io

http://docs.sencha.io/current/index.html

http://wordpress.org/extend/themes/responsive

http://drupal.org/project/omega

Books:

Ethan Marcotte, Responsive Web Design, Publisher: A Book Apart

Luke Wroblewski, Mobile First. Publisher: A Book Apart

Progressive Enhancement. Publisher: New Riders

Q&A / Resources

Example RWD sites

RWD tool

JavaScript image library

JavaScript image library

Advanced image handling

WordPress RWD theme

Drupal RWD theme

46