Building Seamless UX with Springhare Solutions

Using User Experience (UX) Design To Elegantly Integrate LibCal With Your

Own Systems

J. Robert Van Pelt and John and Ruanne Opie LibraryMichigan Technological University

Randy Harrison Mies Martin

• Libraries are struggling with how best to move toward the digital/mobile/cloud

• With the complexity of information management, organizations rely on turnkey solutions

• If it’s important to design our systems with our users in mind, and every context is different…

• How can we implement turnkey solutions while still foregrounding rich user experience / interaction?

The Challenge

Digital application or suite of applications built by a third party and adopted (usually purchased) for its ready integration into extant business systems and workflows.

Turnkey solutions represent a trade off between the powerful functionality they offer (prohibitive to develop in house), and their ability to fully address the needs of an impossibly wide range of users

Turnkey solution

Turnkey (Out of the Box)

No branding No clear

navigation Interface is

cluttered and kind of a usability nightmare out of the box

Turnkey (minimal customization)

Some branding Unclear

navigation Interface is

cluttered and still a usability nightmare out of the box

Turnkey + UX

The key to design project mgmt

What the StakeholdersBelieve Users Need

What the Project LeaderUnderstood

What the ProgrammerBuilt

…communication and flexibility

How the Project was Documented

How the Project wasSupported

What the User ReallyNeeded

Adap

ted

from

: K

elly

Got

o’s W

eb R

eDes

ign

2.0:

Wor

kflow

Tha

t Wor

ks

• Why UX Design principles and conducting usability testing are crucial to any [re/]design—especially for implementing a turnkey solution, and from the beginning

• How to use an agile framework for project management to work quickly and efficiently

• How we applied Agile/UX in our own implementation of the LibCal system

Agile UX + Turnkey

Individuals and interactions over processes and tools

Working software over comprehensive documentation

Customer collaboration over contract negotiation

Responding to change over following a plan

The Agile ManifestoSo

urce

: a

gile

man

ifest

o.or

g

Core Principles: Iterative and incremental design—rapid

prototyping, constant user and designer testing Project Plan as a living document—doc-sharing to

assess the project in real-time (butavoid scope creep) and adjust course where necessary

Small-team, close-collaboration--flatten those asymmetrical relations of power and open multiple avenues of realtime communication

Agile Framework

Project Plan

Share your project plan Continually

add/change/revise your plan

Project Plan is the place to capture all your changes

Major StakeholdersHead, Technology, Strategy &

InnovationDigital Resource

Coordinator Web Developer

3 Student Assistants

DUX Team

Management Skills Coding/ Programming UX Design Usability Testing Graphic Design Library Systems Knowledge

Overlapping Skillsets

UX Design

The best UX come from user interfaces which:

Are consistent in both form and function Are easy to understand, learn, remember Provide feedback to the user and allow the

user to provide feedback to the system Are aimed at helping the user accomplish

his/her goals—not ‘use an interface’

Rapid Prototyping

Brainstorm a very low-fidelity wireframe

Arrange the functions your users need in a general layout

Rapid Prototyping

Build a low-fidelity mockup

Do NOT perfect the design…

Do your best work and then leverage users to help you improve it

Rapid Prototyping

Your final design is GOING to look different

It is also likely to be better if you let users help you

LibCal Instructions—1st Iteration

1. You are part of a group of 5 chemistry students. Your group needs a study room in the library and you have been asked to book it because you told the group you remembered seeing a university announcement that students could book their own study rooms. Book an appropriate study room for 5 hours on August 30th.

2. You’ve run into some problem with booking the room. Contact someone for help.

3. Jaspreet, from your Chemistry study group, needs to practice a presentation for the group on a large monitor. Book the best room available for this.

4. Now that you’ve booked a room, you realize you made a mistake with the times. Rebook the room moving the time back 2 hours (e.g., from 4pm to 6pm).

Usability Testing—Do this early!

LibCal Instructions Mockup

Still not done (HINT: you’re never done!)

What follows are a number of ways we improved our initial LibCal Room Booking system to better serve audience needs

More tips for UX Design

Provide a Clear Feedback Mechanism

Provide Clear Calls to Action

Simple Action Verbs

Create Your Own Menus

Wayfinding/ Paths to Success

Make help easily accessible

Always provide multiple paths to success

Continual Assessment

Leverage Conditional Logic

1. From the Dashboard menu, navigate as follows: Admin Stuff > Look &Feel > {choose tab: System-wide Settings}

2. In the “Custom JS/CSS Code” box, add this css:

<style type=“text/css”>.public_page div#footer { display: none; }

</style>

Work in small teams with flattened hierarchies

Work in parallel, not in isolation Try things out and have an exit strategy if

they fail Don’t get stymied by your own tools—The

point is to develop a product, not master a tool

Takeaways

You are not your users—listen to (and more importantly) watch your users use your website

Don’t make your users think (too much) Create ways to listen to users—Feedback

buttons and forms, periodic assessment Prototype—build a good first iteration and

leverage users to help you perfect it

Takeaways

Additional Resources (books and web)http://bit.ly/additional_resources

Mies Martin miesmart@mtu.edu

Randy Harrisonrsharris@mtu.edu

Resources