building seamless ux with springhare solutions
DESCRIPTION
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 Library Michigan Technological University. Randy Harrison. Mies Martin. The Challenge. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/1.jpg)
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
![Page 2: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/2.jpg)
• 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
![Page 3: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/3.jpg)
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
![Page 4: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/4.jpg)
Turnkey (Out of the Box)
No branding No clear
navigation Interface is
cluttered and kind of a usability nightmare out of the box
![Page 5: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/5.jpg)
Turnkey (minimal customization)
Some branding Unclear
navigation Interface is
cluttered and still a usability nightmare out of the box
![Page 6: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/6.jpg)
Turnkey + UX
![Page 7: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/7.jpg)
The key to design project mgmt
What the StakeholdersBelieve Users Need
What the Project LeaderUnderstood
What the ProgrammerBuilt
![Page 8: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/8.jpg)
…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
![Page 9: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/9.jpg)
• 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
![Page 10: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/10.jpg)
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
![Page 11: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/11.jpg)
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
![Page 12: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/12.jpg)
Project Plan
Share your project plan Continually
add/change/revise your plan
Project Plan is the place to capture all your changes
![Page 13: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/13.jpg)
Major StakeholdersHead, Technology, Strategy &
InnovationDigital Resource
Coordinator Web Developer
3 Student Assistants
DUX Team
![Page 14: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/14.jpg)
Management Skills Coding/ Programming UX Design Usability Testing Graphic Design Library Systems Knowledge
Overlapping Skillsets
![Page 15: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/15.jpg)
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’
![Page 16: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/16.jpg)
Rapid Prototyping
Brainstorm a very low-fidelity wireframe
Arrange the functions your users need in a general layout
![Page 17: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/17.jpg)
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
![Page 18: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/18.jpg)
Rapid Prototyping
Your final design is GOING to look different
It is also likely to be better if you let users help you
![Page 19: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/19.jpg)
LibCal Instructions—1st Iteration
![Page 20: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/20.jpg)
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!
![Page 21: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/21.jpg)
LibCal Instructions Mockup
![Page 22: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/22.jpg)
Still not done (HINT: you’re never done!)
![Page 23: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/23.jpg)
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
![Page 24: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/24.jpg)
Provide a Clear Feedback Mechanism
![Page 25: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/25.jpg)
Provide Clear Calls to Action
![Page 26: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/26.jpg)
Simple Action Verbs
![Page 27: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/27.jpg)
Create Your Own Menus
![Page 28: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/28.jpg)
Wayfinding/ Paths to Success
Make help easily accessible
Always provide multiple paths to success
![Page 29: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/29.jpg)
Continual Assessment
![Page 30: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/30.jpg)
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>
![Page 31: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/31.jpg)
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
![Page 32: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/32.jpg)
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
![Page 33: Building Seamless UX with Springhare Solutions](https://reader031.vdocuments.net/reader031/viewer/2022012917/56816858550346895dde85a2/html5/thumbnails/33.jpg)
Additional Resources (books and web)http://bit.ly/additional_resources
Mies Martin [email protected]
Randy [email protected]
Resources