A fully responsive website and social platform that enables boomers to find and engage in opportunities that fulfill their interests.
Lively
 

Lively Pittsburgh

Role: Project Manger, Tech Lead, Visual Design Lead

Fall 2014 - Carnegie Mellon University

Project Summary

Background

Baby Boomers want an engaging and active lifestyle, but existing agencies are unable to meet their needs. This is due to the fact that agencies have not adapted to the changing face of aging. In this project, my team collaborated with Moringa Living, a Pittsburgh organization focused on promoting active and healthy aging for Boomers. As team Spring, our goal was to reimagine and redesign Moringa Living’s website, Revel, so that we could better address Boomers’ needs.

Project

We began by gaining an understanding of Boomers through a diverse array of primary and secondary research methods. Equipped with insight on the attitudes, needs, and desires of our users, we set out to rebrand and redesign Revel’s online platform. After a collaborative rebranding process and going through several cycles of iterative design and testing, we introduced to Moringa Living the website we created: Lively Pittsburgh. Our website allows Boomers in Pittsburgh to participate in local activities and groups with the goal of fostering healthy and active aging through an engaging community.

The final prototype that we delivered.

Hunt Statement

To research, redesign, and build a new Revel platform that enables boomers to find and engage in opportunities that fulfill their interests.

Literature Review

Online Experiences Change with Age

In order to understand how to re-design and build a new version of Revel, we wanted to gain a deeper understanding of the best practices in making senior-friendly websites. Research shows that the number of seniors using the internet is increasing at a faster rate than other age groups. As such, it is increasingly important to design with seniors in mind when developing websites.

The following sections provide a brief overview of the findings from our literature review on the challenges that aging populations face in web surfing and outline how the insights influenced our design process. Specifically, the fundamental challenges elderly populations face when using electronic technology are age-related changes in vision, motor control, and cognition, the latter of which concerns the ability to learn, think, and reason about information.

Vision

Vision Declines with Age

Researchers have identified several aspects of age-related decline in vision, and these have important implications for how websites can be designed to be more senior-friendly. In particular, the literature has demonstrated that older adults often experience a reduced ability to focus on computer screens, reduced color perception and sensitivity, and declining contrast sensitivity.

Using Legible Fonts and Contrasting Colors

We were cognizant of the font size used on the website. Traditional “senior friendly” web design guidelines suggest font sizes of 12 to 14 points. Font size is so important that several guidelines suggest providing a way for users to adjust the text size to their own preference. Color palettes were established with contrast in mind, such that colors with greater contrast were chosen.

Takeaway: We paid particular attention to text legibility through the use of fonts and colors

Motor Control

Movements Become More Difficult

Declining motor skills represent another difficulty that older adults face in using websites. Specifically, arthritis and neurodegenerative disorders such as Parkinson’s disease represent significant challenges in successfully operating computer mice, trackpads, and keyboards to interface with the computer.

Make Actions Easy

Clickable elements such as call to action buttons were designed to be large and easy to click. Including additional white space around clickable elements is was also encouraged because it reduces the likelihood of erroneous clicks. Single-mouse clicks were used exclusively because double-mouse clicks can be difficult for some elderly users. Finally, scrolling was minimized as scroll bars can be difficult and tedious for those with impaired motor control.

Takeaway: We aimed to create an intuitive and efficient interface where visitors can find the information they want with the fewest mouse clicks necessary.

Cognition

It's Harder To Process Information

Cognitive abilities in areas such as working memory (the amount of information that can be retained at one time), perceptual speed, text comprehension, attentional functioning, and spatial memory have been shown to decline with age. These age-related changes can have dramatic effects on how an older adult might experience a website.

Improve Information Organization

Users need to be able to understand what the website is for and how information is organized quickly and easily. Standard, simple, and consistent web layouts should be used in order to increase a sense of transparency about the website such that users can more easily predict the outcomes of their behaviors on the website. Providing content in short and digestible chunks will also help reduce the cognitive load associated with encoding and recalling information.

Takeaway: To increase users’ understanding of our website, we used a careful balance of visual and verbal elements.

Competitive Analysis

As part of our research, we conducted a competitive analysis by examining existing sites that try to accomplish similar goals as Revel. We analyzed what the sites were doing well in order to learn from them, as well as what was being done poorly so we’d know what we should avoid. We identified the four websites that were the most similar to Revel in their mission and scope, which included both event/group listing websites and websites designed specifically for boomers. Specifically, the websites we analyzed were Meetup.com, Eventbrite.com, AARP.org, and Boomerator.com.

