Tips for Making Your First Mobile App a Success

About a year ago we launched the Gimme Engine (gimme.scottsdalelibrary.org) – a mobile web book recommendation engine.  Choose one of the categories – Gimme a Clue, Gimme Something Good to Eat, etc – and the Engine will offer you a staff-recommended book from the Scottsdale Public Library collection, complete with summary, staff review, and a quick link to the mobile catalog to check availability or reserve.

Since launch, our app and the Gimme Engine Brain Trust that created it have won a number of awards – including a 2012 OITP Cutting Edge Technology in Library Services award.  What’s our secret?  We are happy to share what we learned in our process with the hope it will help you in your next technology process.

Find out what your users (and future users) want

When our team got together for the first time we had more ideas than we knew what to do with – everything from a mobile formatted version of our web site to a Dewey-caching in library scavenger hunt. We soon realized that in order for us to create a successful, and more importantly, sustainable mobile app, we needed to poll our customers and find out what exactly they want out of a mobile app. Though we had done some basic surveys of staff in the past, we didn’t feel that we were the experts best suited to properly create & distribute a survey that would ultimately drive our entire project.

We hired a local experience design agency called Forty to craft a survey to get the information we so desperately needed. Forty also helped distribute the survey via their social media, email lists and other outlets. This meant that in addition to our customer we would get responses from non-customers as well. This would help us understand if there was a difference in need between customers and future-customers (at least that is how we like to think of our ‘non customers’.)

What they want might be what you already have

There was in fact no real difference between customers and non customer need in the survey results but one thing was clear:  current and future customers had no idea that we already had a mobile catalog with most of the standard functionality that they wanted.  Great, we thought, just get the word out about the mobile catalog and our job is done!  Then we realized no, we still have all this LSTA money that the Arizona State Library was nice enough to give us . . . we should probably spend that out.

Maximize your resources

So we looked at the highest items on the list that we didn’t have in mobile – book reviews and staff recommendations.  That’s when we decided to make the book recommendation app.  As it turned out we already had a lot of the raw materials for the project.  Staff was already doing book reviews and posting them on GoodReads.  We had content enrichment services for bib data and book jackets(Syndetics).  And we had the mobile catalog and the ability to generate RSS feeds of items in the collection (AirPAC and FeedBuilder from Innovative Interfaces).  All we needed was someone with enough experience to put that together.

Back to Forty for the design work and to hire a programmer.  We had so little money to work with that I thought for sure the end result would use a rubber band.  But when we sat down with the programmer not only was he able to do the project he actually saved us $3,000 in expected software costs by putting together the feeds, mobile catalog, content enrichment with some JavaScript and the GoodReads API.  The end result is a very simple, easy to care for web-based app that keeps working as long as we keep feeding it the raw materials – staff book reviews.

Maximize your expertise

From the outset of this project, we engaged all levels of staff. This was critical to ensuring that whatever product we created would be supported throughout the organization, as well as vetted to ensure that we didn’t leave out any crucial elements.  One of those elements was the encoding that allowed FeedBuilder to pick up the items for Gimme.  A quick chat with the catalogers solved that problem – they created a series statement utilizing controlled vocabulary that would identify the item as belonging to a particular Gimme category and pasted the review into the MARC record. By adding Library staff review_[gimmeCategory] in the 830 field of each record and indexing it, not only were we able to create a constant flow of records for the Gimme feeds we were able to give all library staff easy access to these reviews when searching in the catalog.

The other process we had to create was a standardized way for people to submit reviews.  Here we called on the cataloging group, the folks who where posting to GoodReads, and our IT department to create a book review form on SharePoint.  The form itself was easy – staff at any level go to SharePoint (which functions as our intranet), type in their name, info about the book and their review and submit.   The catalogers and GoodReads group developed a process to “hand off” reviews that ensure that it gets encoded, posted in both the catalog and GoodReads,  and at all times is associated with the ISBN of the same edition so that everything seems to magically link together.  Having staff who don’t normally interact working together on the share outcome certainly fostered a sense of ownership and respect in the group.

Don’t just build it . . . make it fun

Once the Gimme engine design was complete, and we had the back end programming to make it work, we were ready to unleash Gimme out into the world. Our biggest concern was that Gimme would get lost amongst all of the other products and services the library offered. One evening while cooking a delicious shepherd’s pie, a light bulb went off over Ann’s head. Since we were using our library staff book recommendations to fuel Gimme, why not turn our Staff in marketing vehicles? The next day a call went out to staff asking whoever wished to help to come forward. The end result was 15 life-sized cardboard cut outs of library staffers, highlighting their personalities. Attached to each was a ‘speech bubble’ that directed customers to go to http://gimme.scottsdalelibrary.org to see what books that staff member recommended.

