cal alumni network
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, 2013TRANSCRIPT
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
What we’ll discussBusiness Strategy
Integration Strategy
Building Strategy
2-Describe @cal project-Outline of presentation is in three sections-Questions after each section
Business Strategy
3
Business Strategy
4Launch in August, still soft launch, mailing out postcards next mnth
Business Strategy
77% of alums who have visited the sitehave updated their data
5Its about the data
Business Strategy
6
Business Strategy
7
Business Strategy
81. Exercise to identify actual relationship and ideal experience2. Map service used by an alum during life cycle
Business Strategy
Email forwardingAlumni directoryNetworking opportunities
Core competencies
9
Business Strategy
Team with skillsNeed for a nimble platformBad experiences with vendorsGreater control over environment
Build in-house?
10Also include mobilization
Business Strategy
LoginsAlum’s dataDomain namesAlums’ expectations
But there are complexities...
11Describe pointsReference single sign-on, which Jason will describe later
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!!
Business Strategy
13
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
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
Business Strategy
16
Business Strategy
Questions
17
Integration Strategy
18
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.
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?
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
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
Integration Strategy
21JS: Donʼt know if you want to use this. We can easily delete before presentation.
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
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
Integration Strategy
Questions
24
Building Strategy
25
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.
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
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
Mobile development
Building Strategy
29
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
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
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
Building Strategy
Why did we choose responsive?The @cal approach
• Restricting break points to mobile and desktop.
Skipped initially
DesktopTabletMobile
33
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.
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
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
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.
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
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.
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.
Desktop switch•Allow mobile users to view desktop version of site.
Building Strategy
Mobile First and selected features
41
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.
Building Strategy
Front-end mobile and browser testinghttp://crossbrowsertesting.com
44
Building Strategy
Questions
45
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