2. HopSkipDrive



Role:                                                        Categories:                        

Chief Creative Officer            Branding | Creative Direction | UXA


Period: 2018 - 2020
Rebranding* in collaboration with Use All Five




            HopSkipDrive is a mothers-founded, tech-enabled solution for kids’ transportation aimed for parents, schools, foster-care homes and city districts. The company has 3 mobile apps (iOS, Android and tablet), an official website and an online enterprise platform - the first of its kind. 

I was initially brought in as a Principal Consultant to refresh the apps’ look & feel; Yet after careful consideration we decided to channel all Design & UX efforts into a greater cause; Prototyping HopSkipDrive’s new Enterprise platform (4) - a robust online platform for schools and large organizations, as well as embark on a Full rebrand (1), new visual identity (2) and a new website (3). 

In March 2019, I released HopSkipDrive’s new branding styleguide, along with its simple & cohesive website, and the first ever Enterprise Platform solution for Schools’ and organizations’ transportation. I hired & led a scrappy team of 3 designers, 5 back-end engineers and an external boutique studio (https://useallfive.com/) towards the full Rebrand (1)



1

Logo - Old





   

Logo - New




        The rebranding process was thorough, followed by numerous check-points and internal discussions with HSD’s co-founders and department VPs. Our main inspiration was drawn from easy-to-identify universal, minimalistic symbols, combining flow and simplicity and underlining the warmth, care & safety - HopSkipDrive’s top values - along with its new message;
The tech-enabled, modern solution for kids’ transportation.  

Along with the logo & symbols refresh, the color-palette was a crucial element to tackle; From a triple-core palette, leaning heavily on Grey, along with dimmed Cyans and Oranges, the core palette was reduced to 2 vivid lead colors, and the palette was extended in order to support the growing needs of both the Creative and Marketing departments. Adding pastel colors and mid-tones helped enhance and diversify the leading duo palette to a larger, more versatile range.



2

New Color Palette 




Secondary (Marketing & Print)







Stationary




Digital Identity






3

Website


        Content wise, the new website had to speak to school organizers, transportation coordinators and district officers; A major shift from HSD’s previous end users which consisted of young couples and working moms. The shift was evident not only through branding, custom fontfaces and visuals (such as palette and symbols), but also through a full copywrite rebrand and condensed messaging. As a Head of Creative, my goal was to tell HopSkipDrive’s new story, as well as to avoid clutter - both in wording & site infrastructure.

        The design follows a clean line: a minimalistic yet efficient approach, core brand colors on white BG, and updated iconography - speaking directly & genuinely to the target audience.  
(See old sitehttps://tinyurl.com/yyohdp4lNew site: https://www.hopskipdrive.com/)


Website - Old





Website - New









4

Enterprise Platform


        The enterprise platform, targeting school administrators, district transportation leaders and non-profit organizers, was designed first and foremost for scale. Since there is no existing parallel to this platform today, I rolled my sleeves, utilized my previous experience as UX Researcher for large orgs, and dove into a 3-way pre-planning process, consisting mainly of
1) Deep Competitive SAAS Research, 2) Platform analysis & Fleet IA Layout Breakdown, and 3) User Testing and Deep-end interviews. Following the conclusions, and working closely with the company’s VP of Operations and CTO, I architected a platform that encompasses Geo-location services in real-time, easy to navigate fleet-style operations dashboard, and a ML-driven route-planner. Post planning the core prototype and developing the platform’s visual identity & GUI, I mentored 2 UX/UI designers to further expand the visual language - speaking to users who typically do not use the digital space. 

        The result is the first-ever interactive transportation planner and HSD’s flagship SAAS product.


A. New Information Architecture 




Detail; 



B. Research, UX Sketches










C. Layout Analysis & Breakdown




D. UX, UI & Graphic Layer








Tablet consistency / Form sample




E. GUI & Guidelines









Mark