The next phase was to create floor decals to put in various spots in our five library branches, so as customers walked through the library they would gain exposure to Gimme. We created corresponding buttons for staff to wear, which helped spur conversions and questions from customers, “What is Gimme?” This marketing plan engaged all level of staff, which helped make the launch of Gimme a success.

One year later the Gimme Engine is continuing to grow with new categories and increasing stats.  Not only was the project a success but it by integrating the various workflows we’ve been able to make it, as well as doing fun reviews by staff, part of our culture.  We hope that our experience can help you in some way make your next project as successful as the Gimme Engine.

 

About Our Guest Authors:

Aimee Fifarek is the Library Technologies and Content Senior Manager for the Scottsdale Public Library in Arizona.  She has an MLIS and an MA in English from University of Wisconsin-Milwaukee and spent 6 years as the Systems Librarian at Louisiana State University in Baton Rouge before going to Scottsdale.  Her professional interests include ebook platforms & development, self-publishing, and mobile technologies.  She can be found on Twitter @aimeelee.

Ann Porter is the Community Relations Coordinator at the Scottsdale Public Library. She has over 11 years of marketing, PR and media relations experience, working for organizations such as a major cosmetics company, an online retargeting agency that was recently purchased by Ebay and for a major NFL team.

 

What is a Graphic Design Development Process?

Previously, I wrote about the value of design in libraries, and others, including Stephen Bell and Aaron Schmidt, have written and presented on the topic of design in libraries as well. Now I’d like to focus on and delve specifically into what graphic design process may entail. For librarians who design regularly, I hope this helps to articulate what you may be doing already or perhaps add a bit to your tools and tips. For those that don’t design, I hope that this might give you insight into a process that is more complex than it may seem and that you might give designing a try yourself. For some ideas, try any of these are great library design projects: signs, webpages, posters, flyers, bookmarks, banners, etc.

What Is It Like to Design?

People might wonder why design needs to be a process. The very basic process of design, like many processes, is to solve a problem and then create a solution. Jason Fried, founder of 37signals and co-author of Rework, tweeted recently, “Your first design may be the best, but you won’t know until you can’t find a better one.” He later added this image from The Intercom blog as an illustration to make this important point. Striving for an elegant or best solution is something librarians and designers have in common. Librarians often share best practices and examining this process may not only assist us in terms of design, but perhaps we can apply these concepts to other areas of librarianship as we create programs, outreach, marketing, and more.

Design is a process.
Designers work hard to develop a successful design and it doesn’t always come easy. Here are some of the basic steps designers take in the development phase of their work. Every designer is a bit different, and not all designers follow the exact same process. However, this is a pretty good foundation for beginner designers and once you get good, you can incorporate or modify pieces of the process to make it work for you and the project at hand. Design is subjective and there are few hard and fast rules to follow, however, in future posts I’ll be talking more about design elements and details to help you create stronger designs that will speak to your users.

Design has constraints.
Before you start laying things out and jumping into a design, you want to understand what the “specs”  or specifications are. These are the details of the final piece you need up front before you begin any design. For example, is the piece going to be printed or is it an online piece? What’s the budget? Is it black and white, color, how many colors? What size? If printed, what paper will it be printed on? Will color bleed to the edge or is there a border? Is there folding or cutting involved?

All of these considerations are going to be the rules you must work under. But most designers like to think of them as challenges; many times if the specs aren’t too restrictive they can actually empower the designer to drive harder to make it more creative. You really don’t want to start designing before you get this all worked out because once you’ve jumped in it can mean starting over if a critical spec is missed. If you have designed for a set of specs and then try to modify it to fit all new specs later, it almost always compromises the strength of the design to work this way. Better to know those specs up front.

Design requires an open mind.
Sketch like crazy. You may think you have the best, most original idea ever once you get your assignment or have your specs, but please do yourself a huge favor and sketch some ideas out first. Do at least a page of sketches if not much more. Take notes, do some research on the topic, do word associations and mind maps and draw stick figures and doodle. Keep an open mind to new possibilities. Observe the world around you, daydream, and collect inspiration. You might still stick with that first idea but chances are you come up with something even better and usually more original if you push yourself to think in new ways and explore.

Design step by step.
Depending on the complexity of the piece, whether it’s print or web, I might do more or less of each step below. If you’re designing or reworking a website, this is a good method to get a powerful, thoughtful design. And of course, you can go back and iterate based on feedback given, changes to the design that impact design elements. If the design structure is strong, changes should be fairly small.