Evaluating The Competition

We examined each website along the four key dimensions we thought were most pertinent towards fulfilling our goal of redesigning the Revel website. To make more systematic observations, we also created specific criteria to judge each dimension by. Each dimension was scored on a scale from 1 (very poor) to 5 (excellent) such that each website received a score for its homepage, navigation, readability, and searchability.

Homepage

How informative is the home page? Does it set the proper context for visitors using the site? How effective is it at establishing an interpretive framework for understanding the purpose and functions of the website?

Navigation

Is the global navigation consistent from page to page? Is the site organization intuitive and easy to understand? Are labels on section headers and content groupings easy to understand? Are links easy to distinguish from each other?

Readability

Is the font easy to read? Are line lengths acceptable? Is the site easy to scan, with chunked information, or is it just solid blocks of text?

Searchability

Is the search engine easy to use? Are search results organized and easy to understand? Do the search results remind you what you searched for?

Stakeholder Interviews

Understanding our Users

To understand our audience and their needs, we interviewed seven baby boomers, ranging in ages from 55 to 75, conducted at their homes and at agencies they frequent. The interviews were semi-structured in that we had some prepared questions but we also left room for organic conversation. At these interviews, we wanted to delve deeper into what it is like to be a Boomer and learn more about how Revel may fit into their lives. The main questions we wanted to address during our interviews were:

What resources do Boomers currently use to discover local events and activities?

Which factors come into play when deciding which activities to attend?

What are Boomers’ attitudes towards senior centers?

What improvements would they like to see made at these agencies?

How do Boomers generally use technology? What obstacles do they face while interacting with technology?

Understanding the Agencies

We also interviewed one agency, represented by the executive director and the senior center director, at the center itself. We received an extensive tour of the facility, as well as insight into how they would like to see their relationship with Revel grow, challenges they face as an agency, and feedback they receive from their members regarding their programs and activities. These observations allowed us to understand how Revel can help emphasize the importance of agencies through our website.

Research Insights

Finding #1:
Boomers are in the “Play Stage” of their Life

Many Boomers pro-actively find ways to stay active, both socially and physically. After experiencing their parents’ passings, they often feel compelled to live life to their fullest, to avoid dull activities and participate in activities they feel passionate about. 5 out of 7 boomers we interviewed mentioned “giving back to the community” as a big part of their lives, and loved helping others - rather than receiving help themselves.

"No two days are the same!” Carolyn, Pittsburgh Boomer

Finding #2:
It Is Important to Consolidate Search Results For Boomers

In order to find activities they would like to participate in, Boomers currently use search engines. This, however, gets rather tedious when numerous search results appear and they must click on each result to read descriptions of activities. One consolidated resource of all the activities happening in Pittsburgh was something many of our interviewees expressed interest in, to avoid clicking through different websites.

"There isn’t one place I go to find things to do in the city...I usually just Google it.” Naomi, Pittsburgh Boomer

Finding #3:
Boomers protect their personal information

4 out of 7 Boomers we interviewed disliked sharing personal information online and refused to make any purchases through websites. Older Boomers were often set in their ways, where technology use is minimal in their lives, and therefore may be difficult to integrate Revel into their daily routines.

"I don’t need anyone online knowing about who I am or what I like to do.” Rebecca, Pittsburgh Boomer

Finding #4:
Agencies crave collaboration

The agency we interviewed mentioned wanting more collaboration between the agencies in the area, in order to pool resources together to deliver a more diverse and engaging range of offerings for a greater audience. Because agencies are limited in budget, sharing resources is of great value to them.

"Some things like, jointly promoting what we do, I think collaboration makes a huge amount of sense.” Tom, Director at Vintage Senior Center

Initial Concepts

We started our design process with low fidelity (lo-fi ) pen and paper prototypes of our homepage. Specifically, we adopted a parallel prototyping approach where each team member was responsible for creating several different prototypes for how the homepage might look. This process afforded us with several benefits. First, we were able to produce the prototypes with minimal time and financial investment, since pen and paper prototypes are very quick to make. Second, each team member was able to contribute their thoughts and Starting From Scratch Initial Concepts opinions on how the website should look. Third, were able to explore a large number of different ideas and incorporate the best aspects of each prototype into our final lo-fi homepage prototype.

