Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


A web designer's guide to being lazy

Presentation at edUi2013, Richmond, VA

Conny Liegl

on 9 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of A web designer's guide to being lazy

<h1>A web designer's
guide to being lazy</h1>
<h2>Conny Liegl<br>
Robert E. Kennedy Library, Cal Poly</h2>

Website redesign goals
Don't be scared to experiment
and start from scratch if needed.
Hi! I want to show you how to...
Establish effective and efficient workflows in your institution
Educate stakeholders

Implement user-centered, responsive web design
Conduct useful and cheap (!) user experience studies

Minimize the amount of duplicated efforts
Methodology of COPE (Create Once, Publish Everywhere)
Create modular and portable content that can easily be reused for multiple purposes
Potential problems and bugs
User Experience at Kennedy Library
You don't
have to be
a team of one...

Mobile strategies
Library's need for mobile website obvious from stats:
+41% more mobile users compared to 2011/2012
Think "tap", not "click"
Responsive design: 3 columns collapse into single column (resolution below 980px width)
Main page widgets sorted by importance for users
Homepage slider hidden
Subpage sidebars move beneath main content
Responsive CSS3, HTML5, Font Awesome
website copy

write blog articles

copy for flyers
publish Facebook posts

live-tweet at events
digital signage
event flyer
website slider
content approval...
Adapt everything to your needs:
strategy has to fit your institution's
real-life situation

WordPress (WP) multisite installation
Library main website and library blog
regular backups, push to staging (separate installation)

Theme: WP Responsive with child theme, bootstrap-based

3 style sheets: general, responsive, plugins
Open Hours
Times for three areas stored in Google calendar
Output to website: Custom WP-plugin
Custom shortcode: [rek_hours]
Research Help Chat
Third-party application: Ask a Librarian by LibraryH3lp
Output to website: Custom WP-plugin, changes to e-mail link when chat is not staffed
Custom shortcode: [rek_chat]
Ask a Librarian
Google Search Appliance
Mobile Site Builder
New Books
Serials Solutions
SFX (Citation Finder and Find-It)
Third-party applications
Transport cohesive message to users
Reflect the mission and voice of Kennedy Library/Cal Poly
Simple, more effective navigation, user-centered language

Coherent look and feel across many platforms
Work with new standards in web design: CSS3, HTML5, scalable vector icons
Mobile-friendly website = responsive design
Improved functionality: better search, obvious open hours, prominent chat, intuitive maps

Implement WordPress CMS
Enable multiple editors and handle updates more effectively
Create shared sense of website ownership
Communication problems
Stakeholder goals might conflict

Adapting a whole new workflow
Learning new web style guides

Underestimating size of the project
Increased workload for authors and developers

Tech issues
CMS issues: plugins, updates, templates...
Educate your stakeholders
create modular content
publish to multiple platforms
website, blog, social media, digital signage, print materials
Analytics: assessment and general direction

User research: surveys, observations, A/B testing, social media,
(guerrilla) UX studies
Personas, scenarios, experience maps
Know thy user: collaboration with Student Library Advisory Council

Web Steering Committee with 8 members from different areas of library, including student
Results of guerrilla sketch-a-thon
18 individual sketches providing insight and guidance
Broad invitation to students, and library employees
Announced through Facebook, staff e-mail
Flyers distributed in library
Costs: only print!
Return: ~10% of flyers
Research Management
Social Engagement
Primary audience: students
Secondary: faculty, staff, alumni, community
Experience map shows two main goals of library users:
stressed users
informational character (look up hours, search for book, ...)
happy users
enjoyable acticities (meet friends, have coffee, ...)
Website must help to make research enjoyable
Keep users' stress and frustration at a minimum
All information should be relevant and easy to find
Design for emotions: Tone must be friendly and uplifting
define identity, key messages, goals
formatting guidelines
tone of voice (less library terms, more action words)
give precise writing guidelines
Develop goals, strategy and methodology
Present to and communicate with all stakeholders
Listen to users
Share your results
Experiment: try, fail & repeat until you improve
"Where's my book" application with custom display on maps

Group finder application

"I am here" application

Library heatmaps
Planned for next year
When you're back...
writing copy...
"lazy" ideas emerge...
What if we...
improve our internal communication
create easy-to-follow guidelines
relate more to our users
convey one cohesive message
find a way to push same/similar content to different platforms
designing graphics...



Share your ideas
Identify key players and stakeholders
Realize their (and your!) strengths and weaknesses
Find the right way to communicate
Also: find the right time and place, and then...

SPEAK UP - even if ideas are half-baked
Take your time and LISTEN to the responses
Tweak your ideas, find supporters/collaborators

Start doing cool stuff and share the process!
Multi-use content for Kennedy Library...
Storing hours in one calendar that feeds website, university portal and digital signage

Creating responsive website to eliminate mobile instance m.

Using same copy and image for website slider and digital signage

Using similar image for Facebook and website slider

Using poster graphics for portrait digital signage

Linking accounts for Twitter and Facebook
In development...
Custom calendar feed from main page plugin, displaying calendar entries on blog and digital displays throughout library

New interactive SVG maps inspired by NY City map redesign
Custom feature development
Full transcript