FORTRESS / PROPERTY MANAGEMENT
Created a Design System and UI Kit for Fortress PropTech's Mobile App, Mobile Web Payments and Property Management Software.
As a start up company Fortress struggled with efficiency.
They needed to keep their customers happy with new features as well as update their current features within all three of their products.
The problem was the design system. The components weren't structured properly with styles, naming, auto layout and variants. The atomic methodology was also broken after the molecules stage.
Create and update the design system and UI kit.
With a robust synchornized system across design and development (pattern and component libraries), a company can reduce regression and create an efficient workflow.
Effeciency allows more time for the product team to focus on innovation resulting in more features to market as well as the ability to quickly update existing features for an overall better user experience.
Along with creating and maintaining the design system, I also helped solve problems and challenges regarding each product.
Most solutions can be found within the user interface itself.
I would refer to Google's Material Design and Apple's Human Interface Guidelines as well as reference Amazon's payment process as examples of how I would approach problem solving user experience and features.
Countless solutions are often found in the products that we use everyday, which minimizes anxiety or confusion for the user when using a new product.
By researching popular products and brands which have similar features, it saves me time because larger companies have more resources to solve these common problems and it also allows me to compare solutions.
Each product is unique with it's own challenges and Fortress has three products which handle different functions and in order to create efficiency they needed to use the same design system which was the biggest challenge.
Products, brief summaries, before and after visuals and a redesign concept below.
Addressing the atoms.
The colors looked saturated which created a feeling that the product was dated and not of a company trying to be a leader in the PropTech space.
Along with a graphic designer we came up with a more vibrant color pallet which looked current and alive.
Old Colors / New Colors
Referring to Material Design's typography styles, I wanted Fortress to feel like a tool rather than a website.
Old Typography / New Typography
Known as Fortress Hub, the first feature in the app was for managing and creating property work orders. It has only recently expanded to scanning checks as a second feature.
I designed the app before the rebranding of Fortress so the styles were already applied which made it easy to update.
With the personas in mind, I introduced larger calls to action, thicker strokes and heavier symbol weight.
Fortress Hub
The main challenge for Fortress Portal was the color pallet.
Each property has their own branding which is their logo in the top navbar, for that, it made sense to keep the grayscale interface but create more contrast. Hence, black.
As a solution for making it feel modern, I changed the patterns by increasing the border radius on the calls to action as well as the dashboard cards and introduced icons and status indicators in the list items.
Old Portal / New Portal
As mentioned before, it all started with the atoms.
The biggest problem was the typeface and since Fortress is mostly composed of tables, the universal rules of data tables needed to be applied, such as text alignment within columns and cells.
Introduced badges, clearer calls to action, better components, applied styles and began to create organisms, templates and pages.
There were challenges everyday with new features but the main challenge was creating a design system and the majority of user experience problems are solved with a better user interface, which also includes writing more direct labeling.
Old Fortess / New Fortress
With components and styles applied, it's fairly easy to redesign or rebrand a product as well as create a dark mode. Below is an example of both for Fortress.
Light / Dark
The End