2022 UI Design System
Sydnee.App Component Library
The one-stop shop for client marketing.
Project Context
Utilizing an approved brand guideline, I worked with a colleague to create all anticipated components as outlined by the user story map and information architecture. We focused on establishing all necessary component states and creating a visual distinction between a “User” view and a “Tenant” view.
Client / Stakeholder
Team / 2-Person Team
Role / UI/UX Design
Tools / Adobe XD
Duration / November 2021 – December 2022
Page Contents
01. Input Fields
02. Buttons
03. Segment Tabs
04. Filters
05. Option Selection Methods (Checkboxes/ RadioSelection)
06. File Uploads
07. Image Uploads
08. Dropdown Menus
09. Platform Navigation
Reflections
01.
Input Fields

02.
Buttons

03.
Segment Tabs


04.
Filters

05.
Option Selection Methods

06.
File Uploads

07.
Image Uploads

08.
Dropdown Menu

09.
Platform Navigation

.Reflections
- Designing with Emotion: Though the color palette was crafted with the product vision and market in mind, it was in creating the component library that I was able to bring the colors to life and create emotion with them. Through page placement, border, and element weights, I was able to create a positive and negative dynamic against elements to have the color palette guide users towards the correct intended action.
- Verifying Core Element Functionality: Through creating the component library, I kept in mind the total uses of each component. However as this project and discussion around it grew, I was able to test the feasbility of components by applying them on new feature sets. If the components were able to be applied as intended, we were validated in our design structure. In any instance that the design system was not able to be applied, we were able to question the feature set and see how the flow is varying from the rest of the platform and assess whether changing the design language for a specific page would remain intuitive.
