collection

hopskip

branding
consulting & strategy
UX/UI Design
web development

collection

case study

CLIENT

hopskip

Heading

company profile

HopSkip simplifies the Groups and Meetings booking process for planners and hotels.

my roles

branding
consulting & strategy
UX/UI Design
web development

tools & tech

react js
git
adobe xd
adobe illustrator
Bootstrap
css

getting started

Project overview.

What we know.

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.



project brief

What did we need to do?

1

Refresh the brand

Update the existing logo and establish a typography system and color palette.

2

Design UI elements

Establish a UI design system that includes a series of spot illustrations and style direction for product components.

3

Promotional microsite

We needed to separate the brand's site from the product MVP in an effort to promote the product and attract potential investors.

project brief

What did we need to do?

block layout > hi-fi

Multi-tier system that can go from block layouts all the way to fully polished UI

flexible

Layouts and components are based on relative values to allow for easy nesting and reusability

designer-friendly

Customizable, programmable UI system components including brand guides

developer-friendly

Semantic naming structure and responsive system facilitates easy dev hand-off

simplicity is key

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.

brand refresh > before & after

How we did it.

We wanted to emphasize curves, keep the "H" as a monogram, and design something bright and a bit playful.

(original)

updated logo

difficult navigation

The menu structure required users to follow a path that was defined for them.

Store content and company content was intertwined, making it unclear where users were and where they were able to go.

brand refresh > logo process

In progress.

checklist

accessible on mobile

Content broken down into clear and concise sections, each occupying approximately 1 screen-height

bold & fun, yet polished and sophisticate:

Bright colors, bold text, and large product shots

the location is just as important as the amenities:

Maps with landmarks, transit routes, and locations of everyday errands.

unclear hierarchy

With only one color and minimal text styling, there is no clear visual hierarchy.

initial version presented (rejected)

logo construction

rejected variations

brand refresh > approved design

The result.

The end result works, as all logos should, in various orientations and brand related color combinations and single colors.

horizontal orientation, light & dark

single color

company messaging given no focus

The company mission statement was buried well within the site. We loved the message and wanted to move it front and center to promote the brand.

property pages content flow

Brand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

brand refresh > color exploration

How we built a color palette.

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.

mobile first approach

The site looking great on mobile was a must. I knew The WIHN wanted a bold design and what better way to achieve that with heavy font weights and splashes of color?

product data example

Pico's product catalog includes machines with comprehensive specs. The current layout wasn't optimally organized and was inconsistent across the catalog.

looks pretty zen to me

photoshop > filter > mosaic

A filter and a few eyedrops later we had a starting point.

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.

warm, sunset colors juxtapose the cool hues

tints and shades of hues from the palette are used to build the grayscale palette.

ui design > component styles

UI Study.

The client wanted to work drop shadows in where possible and keep all illustrated elements and iconography bold.

a typeface for each voice

ui cards and icon set design direction

typography and supporting UI ELEMENTS

Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

ui design > elements in context

Designing for states.

Using the new brand, I build a collection of exploratory design elements in various states.

We used a pre-navigation bar that allows users to switch between Pico companies. As companies are added, additional tabs are added.

The main navigation is used for navigating through global contact which is defined as anything that isn't unique to a company page. This includes contact forms, theblog, FAQs, etc.

which property is for you?

Location and amenities can be a deciding factor. Most tenants don't have cars and need easy access to both local and regional transit.

ui design > defining the message

Spot illustration.

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.

posts breakdown

news

Pico-published news, upcoming events, promos, guides to other areas of blog or site

press

Defined as articles and references from non-Pico companies

blog

Content published by Pico

past tenant review

Knowing what others say about the neighborhood is a great way to get a feel for the areas you're considering.

promotional microsite > purpose of the site

Showing it off.

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.

promotional microsite > ux requirements

Straight to the point.

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.

promotional microsite > ux hi-fi

Land & go.

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.

next project