Initial User Testing

We sought feedback from five boomers who were members of Vintage Senior Community Center, a local agency in Pittsburgh that promotes healthy aging. Our participants were ages between 60 and 75.

To simulate how well our prototypes would fare in real-life, we devised two think aloud tasks for our participants to complete. One was to find and join an event, and the other was to find and join a group. After the tasks, we interviewed them about their overall impressions of the site, the flow, information architecture, and their general understanding of how the website works. We also asked them broad questions about their participation in local events to gain better insight regarding their motivations, needs, and preferences around the subject.

Our user testing session revealed a number of key insights. Beyond gaining a deeper understanding of the needs and desires of boomers through conversations with our participants, we were able to distill the feedback we received from the testing session to inform future iterations of the homepage. We decomposed the feedback into two categories: the good and the bad, which informed our next rounds of prototypes.

Card Sorting the SiteMap

Having decided upon the features we wanted to include, we developed a site map to organize the structure and flow of information throughout the website. Our goal was to lay out the various features in a way that would be the most intuitive and easy for our users to understand.

We tested the information architecture of our site map using a method known as card sorting. During a card sorting task, participants are asked to organize topics into categories in the way they fi nd most appropriate. We chose to use an open card sort method where users are asked to group topics into categories they create themselves and then asked to name each category they created. The purpose of the task is to gain an understanding of how users group information in their minds so that designers can better construct the information architecture of the site.

Methods for Testing

We tested the information architecture of the site on 6 boomers at the local library and outside a nearby museum. Participants were ages from 50-70.

First, we explained to them what a card sorting task entailed, then demonstrated how it works with an example card sort task. Next, we asked them to perform the card sort task by grouping all the components of our site map into the categories that made the most sense to them. After the card sorting task, we asked debriefing questions about how they went about sorting the groups and also any difficulties they might have had sorting the cards. Due to the nature of guerilla testing, we administered the card sort task on the computer using a service name provided by Concept Codify.

The feedback we received from our user testing helped us gain a better understanding of boomers’ mental models regarding how the components of our website should be organized. One key insight we learned was that the names for the various sections of our websites need to be distinguished better from one another.

Wireframes

Because we had only focused on the homepage until this point, we also created wireframes of the inner pages to create a clickable medium-fidelity prototype. Due to time constraints, these pages were also created in parallel with the high fidelity mockups of the inner pages. We used Invision to create this clickable mockup.

Testing the wireframes

We conducted user testing of our clickable prototype with 5 boomers, ages 50-65. We tested 4 of our participants in our workspace and the remaining user testing session was conducted at a local cafe.

Because these users had never seen wireframes before, we first presented each user with a black and white high fidelity version of the website. We asked the participants of their initial impressions of the site, followed by most appealing feature(s) that they would like to explore further and their thoughts of what this site’s purpose may be.

Once they had seen what the page would look like (e.g. with images instead of grey boxes), participants had an easier time understanding how to click through our wireframes. We then asked users to complete several tasks using the prototype to learn about how understandable and usable our website flow was.

Because our participants had agreed in advance to be tested (as opposed to many of our prior user testing sessions where we used guerilla testing methods), we were able to observe how they used the site for an extended amount of time. This final round of user testing yielded a number of key insights that would ultimately drive the design of our final product.

Brand Development

We began the rebranding process by analyzing the logos of organizations that also target our demographic. By taking a closer look at the current industry trends and successful logos in the space, we were able to identify the most popular, prevalent, and effective graphical styles. With this knowledge, we were better equipped to create a unique mark which stands out.

We created a list of 10-15 possible names for the new site, and performed a number of online and in-person surveys of individuals in our target demographic to gauge their response [7]. We narrowed the list down to four names proposed as potential options for re-branding: LiveActive, StayActive, Gather, and Lively. Using these names, we created over a dozen unique logo options to try and establish direction.

A New Name!

Through discussion with our client, his partners, and an outside branding agency, the name Lively Pittsburgh was chosen as the name of our new venture. With a name established, we narrowed our focus and supplied another round of logos utilizing that name.

Development of the Logo

