Company Website

I started contracting with Platform Science initially to support their design team with product design for their web and app products along with their brand and marketing content. After a few months they brought me on full time. My first project after being brought on full time was to lead the redesign and creation of their new website to fix two major problems. Those problems were an outdated look and style not matching the company’s brand and cutting edge industry technology, along with the constant bottle neck of engineering or outside help to update pages and make usable on mobile and other devices.

To get the project moving I looked at new web platforms to support these needs and ended up choosing Webflow for its supported ability for creative freedom and its ability to support a very powerful CMS that can be set up for someone non technical to be update and manage the site themselves with ease.

My approach to fix the outdated branding issue was anchored in marrying aesthetics with functionality to craft a transformative digital experience. My focus was on dissecting the brand identity, distilling the core values, and infusing them into a visually compelling narratives to stimulate seamless navigation and user engagement for the company itself, it’s products, and all of it’s partners. With an acute attention to detail, a flair for innovation, built in scalability, and a commitment to user empathy, I was successful in breathing new life into the brand's online presence, ultimately leaving an indelible mark on their digital landscape

. . . . . . . . . .

Done in collaboration with: Andrew Fodor, Anne Davis, Nicole Hayes

February 2021 - May 2021

Step 1
Picking the Platform
Creative freedom for layouts & functionality

This allowed for the ability to make the site to look and function exactly as needed to fit the brand.

Powerful Content Management System

Resolve the need to no longer rely on the engineering and other department to make site updates.

Extensive Help Documentation

Continuing the theme for not needing reliance on other departments, Webflow’s extensive self help and resources documentation was a huge plus.

Overall Reduced Cost

Webflow offered more functionality and features we needed for cheaper price and because of the items mentioned above it’s would reduce overall man hours to maintain the site ultimately reducing costs even more.

Creating Narratives & Personas

After gathering all the information I worked with our heads of Marketing, Product Marketing, and our Creative Manager to develop our personas and string all that info into narratives and bits of written content to that would lead the decisions on how users and customers would flow through the site to learn about the company and find the content, solution, or opportunity they needed.

Step 2
Gathering Information
Audited the Old Existing Site

After deciding on a platform I captured everything that existed in the site at that time to document not only all the information but to also identify any good and bad design practices and patterns.

Exec Team

I worked with our heads of Marketing and Product Marketing to create and send out questionnaires to gather the messaging and content our company leadership wanted communicated along with setting up and attending sessions to review, capture more, and massage that information.

Department & Product Leaders

I worked with our heads of Marketing and Product Marketing to create and send out questionnaires to gather the messaging and content of how our department and product leaders wanted to communicate the tech, specs, and benefits of out technology and products. This process also included many sessions with those leaders to make sure messaging and content properly conveyed their vision.

Creating Narratives & Personas

After gathering all the information I worked with our heads of Marketing, Product Marketing, and our Creative Manager to develop our personas and string all that info into narratives and bits of written content to that would lead the decisions on how users and customers would flow through the site to learn about the company and find the content, solution, or opportunity they needed.

Step 3
Information Architecture
Categorization & Titles

After getting all the info from stakeholders I worked with my partners to further define all of the received content and info into categories to better title and define navigation and page titles.

Site Organization

After defining the categories and titles and then by taking the personas that had been created I began defining the concept for how we wanted to guide users through our site. The goal was to keep it simple and direct without the need for users to drill down through multiple pages.

Primary Navigation

For the primary navigation the concept was to use all of the categories and place them into an interactive top navigation that used progressive disclosure to provide users quick easy access to all areas of the site from any page. Also, the footer provided links to all pages an site areas.

Secondary Navigation

This part of the navigation is where I worked with my partners to string together pages of relevant information. This was done in two ways; by adding links and buttons to other pages around specific content areas of a page and by adding interactive highlighted cards at the bottom of each page to always provide a user with more details or supplementary info to what they just finished reading through and viewing.

Step 4
Efficiency & Scalability
Timeframe

From beginning to end the time frame to build this site was just over 3 months to have it done and live for an upcoming special event. Since I was not only leading this project, but I was also the sole person building the site, so being efficient with time was beyond important.

Reusable Layouts & Components

To test page layouts and narratives I created a bunch of different wireframe layouts. I later used these wireframes to build specific sections in the website that I later was able to reuse over and over again on pages throughout the site to make many different dynamic pages from a kit of prebuilt items. After building the different site sections and making them all responsive it took me only 2 work days to assemble the whole site.

Layout Testing

After creating the wireframe layouts I worked with multiple people on the marketing team, design team, and other steak holders to test out the layout options for those that worked, those that didn’t work, and the best ways to string them all together.

Production Line Implementation

After I built all of the wireframe layouts into the website as individual sections and laid out all of the pages as were planned in the layout testing phase, I created tasks based on graphics type and pages to define out the types of visual graphics needed to support the information in each section of the site. Then I gathered up everyone on the design and assigned those tasks to who I thought would be able to handle each set of graphics best.

Each designer was assigned an editor seat account to Webflow so then once they finished making their graphics they could drag and drop them to the designated image areas without needing to learn anything about how to use the Webflow designer tool. This allowed for a total of 4 designers, including myself, to fill out the entire site with graphics over a 2 week period.

This process proved to be great success and was some thing that I and other were able to replicate over the following year to make additional site updates.

Step 5
Content Management
CMS Settings

I spent a lot of time working with the Marketing team to make sure the content management system was set up in a way that made it very easy for them to not update that content but to also have specific settings within the system to allow them to make not only content within the site but also whole pages dynamic.

Featured Items

The website was one of the main areas for the company to promote events, news, blogs, press releases, and more. So it was very important to the Marketing team to be able to emphasize, move, and manipulate the display of content in the site on a regular basis without the need to request for help. I created special settings in the CMS for every content item to be dynamically connected to specific areas in the site and to generate dynamic pages with unique URLs that could be whatever they needed.

Dynamic Areas

These were areas through out the site shown in the images here that would get update throughout the site automatically after being updated by someone in the CMS.

Dynamic Pages

These pages were used for many reasons, but primarily for event promotions and sign ups. However, with many of these going on throughout the system I created which allowed them to spin up new pages with no need to request effort from anyone else was a game changer and saved them countless hours of work.