AARP Staying Sharp App


Staying Sharp Native  Application

Overview


Project Name

Staying Sharp App

Client

 AARP

My Role

Prototyping, Symbol Creation and Library Management, UI Design, Visual Design, Logo Design

Final Product

High Fidelity Mock Ups, High Fidelity Prototype

Dates

March 2021 – November 2021
Staying Sharp is an online program offered by AARP -- a nonprofit interest group that focuses on the issues that affect those over the age of 50-- created to educate users on the holistic lifestyle approach to brain health.  This program accomplishes that by offering content such as challenges, games, healthy recipes, articles, and more. 

I had been brought onto the Staying Sharp team as the lead UX/UI designer to evaluate the current state of the mobile designs done by the previous 3rd party vendor, adjust the information architecture, design net new screens, generate a current state symbol and component library, and finalize all high fidelity designs in preparation for the launch of the application near the end of 2021.

I had also been tasked with the design of the logo and the promotional material seen in the Apple Store and the Google Play Store.

Software Used:
Sketch, Invision, & Figma

The Logo

Based on a previous design used on the Staying Sharp website, I had turned the brain into a geometric puzzle slotted together. I had also applied a gradient using the illustration color palette provided by the AARP UXDIA team.

Onboarding

Upon first downloading and starting the app, the user will go through a quick onboarding process that will introduce them to the Staying Sharp App, what they are to expect out of the program, what they have access to from the beginning, and the potential extras that can be unlocked through an AARP membership.

New Paragraph

Home Page

Once the user either logs in or registers for Staying Sharp, they will be brought to the landing page.


The user will be labeled as whatever type of Staying Sharp member they are (AARP Member, Rewards Member, Renew Active, etc.) as well as a small blurb welcoming them to the Staying Sharp app.


They will be presented with some started activities that they can swipe through in the center of the page.


At the bottom of the page is the app navigation which gives the the following options:


My Plan: This is where activities go when the user adds to their plan. Activities can be added during the "apply" phase of a challenge activity


Explore Challenges: Where users will go to see and look through all available challenges in one place


Menu: Where all account management, profile, and setting information is presented. Users can also go to "explore challenges" from here as well. They will also be able to provide feedback on the app as well.

My Plan

When a user goes through a challenge, at the end of each step, the user can add activities, games, articles, recipes, and more to their personal plan that they can circle back to later. These are items that usually relate to challenges that the user had already participated in and is meant to help them apply what they learned further.

New Paragraph

The My Plan page with the Staying Sharp health assessment

The My Plan page with no activities added

The sheets menu for a single activity item and actions that can be taken

Webview of selected activity

The Menu

The menu is broken down into the following sections:


Challenges: This follows the same functionality as the "Explore Challenges" button at the bottom of the screen for navigation. This is where users will go to see and look through all available challenges in one place


Profile: This is where the user's membership details, personal information, and app legal documentation goes


Settings: The settings page here will take the user to the AARP Now settings page which is directly connected with the Staying Sharp application


FAQ:  This will take the user to the FAQ -- Frequently Asked Questions-- Staying Sharp website


Submit Feedback: By clicking on this, the user will be taken to the AARP Staying Sharp survey page where they can rate and provide feedback on the app


AARP Now App: This will automatically take the user to the AARP Now application and prompt them to sign in and link their account if they haven't already. If the user does not have the app, they will be brought to their respected app store to download it.


Logout: The user can log out from this screen, as well as from the profile page

Profile Page

The user navigates here when they click on the "profile" option within the menu. Here, it displays the name, email address, and phone number associated with the user's Staying Sharp account.


There is a place for legal documentation such as privacy policy, terms of service, and legal disclaimer information.


There is also the AARP Member Details, which will take the user to a webview of the user's AARP Membership Account page. This shows all the AARP account details that the user has/can refer to (membership number, membership start date and expiration date, AARP subscriptions and other orders, etc.)


The user can also delete their AARP account from here from here, as well as log out of their account as well.

New Paragraph

Profile page if the user needs to renew their AARP membership

Profile page if the user is connected to the Staying Sharp app via Renew Active via UnitedHealthcare

Profile page if the user is also an AARP Rewards Member

Challenge Landing Page

By clicking on the "Explore Challenges" page at the bottom of the page the landing page or by clicking on it in the menu, the user will be taken to the Challenges page.

Here, users will be able to see a full list of the available challenges within the app. Users will also be able to filter things based based on "in progress", "view all", or "completed".

At the top of the page, there will be a Featured Challenge where users can just jump right into a challenge if they so choose without looking through the challenge list right off the bat. They can even read the introduction of the challenge before starting it by selecting "read more" at the top of screen.

Challenge Introduction summary presented in a bottom drawer

Challenges landing page

Challenge Overview

Once the user selects a challenge to participate in, it will take them to the overview page of the challenge. There, the user will be informed of how many steps are in the challenge, their progress in the completion of the entire challenge course, and status of step prerequisites.

New Paragraph

Locked step of a challenge due to a prerequiste

Completion of a step

This challenge can be viewed the the user cannot participate because they need to be an AARP member first

Challenge Steps

When you start a challenge step, the user will go through a break down of the following sections: Learn, Practice, and Apply. Throughout each challenge step, depending on the content, there will be different content that will be presented to the user:


  • Pre-Quiz
  • Article
  • Videos
  • Games
  • Slideshows
  • Trivia
  • Other unique challenge (Sleep Calculator)



Challenge Step: Learn, Practice, and Apply

Practice, as implied, is when they will put what they learned into practice, usually with a game or an activity.

During the Learn section, the user will usually be met with articles, slideshows, or videos explaining the nature of the course's step.

Apply is where they are prompted to take what they have learned in the challenge step and apply in their day to day. They are also prompted to add related activities, recipes, and articles to their "My Plan" page.

Challenge Step: Pre-Quiz

Pre-Quiz start page

Pre-Quiz Question Type 1

Pre-Quiz Question Type 2

Pre-Quiz completion and scoring page

Challenge Step: Completion

General Step Completion screen

Completion screen after the final step in a course is complete (entire challenge completion)

Step Completion screen for AARP Rewards members

Challenge Step: Slideshow

Slide show, last slide

Slide show, middle slide states

Slide show, first slide

Slide show start screen

Challenge Step: Article

Article with section breakdowns

Long form article

Challenge Step: Video

Video start page

Video interface once started

Video end screen

Video transcript bottom pop up screen

Challenge Step: Trivia

Trivia start page

Trivia question type 1, correct answer selected

Trivia question type 1, incorrect answer selected

Trivia question type 1, unselected state

Trivia question type 2, unselected state

Trivia question type 2, unselected state

Trivia question type 2, revealed state

Trivia question type 2, revealed state

Challenge Step: Sleep Calculator

Sleep calculator filled state

Submitted results of sleep calculator

Sleep calculator empty state

Animation & Interaction Demo

A quick demo meant to show the intended animation and mobile interactions throughout the app