HopSkip simplifies the Groups and Meetings booking process for planners and hotels.
HopSkip was looking to enhance their brand and establish a solid web presence.
With the product in the MVP stage, they knew they would need a UX overhaul but they also knew they needed a place to send people who wanted to learn about or invest in their company.
Update the existing logo and establish a typography system and color palette.
Establish a UI design system that includes a series of spot illustrations and style direction for product components.
We needed to separate the brand's site from the product MVP in an effort to promote the product and attract potential investors.
Multi-tier system that can go from block layouts all the way to fully polished UI
Layouts and components are based on relative values to allow for easy nesting and reusability
Customizable, programmable UI system components including brand guides
Semantic naming structure and responsive system facilitates easy dev hand-off
This is a portion of the system that was used to build a system map and blocked layout of dashboard web application.
These are high-level categories that help define the hierarchy of the application and include areas for notes that explain the purpose of the element.
The scale and contrast of the grayscale elements are designed to help facilitate an understanding of the general layout distracting design elements.
We wanted to emphasize curves, keep the "H" as a monogram, and design something bright and a bit playful.
Content broken down into clear and concise sections, each occupying approximately 1 screen-height
Bright colors, bold text, and large product shots
Maps with landmarks, transit routes, and locations of everyday errands.
The end result works, as all logos should, in various orientations and brand related color combinations and single colors.
During the brand research process, I ask for keywords that represent a feeling that the client wants to attach to their brand. HopSkip landed on "zen."
We used Pinterest to build a mood board with the goal of finding an image (or images) that I could as a starting point for a full color palette.
Teal and navy were great colors to represent the brand, but a full palette needs more than that. Alerts of all sorts are integral to an app's interface and color plays a large role in how we process those alerts, therefore, we needed some additional colors.
Beyond what we instantly think of as color, every color palette needs a grayscale palette as well. Most bodies of text use the darkest gray in this palette.
The client wanted to work drop shadows in where possible and keep all illustrated elements and iconography bold.
Using the new brand, I build a collection of exploratory design elements in various states.
We had a new brand and were ready to show it off, but we needed some additional visual elements. The answer? Illustrations that aligned with the brand and could be used to explain the functions of the product.
Pico-published news, upcoming events, promos, guides to other areas of blog or site
Defined as articles and references from non-Pico companies
Content published by Pico
MVPs are priceless, but in the startup game we all know that having an MVP means it's time to get people interested. HopSkip had a product they needed people to get hyped about but their only web presence was an unbranded site that was connected to their product.
I came up with the idea of building a simple promotional site that would work as a landing area for all marketing efforts. This way when potential investors or customers wanted to learn more, there was a place to send them to learn about the product and engage with the brand.
As soon as you reach the landing page, you choose which door you want to enter. The product has 2 sides, so the microsite has 2 sides. Users select which door to enter while being able to go back and forth if needed.