SPARC
Design Foundation and MVP for a New Platform
January 2022 – April 2023
Overview
SPARC was a new platform built by Hotel Engine to partner with hotels and vacation properties. The aim of this platform was to modernize how hotels deal with their analytics, reservations, content, and customer support. This was a new and experimental platform currently in the MVP stage as Hotel Engine tests and evaluates the market space.
My role as the design lead on this project was focused on building a solid design foundation to start scaling up development. I first created a foundational design system that we then used to build MVP pages using a predefined framework. While testing and experimentation was ongoing, I developed a design framework to help allow for rapid iteration under a defined rule set.
Core Foundation
Defining the basic identity
The core identifiers for any design come down to key foundational elements such as color, typography, and visual styling. Using the basic elements identified under SPARC branding, I created a defined type set with definitions around usage with-in the platform. Foundational colors were also defined as extensions of the brand identifying colors, which were then extended to programmable color tokens. Container styling and a list of available icons were also defined in this effort.
Primary Elements
Defining the building blocks
Before creating any of the MVP designs, a set of neccesary components were identified and built to speed up the development process. I created a defined and reusable library of common components. Using the atomic design methodology, I created separate Atoms, Molecules, and Organisms matching the design foundations already defined. This allowed for easier implementation in the development libraries, and encouraged faster iterations MVP Designs.
Spacing and Page Elements
Creating balance and visual rhythm
The final core aspect to this design library is spacing. Defined common spacing acts to hold the design elements together in a balanced manner, creating a rhythm that allows for less visual burden on the user. Elements such as spacing intervals, margins, and rules behind responsive spacing are shown below. Also defined are common breakpoints and interactions withe the expanding left hand navigation.
MVP Design
Utilizing the Design System
Once we had a complete design system, we quickly created MVP designs, and implemented them almost as quickly. Creating the structure first allowed for many key benefits that enabled the success of this platform:
First, it acted as a very malleable proof of concept, where pages could be built or scrapped quickly without heavy lift. We eventually removed some early directions from the platform because they tested poorly, or were seen as unnecessary to the business. We could also design and implement new pages quickly enough that our core users could test them live and give us immediate feedback.
Second, we started off with design libraries, code libraries, and production matching 1-1. An incredibly rare luxury in the real world , this made for rapid bug and UAT testing, eventually saving untold man hours in development and design.
Third, it allowed us to pivot from elements of our Design system quickly and painlessly. The business originally wanted SPARC to stand on it's own, but later on found value in pulling it under the umbrella of Hotel Engine. Shifting the Design System to match the brand and design standards set by Hotel Engine could have been a nightmare, but instead was fairly simple and straight forward.
My Contributions:
Design Framework
Design Foundation, Common components, Spacing and Formatting
UX Design
Wire-framing, Rapid Prototyping, Information Architecture, MVP Design
Product Design
Responsive Design, Visual Design
Contact @:
gregory.blumer@gmail.com
LinkedIn:
linkedin.com/in/gregory-blumer/
Work
About
Gregory Blumer
SPARC
Design Foundation and MVP for a New Platform
January 2022 – April 2023
Overview
SPARC was a new platform built by Hotel Engine to partner with hotels and vacation properties. The aim of this platform was to modernize how hotels deal with their analytics, reservations, content, and customer support. This was a new and experimental platform currently in the MVP stage as Hotel Engine tests and evaluates the market space.
My role as the design lead on this project was focused on building a solid design foundation to start scaling up development. I first created a foundational design system that we then used to build MVP pages using a predefined framework. While testing and experimentation was ongoing, I developed a design framework to help allow for rapid iteration under a defined rule set.
Core Foundation
Defining the basic identity
The core identifiers for any design come down to key foundational elements such as color, typography, and visual styling. Using the basic elements identified under SPARC branding, I created a defined type set with definitions around usage with-in the platform. Foundational colors were also defined as extensions of the brand identifying colors, which were then extended to programmable color tokens. Container styling and a list of available icons were also defined in this effort.
Primary Elements
Defining the building blocks
Before creating any of the MVP designs, a set of neccesary components were identified and built to speed up the development process. I created a defined and reusable library of common components. Using the atomic design methodology, I created separate Atoms, Molecules, and Organisms matching the design foundations already defined. This allowed for easier implementation in the development libraries, and encouraged faster iterations MVP Designs.
Spacing and Page Elements
Creating balance and visual rhythm
The final core aspect to this design library is spacing. Defined common spacing acts to hold the design elements together in a balanced manner, creating a rhythm that allows for less visual burden on the user. Elements such as spacing intervals, margins, and rules behind responsive spacing are shown below. Also defined are common breakpoints and interactions withe the expanding left hand navigation.
MVP Design
Utilizing the Design System
Once we had a complete design system, we quickly created MVP designs, and implemented them almost as quickly. Creating the structure first allowed for many key benefits that enabled the success of this platform:
First, it acted as a very malleable proof of concept, where pages could be built or scrapped quickly without heavy lift. We eventually removed some early directions from the platform because they tested poorly, or were seen as unnecessary to the business. We could also design and implement new pages quickly enough that our core users could test them live and give us immediate feedback.
Second, we started off with design libraries, code libraries, and production matching 1-1. An incredibly rare luxury in the real world , this made for rapid bug and UAT testing, eventually saving untold man hours in development and design.
Third, it allowed us to pivot from elements of our Design system quickly and painlessly. The business originally wanted SPARC to stand on it's own, but later on found value in pulling it under the umbrella of Hotel Engine. Shifting the Design System to match the brand and design standards set by Hotel Engine could have been a nightmare, but instead was fairly simple and straight forward.
My Contributions:
Design Framework
Design Foundation, Common components, Spacing and Formatting
UX Design
Wire-framing, Rapid Prototyping, Information Architecture, MVP Design
Product Design
Responsive Design, Visual Design
Contact @:
gregory.blumer@gmail.com
LinkedIn:
linkedin.com/in/gregory-blumer/
SPARC
Design Foundation and MVP for a New Platform
January 2022 – April 2023
Overview
SPARC was a new platform built by Hotel Engine to partner with hotels and vacation properties. The aim of this platform was to modernize how hotels deal with their analytics, reservations, content, and customer support. This was a new and experimental platform currently in the MVP stage as Hotel Engine tests and evaluates the market space.
My role as the design lead on this project was focused on building a solid design foundation to start scaling up development. I first created a foundational design system that we then used to build MVP pages using a predefined framework. While testing and experimentation was ongoing, I developed a design framework to help allow for rapid iteration under a defined rule set.
Core Foundation
Defining the basic identity
The core identifiers for any design come down to key foundational elements such as color, typography, and visual styling. Using the basic elements identified under SPARC branding, I created a defined type set with definitions around usage with-in the platform. Foundational colors were also defined as extensions of the brand identifying colors, which were then extended to programmable color tokens. Container styling and a list of available icons were also defined in this effort.
Primary Elements
Defining the building blocks
Before creating any of the MVP designs, a set of neccesary components were identified and built to speed up the development process. I created a defined and reusable library of common components. Using the atomic design methodology, I created separate Atoms, Molecules, and Organisms matching the design foundations already defined. This allowed for easier implementation in the development libraries, and encouraged faster iterations MVP Designs.
Spacing and Page Elements
Creating balance and visual rhythm
The final core aspect to this design library is spacing. Defined common spacing acts to hold the design elements together in a balanced manner, creating a rhythm that allows for less visual burden on the user. Elements such as spacing intervals, margins, and rules behind responsive spacing are shown below. Also defined are common breakpoints and interactions withe the expanding left hand navigation.
MVP Design
Utilizing the Design System
Once we had a complete design system, we quickly created MVP designs, and implemented them almost as quickly. Creating the structure first allowed for many key benefits that enabled the success of this platform:
First, it acted as a very malleable proof of concept, where pages could be built or scrapped quickly without heavy lift. We eventually removed some early directions from the platform because they tested poorly, or were seen as unnecessary to the business. We could also design and implement new pages quickly enough that our core users could test them live and give us immediate feedback.
Second, we started off with design libraries, code libraries, and production matching 1-1. An incredibly rare luxury in the real world , this made for rapid bug and UAT testing, eventually saving untold man hours in development and design.
Third, it allowed us to pivot from elements of our Design system quickly and painlessly. The business originally wanted SPARC to stand on it's own, but later on found value in pulling it under the umbrella of Hotel Engine. Shifting the Design System to match the brand and design standards set by Hotel Engine could have been a nightmare, but instead was fairly simple and straight forward.
My Contributions:
Design Framework
Design Foundation, Common components, Spacing and Formatting
UX Design
Wire-framing, Rapid Prototyping, Information Architecture, MVP Design
Product Design
Responsive Design, Visual Design
Contact @:
gregory.blumer@gmail.com
LinkedIn:
linkedin.com/in/gregory-blumer/