top of page
Asset 1-100.jpg

Kabinet App Redesign & Feature Expansion

UX Design

Client:

Kabinet, LLC

ROLE:

Project Manager, UX Designer

DURATION:

3 Weeks

A fast design update across a document-organization app for homeowners, while also adding features that mirrored the existing set, but for other aspects of a user's life such as car maintenance, pet care, finances and family). The intent of this exercise was to address user feedback indicating issues with navigation and a disconnected aesthetic between the app experience and its marketing presence. Additional outcomes included new partnership and investment attraction.

Goals

  • Modernize UX/UI of full app to better integrate the product to its marketing aesthetic

  • Improve customer navigation, especially for mobile, by adding a bottom nav bar and a route to navigate backwards on any non-primary screen

  • Enhance visibility of corporate sponsor branding

  • Conceptualize expanded features for new documentation categories


Style Inspiration

For inspiration, the client named Notion, YouTube and Slack as sources of inspiration for specific component treatment.


YouTube's Mobile Lower Menu



Notion's Minimalist Aesthetic



Slack's Layered Navigation & Use of Available Space



In addition to the above, I looked at two competitors named by the client: HomeBinder and Homezada. This gave us a baseline understanding of what we were up against from an aesthetic standpoint, and also gave us a sense of "do's and don'ts" within the tighter circle of similar functioning apps.


HomeBinder



Pros

  • Clean top navigation

  • Orderly page layout


Cons

  • Action items are not as straightforward as they could be

  • UI could mimic a to do list better

  • Some uneven spacing between blocks

  • Colors of the page could be better coordinated-- many competing colors and inconsistent visual style between illustration and the branding displayed in the top-most nav bar


HomeZada


Pros

  • Navigational layout is clean and visually demonstrates a hierarchial relationship between the content

  • Presentation is strongly visual-- large pictures are appealing and useful to the user's understanding of what they're manipulating

  • Effective iconography that doesn't clutter thumbnails


Cons

  • Back button in the nav bar is not in an intuitive location

  • Limited options to change presentation of content (no list view vs grid view)

  • Room names appear disconnected from their related imagery


Style Directions

To hone the style direction I came up with (3) skin styles layout arrangements that fulfilled the goals of the project. These skins were applied to the main dashboard and property detail screens for both desktop and mobile views. After a review with the client, we ultimately chose a direction that utilized parts of each option for the final style.


Style 1 - White Space


Property Detail Screen
PropertyDashboard
Mobile Views

Style 2 - Kabinet Blue Menu + Circular Buttons


Property Dashboard
Property Detail

Mobile Views

Style 3 - White Space Variation


Property Dashboard
Property Detail

Mobile Views

UI Library

Once the style direction was locked down, I created a reference board to document the component library, their specs and use cases.


Brand Elements
Menu Styles
Button Styles
Additional Components

Project Timeline

Week 1

  • Requirements Gathering, Research & Discovery (2 Meetings)

  • Initial Design Options + Review (1 week)

  • 3 Style Directions on Select Sample Screens

  • Review & Feedback Gathering (Meeting)

  • Fine-Tuned Design Direction

  • Style Direction Sign-Off

Week 2

  • Style Application to All Screens (1 week)

  • All Screens Redesigned According to Chosen Style Direction

  • Review & Feedback Gathering (Meeting)

Week 3

  • Final Review & Fine-Tuning (1+ Week - Varies)

  • Review of All Flows & Feedback Gathering (Meeting)

  • Fine-Tuned Design Direction

  • Review (Meeting)

  • Handoff & Completion

  • Style Guide & UI Library

DESIGNS

The length of the design process is always variable, depending on the needs of the customer. In most cases, I strive to iterate off of real user feedback, setting up moderated or unmoderated tasks to test partial prototypes for usability and comprehension.

BEFORE/AFTERS

Property Dashboard
Property Dashboard

Before

press to zoom
Property Dashboard
Property Dashboard

Before

press to zoom
1/1

PROTOTYPES

At the prototyping stage, I'm working closely with devs to ensure that expected behavior isn't only shown through the design, but annotated and documented for their reference as they bring the design to life.

bottom of page