BOOM! Library App Redesign
Our team’s prototype for the Union County Library System Mobile App is designed for the boomers.
Who are the Baby Boomers? They are the generation born between 1946 and 1964 often overlooked by the buzz surrounding millennials and their use of rapidly advancing technologies. In the “Design For Others” sprint, our team redesigned the mobile website for the Union County Public Library System (http://unioncountylibraries.org/) using the human-centered design (HCD) process to cater to the needs of and be appealing to the baby boomers (or more simply, the “boomers,” our target users).
Stages of our Design Process:
→ Needfinding & Design Objectives
→ User Research: Information Design
→ User Research: Visual Design
→ Prototyping
After understanding the root problem of the current mobile website design through needfinding, our team identified key design objectives to focus on. Next, we conducted user research, which informed our information and visual design decisions, and sketched potential designs. Finally, we prototyped our mobile app in Adobe XD in order to bring our HCD ideas to life.
Throughout the design process, our team evaluated different design ideas and iterated on our prototypes in order to arrive at the final mobile app prototype for this sprint. However, after gathering user feedback from members of the HCI class, we have many items to consider and improvements to make for version 2.0. The following sections elaborate on our team’s design process and future considerations and improvements.
Needfinding & Design Objectives
Needfinding
Since design is problem solving, our team first sought to understand pain points and causes of problems with the current mobile website in order to understand many of the real issues that the boomers and other user groups face while using it. These are some of the major issues that our team identified:
- Unclear and unorganized informational content
- Complicated design
- Confusing organization and navigation
- Website was not designed for the mobile device
Unique Challenges Faced by boomers While Using Smartphone Applications
Based on these needed improvements with the current mobile website, we looked into the unique challenges that boomers face while using smartphone apps since motor, visual, and cognitive abilities change with age. Therefore, we took these challenges into utmost consideration when identifying our team’s design objectives:
- Loss of Vision Clarity
- Hearing loss
- Loss of Motor Skills
Design Objectives
In response to our team’s need-finding analysis, we decided to focus on the following design objectives for the mobile app redesign:
- Experiential — An app that creates a pleasant experience for the user and enables one to make effective use of the library’s offerings in the palm of one’s hand
- Simple — Intuitive and easily navigable user interface
- Colorful — Eye-catching design and contrasting colors
- Readable — Easy to follow, scan, and understand
User research: Information Design
Next, our team conducted user research in order to determine what information to present and how to present it with an effective information hierarchy. In the Information Design stage, our team considered and answered the questions below and, as a result, made important key design decisions by means of sketching.
What content should we emphasize for boomers? Based on exploration of the content on the current Union County Library mobile website and on library offerings that boomers are interested in, our team decided to emphasize the following information for the mobile app:
- Opening Screen
- Home Screen
- Catalog
- Events
- My Account
In the upcoming images, we display many of the sketches that our team came up with for the design of these pages and essential elements that informed their information design.
How do we make app easily navigable? Our team highly considered navigation in the design of the home screen. Navigation and touch screen interactions needs to be extremely simple, easy, and comfortable. Therefore, we decided to stay away from more intricate navigation techniques such as swipes and gestures since motor skills tend to decline with age. Additionally, the original website had slide-out menus, which we decided to avoid because they may confuse inexperienced users.
Our team decided that upon entering and/or signing into the app, the first screen users see is the home screen, which serves as a central location to view all other major pages and the library’s offerings. Upon drafting ideas for potential home screens through sketching while keeping navigation considerations in mind, our team decided to include an unmoving home screen with a fixed navigation bar on the bottom that appears on all pages. The design is familiar because it looks similar to the home screen of an iPhone or Android and therefore does not require any extra time or skills to learn to navigate.
How do we make pages easily accessible? As seen in the sketches of the home screen, our team decided to make all pages easily accessible from the home screen, which serves as the central hub for all library offerings. Additionally, upon clicking on a page extending from the home screen, one can easily navigate back to the home page by pressing the arrow in the upper-left-hand corner of the screen, serving as a visual cue that indicates to the user how to backtrack through pages. One can press the Home button on the fixed bottom navigation bar in order to take a shortcut back to the home screen. By means of centrality of information and visual cues, our team aims to make all pages accessible and easily navigable from the home screen.
How should information be prioritized and organized visually (information hierarchy)? Our team also greatly considered how to organize sub-pages and information on pages visually so that users can easily scan and find the information they are looking for quickly and efficiently. Elements of information hierarchy that we considered include page scanning patterns, text size, and proper use of space.
We also aimed to keep the look of pages consistent. For example, like the home screen, the catalog screen also uses blocks in which other pages (books, e-books, etc.) stem off from. However, the page is also kept relevant and tailored to the individual user through the ‘What’s New’ display.
User Research: Visual Design
Just as the ways information is presented is dictated by user needs and preferences, stylistic design also differs between user groups. Our team’s goal was to create a visual design that appeals to boomers. Therefore, during the Visual Design stage, our team focused on the following important aspects through the creation of a mood board:
- Color schemes
- Font type/size/color
- Design patterns
About the Boomers: Inspiration for the Mood Board
Baby Boomers make up around 40% of the American population at around 75 million people. Boomers are considered to be an overlooked generation, with many making assumptions such as they are old-fashioned and not tech savvy.
Primary Insights:
- 64% of boomers between the ages of 54–60 are on social media. (Colorado University, 2016)
- 82% of boomers prefer Facebook as their main social media platform. (SmartInsights, 2017)
- Boomers prefer slower-paced videos packed with information over faster-paced ones with too many visuals, GIFs, and catchy slogans. (Quicksprout, 2017)
- Boomers want to get straight to the point and want to know the who, what, when, where and why as succinctly as possible.
- They don’t appreciate beating around the bush so conciseness is key.
- However, they do appreciate having lots of information available to them and taking in new content.
- Boomers are very health-conscious and value being active.
- They don’t want to be considered as elderly.
- They want to hang onto their independence for as long as possible.
Mood Board
We put together the mood board as a way to visualize all of the user research that we collected on the boomers. Initially, we thought of our target users as the elderly and did not realize how limiting this label could be. The first draft of our mood board was crafted around our assumptions of what elderly individuals like such as gardening, knitting, and golf. They were all very stereotypical, and therefore, we did not feel like we captured the essence of the demographic. Therefore, we began to look past the label of “elderly” and instead referred to them as boomers. We found it to be more accurate and more encompassing of our target audience since that is their generation, and we tailored the mood board towards that concept. The new mood board is centered around the most notable trends of their generation such as bright colors from pop art and popular and influential musical artists such as the Beatles. However, we still made sure to highlight important values such as family, health, and being active.
While generating our team’s Adobe XD prototype, we made the following visual design decisions using our mood board:
- Microsoft Tai Fe Font for all text
- Colors such as Facebook blue and Campbell Soup red
- Contrasting color choices
Prototyping
Following the design stages of user research involving both informational and visual design, our team entered the prototyping stage, using both paper prototypes and Adobe XD to model our team’s design. Specifically, Adobe XD allowed our team to build a prototype of the mobile website that provides a life-like experience of using the app in real-time without all of the actual functionality. Throughout the prototyping process, we kept our design objectives (Experiential, Simple, Colorful, and Readable) in mind and our design decisions based on user research conducted in the information design and the visual design stages.
Below are screenshots of our team’s final prototype for the “Design For Others” sprint after building prior iterations and enhancing them based on feedback and critique. See the end result here.
Conclusion
After receiving in-class feedback in an evaluation process on our final prototype above, our team identified many strengths and areas of improvement for future versions. Peer-driven feedback was conducted in a “I Like, I Wish, What If” format, and from the feedback, our team identified areas that went well and what can be improved for future prototype versions and iterations. Here is some of the feedback that our team received that encompasses each design objective.
What Went Well
In terms of Simplicity:
- Simple buttons on home screen
- Easy navigation
- “Would be very easy for elderly people to use.”
- Clean appearance for target audience
In terms of the Experience:
- “Appealed to elderly adults by having a Volunteer tab on the Home page”
- Sorting mechanisms for events
In terms of Color and Readability:
- Color combinations and saturation
- Big font
What Needs Improvement
In terms of Simplicity:
- “A directions page or a map that is less than 3 layers away”
In terms of the Experience:
- Needs to be a little more intuitive (“Some things actually seem difficult for how simple it is”)
- “More details and more catering to older people”
- More content
In terms of Color and Readability:
- Larger text for informational content
- Less events displayed at once
Plan for Future Iterations
Based on the feedback that our team received, if we were to create another version of our prototype for this design sprint, one of the aspects we would put more focus on would be the size and amount of text displayed relative to screen size, keeping vision capabilities of boomers more in mind. Additionally, another area we would focus on is further building out our design with more pages and functionalities (in addition to many more, of course). Through creating a mobile app prototype for the Union County Library System designed for the boomers, our team learned a ton having gone through the HCD design process, which served as an invaluable learning experience as we explore human and computer interaction.
Team Members: Tiffany Cai, Katherine Lordi, Elliot Miller, and Nigesh Prajapati
Adobe XD Prototype Link: https://xd.adobe.com/view/15a6ed10-6017-4796-79b4-3322a633a5d6-6397/
#HCI
