KEYNINJA
UI Design System Case Study
UI Design System Case Study
KeyNinja is a technology company that connects service providers with short-term rental hosts for a range of household needs related to their rental properties.
KeyNinja is a technology company that connects service providers with short-term rental hosts for a range of household needs related to their rental properties.
My Role
UI/UX Design Lead
My Responsibilities
Being the UI/UX Design Lead and the only designer in the company, my responsibility was to deliver all design aspects of the redesign project, from research to implementation. I collaborated closely with the development team and stakeholders to ensure that our designs not only met business goals but also provided a seamless and captivating user experience.
Project Duration
October - December of 2022
Opportunity
By redesigning KeyNinja's dashboard UI, we can overcome the issues posed by the outdated design, and create an intuitive and visually appealing interface that aligns with the company's goals. This will enhance customer engagement, improve the user experience, and provide KeyNinja with a competitive advantage in the market.
To differentiate between UI elements and surfaces, KeyNinja employs a variety of colors. The color system comprises a primary and secondary color that represents the KeyNinja brand. They attract users, and they can better communicate our messages.
Primary Colors
Primary Color Variants
Secondary Colors
Secondary Color Variants
Inter is a modern, versatile, and legible typeface designed by Rasmus Andersson, released in 2017. Its excellent readability, balanced proportions, and over 50 styles, including regular, italic, bold, and bold italic, make it a popular choice for UI/UX design in both digital and print applications.
To ensure consistency in the icon family, KeyNinja follows the same stylistic rules, including filled style with fill set to 1, weight set to 500, a 1.5px center stroke and a 24 x 24 icon size. These icons are utilized to represent specific actions or tools within the interface.
Buttons are typically links styled to draw the user's attention and direct them to specific pages within the dashboard.
A card is a UI component that creates a visually distinct group of logically related information. It usually consists of a headline, a short chunk of description.
Text fields are a commonly used user interface element that allows users to input text data. They can be used for a variety of purposes, such as filling out forms, entering search queries, and composing messages.
Notifications and alerts are utilized to convey high-priority information to users. They provide brief, informative messages that are triggered by the system when an event is captured. In KeyNinja this is an important component.
The host dashboard of KeyNinja was successfully redesigned using the new UI design system, resulting in a user-friendly, consistent, and visually appealing dashboard that is both functional and aesthetically pleasing.
Before the new UI design system
After the new UI design system
Graphic Design ✧ UX Design ✧ Digital Story Teller
Explore
*.✧ Design Portfolio ✧.*
KeyNinja is a technology company that connects service providers with short-term rental hosts for a range of household needs related to their rental properties.
My Role
UI/UX Design Lead
My Responsibilities
Being the UI/UX Design Lead and the only designer in the company, my responsibility was to deliver all design aspects of the redesign project, from research to implementation. I collaborated closely with the development team and stakeholders to ensure that our designs not only met business goals but also provided a seamless and captivating user experience.
Project Duration
October - December of 2022
The objective of the project was to enhance customer engagement and user experience by revamping KeyNinja's host dashboard. Despite the app being functional, there is still scope for improvement.
Problem Statement
KeyNinja's current dashboard UI design is outdated and lacks consistency, which hinders the user experience and results in low customer engagement. The existing UI design appears outdated and lacks consistency and thus, poses a challenge for the company.
Opportunity
By redesigning KeyNinja's dashboard UI, we can overcome the issues posed by the outdated design, and create an intuitive and visually appealing interface that aligns with the company's goals. This will enhance customer engagement, improve the user experience, and provide KeyNinja with a competitive advantage in the market.
Design Process
The project was initiated with thorough research to comprehend the existing app and its users. Currently, we enable both internal and external users to provide their feedback or report issues related to the dashboard through dedicated SLACK channels (primarily for internal users) or by submitting a ticket via our dashboard.
We also analyzed competitor apps to determine best practices and industry standards. We then went through multiple design iterations, starting with low-fidelity wireframes and gradually refining the design to high-fidelity mockups.
Atomic Design Approach
Atomic Design, a methodology developed by Brad Frost, aims to guide the construction of interface design systems in a deliberate and hierarchical manner. This involves creating a design system with reusable components, following the atomic design methodology, which includes atoms, molecules, organisms, templates, and pages. By using this methodology, the redesigned UI design system would be scalable, flexible, and easily updatable in the future.
To differentiate between UI elements and surfaces, KeyNinja employs a variety of colors. The color system comprises a primary and secondary color that represents the KeyNinja brand. They attract users, and they can better communicate our messages.
Primary Colors
Primary Color Variants
Secondary Colors
Secondary Color Variants
Inter is a modern, versatile, and legible typeface designed by Rasmus Andersson, released in 2017. Its excellent readability, balanced proportions, and over 50 styles, including regular, italic, bold, and bold italic, make it a popular choice for UI/UX design in both digital and print applications.
To ensure consistency in the icon family, KeyNinja follows the same stylistic rules, including filled style with fill set to 1, weight set to 500, a 1.5px center stroke and a 24 x 24 icon size. These icons are utilized to represent specific actions or tools within the interface.
Buttons are typically links styled to draw the user's attention and direct them to specific pages within the dashboard.
A card is a UI component that creates a visually distinct group of logically related information. It usually consists of a headline, a short chunk of description.
Text fields are a commonly used user interface element that allows users to input text data. They can be used for a variety of purposes, such as filling out forms, entering search queries, and composing messages.
Notifications and alerts are utilized to convey high-priority information to users. They provide brief, informative messages that are triggered by the system when an event is captured. In KeyNinja this is an important component.
The host dashboard of KeyNinja was successfully redesigned using the new UI design system, resulting in a user-friendly, consistent, and visually appealing dashboard that is both functional and aesthetically pleasing.
Before the new UI design system
After the new UI design system
Graphic Design ✧ UX Design ✧ Digital Story Teller
Explore
*.✧ Design Portfolio ✧.*