TIA 132 Digital Tools for Communication and Learning

First iteration of an “Onboarding” tutorial targeted to new senior users of Facebook

This course involved a group design project. We were assigned to work with a research team looking at “Digital Seniors” and their use of social media. Due to limited time for the project, the prototypes were not tested on actual seniors, however we did our best to incorporate design touches inspired by the literature. To prepare ourselves for the design project, we read selected literature in the domain and informally interviewed senior Facebook users in our social circles.

The scope of our design project was not defined for us when we started. To keep scope manageable, we considered Porter’s (2008) framework for designing social applications. The user is confronted with choices during the sign-up, first-time use, and ongoing engagement phases of using a new application. We chose to focus initially on the sign-up and first-time use scenarios.

We defined our design objectives as:

1. Address typical UI challenges faced by seniors e.g.
   1. Reduce the text and replace with icons if possible
   2. Avoid slang or informal wording
   3. Use very clear fonts and colour schemes, avoiding too many similar colours
   4. Do not use pop-up windows
2. Employ elements of Multi-layered Design when appropriate, specifically:
   1. Present only the most popular or interesting features and coach the user how to get started
   2. Make the revealed features easy to find later
   3. Coach the user on how to explore the platform when they want to learn how to do something new
3. Consider Porter’s (2008) framework and limit the designs to the sign-up and first-time use scenarios.

Our first round of storyboarding produced several ideas: a simplified account sign-up, a simplified home page, and a new user “onboarding” tutorial which would introduce a new user to the features seniors are most interested in. As a design team we reviewed this first artefact together with our instructor. As a team we decided to go with the onboarding idea but incorporate ideas from the other two, because realistically it would be unlikely that Facebook would ever open the API enough to redesign the account sign-up or the home page. The third idea looked like this:

First “operative image” of the onboarding concept

The second design iteration we established some clear assumptions, specifically that the user was using a mobile phone device, the tutorial would be presented upon first login, and it would end in the user being delivered to their home page. A set of tickboxes indicated progress through the tutorial, and a section on privacy educated the user on things to consider when posting content. Additionally, one group member wanted to experiment with adding a friendly coaching character to the tutorial as this seems to be an interesting technique employed even on Swedish government websites. This version looked like this:

Second iteration operative image

We reviewed this prototype together with the expert research team and one assistant. The research design team reacted negatively to the Smiley character and discussion of “fun” things one could do in Facebook. The lead researcher remarked that older men would likely find this type of approach too frivolous and likely would not want to continue with the tutorial. Based on their experiences so far working with seniors, the research experts’ impression was that seniors have fixed ideas about what the mobile phone is used for, and such a character was not serious enough. The expert team recommended creating a genderless, ageless character similar to the Microsoft Clippy character instead. Furthermore, they recommended making it obvious how to re-take the tutorial at some later stage, and to take them to the Homepage at the end of the tutorial with the icons activated for the concepts discussed.

In the third iteration, we added a new character based on the Facebook icon, Fifi. Fifi focuses less on “fun things you can do” and more on how to educate the user on “useful” things to do on the platform. The screen flow mostly stayed the same but the team added some colour. Here’s how it looked:

Third iteration operative image

We then previewed the screen flow to our classmates and requested their feedback.  They seemed sceptical that senior users were actually using Facebook on their phones, whereas our research showed seniors mainly use touchscreen devices for accessing Facebook.

We concluded it would be wonderful to actually show some senior users our ideas and get feedback from them! The team cited our biggest lessons learned as, first, ask the client questions until you understand the expectations, and second, just commit “something” to an operative image to get that creative tension started. Hopefully our designs are inspirational to the expert research team as they continue their grant work.

Thanks a lot to my classmates for a valuable collaboration. The final paper describing the project is available here.

Reference:

Porter, J., 2008. Designing for the Social Web. Berkeley: New Riders.