Chores and Allowance | Ksenia Kostyleva

Chores & Allowance

Merge project

UI implementing, UX enhancement

Task

Update the look and feel of the Chores & Allowance Bot app by integrating the Airbnb mobile app UI into its UX framework.

Steps

Explore the parent app's UX and build wireframes copies.
Define the UI requirements of the reference app.
Implement the UI of the reference app into the UX of the parent app.

To manage the task I divided it into steps.

Task

Update the look and feel of the Chores & Allowance Bot app by integrating the Airbnb mobile app UI into its UX framework.

Steps

Explore the parent app's UX and build wireframes copies.
Define the UI requirements of the reference app.
Implement the UI of the reference app into the UX of the parent app.

To manage the task I divided it into steps.

01

Parent app UX

I selected 5 screens that illustrate the core UX patterns and user flows of the Chores & Allowance Bot app. Then, I created mid-fidelity wireframe copies of these screens to gain a better understanding of the UX.

At this point, it became obvious that the current UX has problems. Mistakes in grids, alignment, spacing, and padding, as well as the misuse of some patterns. To find a better Airbnb-inspired solution for this, I moved on to step two.

02

Reference app UI

I marked several key Airbnb style features that contribute to its minimalistic and clean look

Cohesive color palette of brand colors (white, soft greys, coral pink)
Generous use of whitespace
Custom typography
Well-organized layouts for elegance and user-friendliness
Intuitive iconography

01

Parent app UX

I selected 5 screens that illustrate the core UX patterns and user flows of the Chores & Allowance Bot app. Then, I created mid-fidelity wireframe copies of these screens to gain a better understanding of the UX.

At this point, it became obvious that the current UX has problems. Mistakes in grids, alignment, spacing, and padding, as well as the misuse of some patterns. To find a better Airbnb-inspired solution for this, I moved on to step two.

02

Reference app UI

I marked several key Airbnb style features that contribute to its minimalistic and clean look.

Cohesive color palette of brand colors (white, soft greys, coral pink)
Generous use of whitespace
Custom typography
Well-organized layouts for elegance and user-friendliness
Intuitive iconography

03

Implementing

For each parent app screen, I selected few reference app screens with similar patterns. Of course, it was not always possible to find a perfect match. In such cases, my strategy was to follow Airbnb's overall style.

UX

UI

Airbnb-inspired UI Kit

Illustrations

03

Implementing

For each parent app screen, I selected few reference app screens with similar patterns. Of course, it was not always possible to find a perfect match. In such cases, my strategy was to follow Airbnb's overall style.