My work at DDI System as an in-house website designer in the marketing department was invaluable. By the time I left, I was an expert of Hubspot website pages, landing pages, email design, and custom modules. I started to write and re-write HubL within templates and modules in order to accomplish the goals of the business.
Over the course of my time there I worked on dozens of landing pages, updated and restructured interior website pages, created and sent countless marketing emails, and edited and refined at least half a dozen templates (which I would, now looking back, consider having created child themes from Hubspot themes).
One of my favorite projects from a design standpoint were the isometric interior pages featuring detailed information about the company’s software features.
First, I wireframed the pages from top to bottom, making sure to visualize the user’s experience on multiple devices. While the most common media viewer for the prospect’s personas was still desktop, I utilized Hubspot’s bootstrap-based theme layouts to make sure that the breakpoints for mobile occurred in sensible places, leading to an ease of use on phone and tablet.
I then was able to speed up page creation by using Hubspot’s drag-and-drop features to implement copy and imagery, forms, CTAs, accordion features for FAQ, and other important items.
DDI Website Redesign: UX Case Study
At one point the decision was made to redesign the entire website for a branding update. I took this opportunity to turn it into a UX project: to discover the user’s journey, reorganize the web architecture, and improve the flow in order to accelerate the customer journey and create inbound leads.
I took a look at the website architecture and user journey, and revised the site map for improved navigation and structure.
I created a wireframe layout for the homepage, with the intention of reducing the content and increasing the likelihood of prospects to click an action. At this point I presented this project to the COO and CEO, explaining the logic and design behind this redesign and its necessity; it was approved to move forward.
I moved on to creating mockups for some of the smaller pages, such as the ‘About Us’ page featured here, utilizing the color theme I had put together in the previous step. At this point the rebranding campaign had not yet decided on a new logo, so I designed one myself.
Eventually a theme was decided upon, a new logo was designed, a color theme was accepted, and with many of rounds of edits, taking into account feedback from the marketing director, COO and CEO, a new homepage was staged and made live.
Hubspot Landing Page: Takamine Whiskey
For this project, Winebow needed two landing pages built in Hubspot with a quick turnaround. Both were informative about the history of a specific product. The pages were first templated out within the Hubspot design manager. The ‘timeline’ area of the second landing page was a module imported from the marketplace for initial structure, and modified in HubL and CSS to adhere to brand standards. Graphics were taken from provided powerpoint files and stock image galleries; the collage was created to mimic another collage on a different area of the site.
After leaving DDI Sysem to pursue a freelance career of art and design, I was asked by JL2 Consulting – a local marketing firm – to assist with the design of a high-end Med Spa website hosted in WordPress.
The template that was decided upon to revise the old site had the WPBakery Editor. I assisted in editing the homepage, creating multiple interior pages, adding new design elements, and getting the form plugin working. I also helped start the redesign of the sister site.
At the stage I entered in, the hero image had been created, but the lower sections needed to be added. I worked within the framework to add a video background, custom fonts, created an icon section, and a rotating testimonials area.
While I have worked on WP projects before, this project taught me much about working within the constraints of WordPress, particularly for clients with a specific need. I later started working with Elementor and Divi editors to create quicker, more functional websites.
Work with Strupek
In my work with the development firm Strupek, I was asked to help on two fronts – first project was a wireframe and template design to be re-used for multiple landing pages. The second project was creating a landing page on a WordPress platform constructed with Gutenberg and Advanced Custom Fields blocks.The wireframes were first constructed with Figma with a mobile-first design, then the page template was built in Hubspot.
This site was a bit more complicated – I had to create the wireframe without access to the backend first, so I was not privy to the type of development used for the website. It turns out it was a combination of ACF and Gutenberg, and I had limited user permissions so I could not create new blocks in ACF. Despite these limitations, I was able to create as close to the wireframe as I could technically get, allowing the client to add their content.