Monet Fort - Wordpress Landing Page

Ozinga facilitates timely delivery of concrete to building sites. The MyOzinga app is the essential tool used on construction sites to track orders.

Ozinga had an existing landing page provided by their app developer, but it was separate from their main Wordpress site and did not present a completely seamless aesthetic brand experience when transitioning from their main site which Sparkbox had designed. Ozinga wanted their landing page moved to their Wordpress site and constructed in a way that would be easy for them to update and maintain. The landing page also needed to:

Allow clients to establish access to the app via a webform
Provide login access to the desktop version of the app
Provide downloads for the mobile app
Provide a quick introduction to the main features of the app

MyOzinga old landing page, brochure, and branding

The existing landing page needed updates to reflect the Ozinga brand.

My first task was to immerse myself in the MyOzinga app. I installed it on my mobile device and learned how it is used to track orders. I also studied the printed brochure for the app.

As a designer, it is my job to fully absorb the existing brand so that everything I build rhymes with the original intent of the design system. I had the good fortune of working with talented designers at Sparkbox who provided an extensive Figma library full of high quality designs for Ozinga’s website. I familiarized myself with this library and identified components which were represented consistently from the Figma files to the Wordpress theme. I iterated on these components as I designed the new landing page in Figma.

I explored the mobile app on my own device and the existing branding of Ozinga.

I provided several options for the layout of the landing page.

To ensure visitors could find the landing page, we added a button to the main navigation of the site.

I created a collection of icons to illustrate the features of the app more cohesively with the Ozinga brand.

My discovery phase also included asking the client what they liked about the existing landing page. They were particularly interested in retaining a parallax scroll section in which a static mobile phone image would fade in screens from the app while descriptions of the features represented by each screen scrolled past. I researched options for creating this type of content and then I created a functional prototype of the component..

Developer Designer Collaboration

I presented my functional prototype to our full-stack developer. We both agreed that Intersection Observer would be the ideal tool for our parallax section. He recommended changes to the Javascript and provided a revised prototype, which I examined for design accuracy.

Once we had consensus on the new parallax component, we moved on to Wordpress implementation. I worked with our full-stack CMS developer to ensure each component that would need to be modified by our client was accessible and easy to update. We provided the client with fields they could use to update the text and slides on the parallax component.