WELL-unscreen.gif
 

QUARANTINE CARE

IXD | Animation | Product | UX | ILLUSTRATION

I started this app concept for quarantine resources when the world ended. After initial surveys to help define the user’s problem, I skipped a few steps in the UX process (limited resources) and focused on UI for this fantasy app. I have some blog posts written (link) about the process from concepting, to defining, to ideating, and ultimately, to these juicy UI designs .

 
Untitled-1.gif

APP DESIGN

I started my design journey with the menu (right), as I knew I wanted to include a lottt of IxD and also employ the design theory of a lower-right immediately-thumb-accessible launch button.

There are 5 main concept areas of the app: Social, Wellness, Productivity, Learning & Pandemic Resources. This project is very much so still in progress and I’ll update this page accordingly :). This app needed to be comforting and aesthetically sweet without being saccharine. I wrote about my color theory and psychology process I used to choose the app’s colors (link).

 

IxD + ANIMATION + ILLUSTRATION

I wanted this app to be as delightful as possible so I am working to include as much IxD and micro-animations as possible. Below are three section loading screens - I created the animations, the illustrations were made by a great free design resource.

 

LEARNING

My clearest concept was for the learning section. I focused on fleshing out the illustrations I had in my initial ideation sketches. I wanted it to be a horizontal scroll that looked like shelving, with books and other learning materials.

Below you can see the illustrations I made for this section (cute as F if I say so myself!).

 
iPhone+X-XS-11+Pro+–+29@2x.png
 
 
 
Learning.gif
TASKS.gif
 

TASKS

Below are static images of the designed pages for this section. I want the tasks to rotate like the menu design. In this section, I re-vamped the search bar and plan on implementing it on existing pages.

To the right you can see tasks being tapped to enlarge, edit and view progress. When slid to the right, you can mark the task as complete!

 
grow.gif

WELLNESS

My second clearest concept was for the WELLNESS section. I focused on fleshing out the illustrations I had planned in my initial ideation sketches. I started with these because I was so f***ing excited about the potential cuteness!!!

To the left is this section’s loading animation; below are illustrations I made for the “Wellness Garden” concept; to the right are the flower’s micro-interactions.