Portfolio work of

Giovanni Vocale

Designer & Prototyper

Better2020

Engineering blog

The Project

There was already a prehexisting blog, but did not have any Better branding, nor spaces to promote Better's engineering team culture and opportunities. I was asked if I could restyle it, make it more "Better-y" and add callouts to current job openings.

My Contribution

I designed and coded a restyled blog for the engineering team. I took this project as a chance to play with the React Spring animation library. I also had a chance to play more with large text, white space and monochromatic color pages, a good break from the data dense view of Better's internal web app, where I would spend most of my time instead.

Better2018

Solar Mortgage

The Project

To pitch a partnership between Better Mortgage and Tesla Solar Roof, I was asked to design and build this landing page with an interactive calculator.

My Contribution

Starting from a rough wireframe and a basic calculator, I crafted the page, adding few animation triggering on scroll. To make the calculator engaging, we enhnaced it with an interactive animated roof. The page was very liked and help the two company reach an agreement on the ongoing partnership.

Better2018

Refinance flow

The Project

To replace a less customizable TypeForm used by the marketing team, we prototyped a new form / flow experience. The objective was to test large typeface and UI. If the UI would have proved effective, we would have redesigned the onboarding flow in this same style.

My Contribution

Starting from a rought wireframe and some initial design, I crafted and prototyped UI, animations and end landing page.

Better2018

Homepage

The Project

When I joined, the homepage hadn't been updated in a while. The company's marketing was playing with circular shapes, brigther colors and white space, so I decided to take inspiration a redesign the site.

My Contribution

I redesigned and coded the website, landing pages, FAQ and blog. I tried to break free of too much use of cards, drop shadows, boxes and border. I played instead with white space, more colloquial copy, friendly and bright colors.

Better2018

Internal Tools

The Project

Tinman is core internal processing tool used within the company. Thanks to its automation, our team can process more loans in less time then our competitors.

My Contribution

I have been restyling and iterating this large legacy Ember application. I added many components and new features. I would shadow internal users doing their daily job thorugh this powerful app.

Web app

The Project

NexHealth is a CRM for doctor’s office. It allows appointment booking, patient messaging, automatic appointment reminders, detailed analytics, marketing emails, interactive forms and surveys.

My Contribution

As first and only design hire for a small 10ppl startup, for a year I designed everything UX / UI / Frontend. From a Web app, to an iPhone app, to a Marketing website, automated Emails, Newsletters, Logo, Swags, Pitch Decks, Business Cards and more… From conception to design to final production code. Technologies I used include HTML5, CSS3, CSS Animations, AngularJS, Ionic, SCSS, Git & Github, Gulp, Sketch, Photoshop.

razorfish2016

Prototype

The Project

After having picked a coworker's final desktop design for the new razorfish.com, I've been asked to make it responsive creating prototypes in code.

My Contribution

I have created responsive prototypes of each website component, adding CSS animations. I contributed to the final production code with CSS, HTML and basic vanilla JS.

UNIQLO2014

E-Commerce platform for Taiwan

The Project

Uniqlo has just launched in the US with an e-commerce platform designed by razorfish. It was a great success, so the client asked to beef it up so that could be rolled to all the other countries and become a global platform.

My Contribution

I iterated most of the components, only half of which made it live. I stress tested them against other languages and complex business requests.

JPMorgan2015

Design system

The Project

Digital property showcasing JPM Private Banking capabilities and serving as platform to publish their market thoughts.

My Contribution

I produced a live style guide to handle to the client. It helped me test in the browser our resonsive designs. I have also designed a couple of pages of this larger property, and some icons.

FreshDirect2014

Vision

The Project

This engagement re-imagined the future of this popular fresh grocery distributor.

My Contribution

I worked closely with UX and redesigned several pages of this property.

2015

TubeDatabase

The Project

I am building a website (www.tubedatabase.co) using HTML5, CSS3, PHP (Kirby CMS) and GitHub. I am very excited of my new found coding knowledge. I finally feel I can build what I design.

My Contribution

For TubeDatabase, I mostly design straight in code. I have a to do list of features I would like to have, and periodically launch some successfully. I architect content blueprints, write content and moderate comments. I monitor analytics and improve google ranking. There are plenty of illustrations I am planning to add, but functionality will come first.

Still have time?

Check these other projects