Portfolio work of

Giovanni Vocale

Design Miami
2022

E-Commerce Platform

The Project

The vision was to build a multi-vendor, multi-brand platform, to use for Design Miami and other art fairs. We started re-platforming the existing website from Shopify to Next.js + WooCommerce / WordPress. Then decided to replace WordPress with Strapi. Re-designed existing pages one by one and ideated new features.

My Contribution

We added a basic multi vendor platform capability to the existing marketing website. Designed few more pages and features.

Role
  • Head of Product Design and Engineering
  • Visual Design
  • Frontend Development
Technologies
  • React
  • Next.js
  • Cypress
  • Storybook
  • Theme UI
  • Strapi
  • Wordpress
  • GraphQL
Credits
  • Anastasiya UralevaDesign Engineer
  • Hoa J'Mie PhamDesign Engineer
  • Sasha KomarovaDesign Engineer
Better.com
2020

Engineering Blog

The Project

There was already a preexisting 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.

Role
  • Visual Design
  • Frontend Development
Technologies
  • React
  • React Spring
  • Gatsby
  • Css Modules
Credits
  • Yaxin BaiIllustration
Better.com
2018

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 wire-frame 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.

Role
  • UI Design
  • Frontend Development
Technologies
  • HTML5
  • CSS3
  • CSS Animations
  • Vanilla JS
  • SUIT
  • SCSS
Credits
  • Alastair HallidayDesign Director
  • Spencer BrownFrontend Development
Better.com
2018

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 rough wire-frame and some initial design, I crafted and prototyped UI, animations and end landing page.

Role
  • UI Design
  • Frontend Development
  • Product Design
Technologies
  • HTML5
  • CSS3
  • CSS Animations
  • Vanilla JS
  • SUIT
  • SCSS
Credits
  • Alastair HallidayDesign Director
Better.com
2018

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.

Role
  • UI Design
  • Frontend Development
  • Product Design
Technologies
  • HTML5
  • CSS3
  • CSS Animations
  • Vanilla JS
  • ReactJS
  • SUIT
  • SCSS
Credits
  • Alastair HallidayDesign Director
Better.com
2018

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.

Role
  • UI Design
  • Frontend Development
  • Product Design
Technologies
  • HTML5
  • CSS3
  • CSS Animations
  • Ember JS
  • Vanilla JS
  • SUIT
  • SCSS
Credits
  • Alastair HallidayDesign Director

Still have time?

Check these other projects