Our direction was to include the Pittsburgh name in the logo, and to also include a mix of conceptual options with shapes. With each round of concepts, feedback was supplied indicating which options were best received by both our client and his partners. Through an iterative process, we were eventually able to narrow it down to an approved black and white logo. With that logo, we off ered various color options to create the fi nal logo.

The Final Logo

The final logo includes a number of key features, focusing on both our demographic and initial launch market: Baby Boomers in the city of Pittsburgh. First, we chose a thicker font to increase legibility with older eyes. The word Pittsburgh was included to increase the sense of community, which can easily be replaced with other city names if the platform were to expand into additional markets. The icon represents the shape of a map marker, which is an element seen when trying to find the location of an activity on a map. The 3 circles within the icon are representative of the 3 rivers that are a key geographic feature of our launch city, Pittsburgh. The icon also represents a thought bubble, with the three circular elements displaying various thoughts coming together, the process which is followed when creating a new activity. For the color scheme, shades of black and yellow were chosen, representative of the city of Pittsburgh, since each of the city’s sports teams share the same color scheme.

Final Prototype

Key Features
Find Activities

The main feature of Lively Pittsburgh is to enable boomers to find activities fitting their interests. Upcoming activities are sorted by location on an interactive map, or by date of the activity. Past activities are an archive of activities that have occurred. From this page, users can look at activities they have attended to see photos or any relevant files from the event.

Join Groups

Groups consist of users with similar interests. These groups participate in activities together related to their interest, and may or may not meet regularly.

Suggest Ideas

If users do not see activities or groups that fit their interests, they are welcome to suggest an activity, group, or general ideas they may have. General ideas are ideas users might like to have implemented in the community, but are not activities or groups.

Screenshots

Personas

Jim Yinz

Jim is a 63 year-old Baby Boomer who is born and raised in Pittsburgh. He has recently retired and is looking for new people to spend his newly-found free time with. As he is entering a new stage in life, he is adamant about aging healthily by remaining active. He read about the Lively Pittsburgh website in the paper, and is interested in what the website offers. The following next scenario outlines how Jim uses Lively Pittsburgh to join a group.


Website Walkthrough

  1. Jim finds Lively Pittsburgh and immediately appreciates the visual quality of the website. He finds it very clean, professional, and appealing. After browsing through the website quickly, he finds the “Find Groups” option on the navigation bar to fi nd local groups in Pittsburgh centered around his interests.
  2. On the Find Groups Page, Jim sees a wide variety of different groups that he can participate in. He likes that he can sort the groups by his interests or by neighborhood in which they typically meet. He clicks Vintage Basketball because he likes to stay active.
  3. Once he lands on the Vintage Basketball group page, he is able to quickly learn the details of the group such as the competitive level at which they play. Jim also knows a few friends who might be interested so he clicks “Share with Friends” as well.




Beth Collins

Beth, a 58 year-old Baby Boomer, is looking for a fun activity to participate in this weekend. She’s new to Pittsburgh and wants to make friends while staying active. She has recently learned about Lively Pittsburgh through a friend. In the following two pages, we will walkthrough how Beth would use the site to find an activity that interests her.



Website Walkthrough

  1. Upon opening LivelyPittsburgh.com, Beth notices a vibrant homepage off ering many opportunities to engage in the community. Since she’s looking for an activity, she clicks the “Find Activities” option in the navigation bar.
  2. On the Find Activities Page, she fi nds that there’s a bike tour happening this weekend. As someone new to Pittsburgh, she’s very interested in what the bike tour might entail. She clicks it to learn more.
  3. On the activity details page, Beth is able to quickly and easily glean the date, time, and important details of the bike tour. She confirms her interest by clicking the RSVP button and she marks it down in her calendar.

My Team

I was fortunate to work with a number of very talented individuals on this project.

Nanako Era

Nanako acted as the Research Co-Lead. Prior to attending Carnegie Mellon University, she worked at a R&D company and graduated with a degree in Informatics from the University of Washington in Seattle.

nanakoera.com

Owen Tong

Owen acted as the other Research Co-Lead. Prior to attending Carnegie Mellon University, He worked at a market research firm and he has a degree in Psychology Research from the University of Toronto.

Find Owen on LinkedIn

Mohammed Abid

Mohammed Abid acted as the Interaction Design Lead for Spring. He has worked in various roles at tech companies, and graduated with a degree in Economics from Stanford University.

Mohammed Abid