Basic Design Development Process:

1. research the topic, take notes, ask questions, doodle, jot down ideas, simmer 

2. series of thumbnail sketches
This is an extension of step 1. Do as many as you can muster…do it until you are sick of it. Here is a great presentation I recently found on sketching.

3. build wireframe
Stay abstract/block in composition. This is going to be larger than a thumbnail but try to keep it free from detail.

4. sketch comps
Take steps 2 and 3 and flesh out 3 comps. These should not be final but should follow specs and be close to finished in terms of look and feel for the major design components. You may use lorum ipsum text if you wish. This technique helps to keep people from giving feedback about the content over the design. Of course there are times the content may absolutely need to be there but use your own discretion and know that this is an option and may help in moving forward.

5. finalize comps
Usually 3 choices are offered to a client, but if you are your own client obviously just do your favorite.
All of this is separate from any CSS, html, javascript, etc. Mock it up using Photoshop and/or Illustrator (or a similar program of your choice). The point is to focus on the design apart from laying down code. “Form Follows Function” really rings true. It isn’t an either/or statement. The product must work first and foremost and the design will support, enhance, and make it work better. If it doesn’t work, no amount of gorgeous design will change something that is badly broken.

TaDa, right?
The design is done, let’s celebrate!

Well, not exactly. This process is merely just one phase of a much larger process that includes steps including: initially meeting the client, negotiating a contract, presenting your designs, more testing and usability, iterative design adjustments, possibly working with developers or print houses, etc. Design is a process that requires study, skills, schooling, and knowledge like many fields. I’ll be talking about more design topics in the future, so what is not covered here I’ll try and cover next time. Luckily, I gathered some great…

Design resources to get you started:

This is not a comprehensive list by any means but highlights of a few resources to get you thinking about design.

  • Non-Designer’s Design Book: One of the best beginner design books out there (overlook the cover- it really is a great book!).
  • Smashing Magazine: Really good stuff on this website- including freebies, like decent icons and vector artwork. Covers typography, color, graphic design, etc.
  • a list apart: another great site that delves into all kinds of topics but has great stuff on graphic design, UI design, typography, illustrations. etc.
  • Fast Company Design: relevant design articles and examples from industry.
  • IDEO: design thinking, great high level design examples- check out their portfolio in selected works.
  • Thinking With Type: title says it all- learn about the fine art and science of typefaces. You will never look at design and type the same way again.
  • Stop Stealing Sheep and Find Out How Type Works: another must on typography
  • Drawing on the Right Side of the Brain: seriously. even if you think you can’t draw. try it. anyone can draw, truly. Drawing helps you think in new and creative ways- it will help you be more creative and help in problem solving anything. Even those small doodles are valuable.

Pick. your. favorite. see above. do it.

Enjoy and thanks again!

Hot Topic: Infographics

Do you know what an infographic is? Infographics are visual representation of facts, tutorials, or other data-centered information that inform while staying focused on great design.

Here’s an example of one about the history of the iPad:

iPad infographic
iPad infographic via http://killerinfographics.submitinfographics.com/

This infographic takes a whole mess of data and makes it visually interesting and easy to digest.

So, what do infographics have to do with libraries? Libraries have tons of data- both informational and instructional data ranging from topics like local history facts to how to do research. Take a look at this Google infographic recently posted on the HackCollege site: http://www.hackcollege.com/blog/2011/11/23/infographic-get-more-out-of-google.html

A snippet:

Google Infographic
Google infographic via http://www.hackcollege.com/

This image highlights several complex research skills while explaining the thought process behind it in one easy to understand sentence, while being attractive and compelling to look at. What’s better than that?

Great examples of infographics can be found across the web. Wired magazine, for one, often uses them and Holy Kaw!, Guy Kawasaki’s website (http://holykaw.alltop.com) also highlights great infographics from other sites. Another great site to see examples of different types of infographics is http://killerinfographics.submitinfographics.com/.

The importance of infographics and other great visualizations of data (see Warby Parker’s 2011 Annual Report for the best annual report ever: http://www.warbyparker.com/annual-report-2011) to libraries is obvious. People respond to great design, and great design makes information accessible and inviting. It is in our best interests to strive for great design in all that we do, to make libraries accessible and inviting.

Recently, Sophie Brookover, New Jersey librarian, posted in the ALA Think Tank Facebook page (http://www.facebook.com/groups/ALAthinkTANK/) about starting a group of librarians learning to create infographics, much like the Code Year project. This idea is very much in the early stages, but keep an eye on it or get involved- good things are sure to come.