Kabinet App Redesign & Feature Expansion
UX Design
Client:
Kabinet, LLC
ROLE:
UX Lead
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.
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
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
Style 2 - Kabinet Blue Menu + Circular Buttons
Style 3 - White Space Variation
UI Library
Once the style direction was locked down, I created a reference board to document the component library, their specs and use cases.
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
Before
Before
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.