Brain Bud

An app for a guided self-care experience.

Brain Bud is a documentary website featuring the step-by-step creation of a self-care app including content development and design prototyping. The features of the app are a product of refined user interactivity combined with inspiration from the top self-care platforms avialable to the public at the time of the app's conception. Produced by Mason Kester, KU Student of Communication Design.

Part 1 - New Ideas

The first step of development was to perform a writeup for a few potential concepts describing 3 different apps, including a list of features each app will provide. For each of the concepts, competitive research was completed for at least 3 competitors to analyze the pros and cons within existing platforms.

PDF - Concepts and Competitors

Part 2 - Functions, Personas, & Scenarios

The second step was to refine a single concept and create 5 personas of fictional users for the app. The goal of each persona is to provide context for a typical user's experience and figure out how and why they would use the platform, as well as what platform if applicable. Personas also included 10 case-by-case scenarios (2 each) that a user may encounter when interacting with the app as well as those that the app is directly used for resolve.

The concept and personas were combined with a group critique to refine app through feedback. This process narrowed down features, goals, and other unique properties that users would encounter. A list of final features was created to highlight which areas of the app were considered critical for the app's functionality.

PDF - Concept Refinement

PDF - User Profiles and Interactions

Part 3 - Rough Aesthetics

Based on the list of features created in the previous step, the project moved past the research phase and into an area of physical conception. With the app properties defined, the next step was to make a site-map that included the main and sub navigation options for the app. The names of menu items and other navigation elements were finalized in an overview that showed the connections between the main categories of the app.

Other processes for this step included creating a moodboard of competitor designs, a UI inspiration moodboard, a brainstorm list of ten potential names for the app, and a collection of rough paper prototypes for the app's major screens. All parts of this step were presented to peers for review and feedback.

JPG - Site Map

PDF - Competitor Moodboard

PDF - UI Inspiration Moodboard

PDF - App Names List

PDF - Paper Prototype

Part 4 - Building a Foundation

The previously completed site-map was used to create an in-depth comprehensive process flowchart to show the pathways between every page within the app, as well as the actions that could be completed through the app's primary features. An app name was also selected before moving forward with sketches for the app's icon options. Progress was also made with the paper prototypes, which were revised to reflect all the pages within the flowchart before facing a second round of critique.

JPG - Process Flowchart

JPG - App Name & Icon Sketches

PDF - Revised Prototype

Part 5 - Designing Functionality

The revised paper prototype was then used as a starting point for developing digital wireframes through the website UXpin. The pages within the new digital framework focused only on the organization of information and testing user interactivity. For the rounds of testing, the ten persona scenarios from the research phase of the project were transformed into a usability testing script, which gave test subjects specific tasks to accomplish without leading them to the solution.

LINK - Digital Wireframes

PDF - Usability Testing Script

PDF - Round 01 Testing Results

Part 6 - Designing the Experience

The next step in development was to transform the digital wireframes, built for functionality, into a well-designed platform focused on appearence and aesthetics. This included creating a mockup of every app page and the final app icon in Adobe Illustrator, both of which were then exported to develope an interactive mockup on Invision.

More usability testing was performed with a round among peers familiar with the development-design process and another among an outside group, the results of which were documented for review and final design revision.

PDF - Adobe Illustrator Page Design

PDF - Round 02 Testing Results

PDF - Round 03 Testing Results

Part 7 - Final Touches

After the final rounds of usability testing, the final app design and interactions within the app were refined to their final version and the digital mockup on Invision was completed. This was the final step in developing the concept for the app, and the final product of this project is shown below following a link to try the mockup for yourself.

LINK to Invision Mockup