Built in 2023

AF is a concept for an AI assistant that you can add user-created mini apps to (kind of like “capabilities” for Alexa, but GUIs). I designed it and did the iOS programming.

Getting started

The mini apps (“modes”) are flows designed for specific use cases and built out of no-code building blocks (e.g. AI image, AI quiz, audio recorder). Anyone can create a mode in a few minutes and share it with the community.

Some mode examples:

This concept includes one demo mode, which allows you to enter a topic, generate some reading on it, then take a multiple choice quiz to test your understanding. It also includes a dummy interface that illustrates how a mode would be built by a user. Due to time constraints, it doesn't include a “mode app store”, but that would also be an important part of the experience.

Main Flows

Below are screen captures of the most important flows in the concept: creating a mode and using a mode.

Creating a Mode
Using a Mode

Personalized Assistants

The first thing you do in AF is create and name your own assistant, which is embodied in an avatar. I think this would give people a greater affinity for their assistant, and therefore a better UX.

I just used static Memoji for the concept, but the idea is that they'd be custom and animated. Having the avatar would open up “video chatting” with your assistant, which I think is a better interface for a lot of chatbot interactions.

(AF stands for “artificial friend”, which is a term from a book I really like, Klara and the Sun.)

Create your AF screen
Create assistant

Color Themes

The color theme of the app matches whichever color you choose for your AF.

The design nerd reasoning for this is that I wanted to communicate is that your AF isn't just the avatar, it's the entire interface.

The more practical reasoning is that if you choose a color for your AF, you probably like that color and would enjoy seeing it throughout the interface (I would like to test this assumption).

Pink theme

Answer Toolbar

In the main chat, each answer from your assistant has a toolbar at the bottom, with buttons for copying, retrying, or adjusting the answer. The adjustment button opens a panel for changing the length and tone of the answer.

Using answer toolbar

Screens

AF app start screen
Start
AF app create assistant screen
Create assistant
AF app name assistant screen
Name assistant
AF app boot up screen
Boot up
AF app chat question
Chat question
AF app chat answer
Chat answer
AF app chat answer toolbar
Chat answer toolbar
AF app mode menu
Mode menu
AF app active reading mode
Active Reading mode
AF app mode content
Mode content
AF app mode quiz
Mode quiz
AF app mode quiz results
Mode quiz results
AF app create mode blank slate
Create mode 1
AF app create mode node options
Create mode 2
AF app create mode nodes
Create mode 3