Keep a Breast x Mobile App Redesign

A redesign of an existing mobile application that educates users on breast health through tutorials and art.
labeled with "School on Wheels'" logo on the top left. A macbook pro showcasing three different examples of the web application, coming out of the laptop's screen
General Info
Client
Keep a Breast
Time-frame
4 Months
Deliverable
Mobile App
SErvices
Mobile App design
users
anyone performing a self-exam
stakeholders
FOunder/Global COO & GloBal Ceo
About
The Problem
Keep A Breast's Founder / Global COO Shaney & Global CEO Lorene came to us requesting a redesign of their existing mobile application, additional features, and updates to the architecture to accommodate the changes. For this project, I worked alongside international stakeholders and developers as the sole designer.


Our pals at Keep A Breast were looking to iterate upon their initial app's MVP by adding a new language and account creation. In doing so, we needed to overhaul the information architecture to accommodate the updates. For context, the application's main purpose is to guide users through their own self-breast exam, using gifs.
view of initial MVP screens of app
The Solution
Actions Taken
The Requirements
The first three requirements were given by Shaney & Lorene, the stakeholders. As a result of the requested updates, I decided that the navigation revamp was a must-have. Additionally, during the discovery phase, we found users were requesting a way to save the answers to the self-check questions within the app. As we were already building an account creation feature, I was able to convince the stakeholders of the value that this feature would provide users.
• Adding a Language
The app was available in two languages: English & French. We were tasked with adding Spanish as a third language. With this, we had to be mindful that the designs would work across all three languages.

• Account Creation

In order to collect data on users and provide a more localized experience, we were asked to allow users to create an account. The data we were asked to collect was: first & last name, email address, and country. We would have also collected the language the user selected after launching the application.


• Revamp the Navigation

The initial version of the application had two versions of navigation: a hamburger menu located at the top right of the page and bottom navigation bar with a single icon. Several pages were accessible by both menus and others were only accessible by one menu. Additionally, there was not an overview of the Resources provided by the app. Instead, users had to use a carousel to navigate through the Resources. Since we were also adding in a user account feature, we needed to add this into the navigation as well.


• Past Self-Check Data

This item was not initially in the client's request or the scope of the project. The initial flow of the application has the user navigate through 5 steps of their self-check. At the end of the self-check, the app asks if the user found something abnormal. In the "Yes/Maybe" pathway, a list of several questions appears, telling users to grab a pen and paper and "write it out."
Language Selection and Account Creation
For the initial launch of the application, new users and existing users upon updating their app are prompted to select their preferred language from English, French, and newly-added Spanish. From there, the primary button on the splash page encourages user to create an account, however we do allow users to continue as a guest. Guest users are able to view all aspects of the app, however they are prompted to create an account at the end of the self-check.

The first version of the app had two screens prefacing the self-check. We took the content from these pages and used it for the onboarding screens to introduce new users to the application.
Navigation Revamp
I condensed the two navigations to a single navigation - a bottom navigation bar. This allows users to know where they are within the app at all times. In doing this, I was able to provide the user with an overview of the Resources provided by the application. With the addition of a Profile section, I also provided a spot for users to view notes from their past self-checks. You'll learn more about this in the next section.

The usage of the darker pink color was coupled with underlining of the text. This was an intentional choice, as I wanted to ensure that users with any form of color-blindness are able to be aware of where they are in the application at any given time.
Past Self-Check Data
In the case that users go through the self-exam and find something abnormal, there are several questions they are prompted to answer. Users are now able to enter their responses directly in the application. Once they save their answers, they are directed to the Resources tab. Users are then able to access their saved responses under the Profile tab's "Past Self Check" section.

As mentioned above, users were previously directed to write the questions & responses on a piece of paper to take with them to the doctor. At the request of a user in the app store reviews, this feature was included in the update. Since launching, over 1,500 users have utilized this feature.
The Conclusion
Outcomes
This was an ongoing project with a big future. We have an ever-growing list of future updates based on user feedback and client requests. Unfortunately, I departed AKOS for another opportunity before having the chance to work on this app again. This was my first major design project and I’m so glad it was with such a wonderful nonprofit.

However, as it stood when I left, the app update had made quite an impact upon its users within the first 6 months of launch. Between release of the account creation feature in October 2021 and May 2022, there are over 25,000 users of the Keep a Breast mobile application worldwide. See the stats collected below:
56%
increase in users
6,200
accounts created
60,000+
self-checks completed