DataVantage Site Redesign
Bringing a legacy brand from the mainframe space into the modern era of web design
Url: https://datavantage.com/
Research: Stakeholder Interviews, Competitive Analysis
Tools: Figma, Figjam, Wordpress
Executive Summary
Problem Space
DataVantage has a storied history, having developed the first multi-dimensional application development testing and data management software tools for mainframe computers for IBM in the 1970’s. To this day, most data management software for mainframe applications are derived from these tools. DataVantage reached out to us seeking a new website, as their existing site was outdated and no longer generating new business leads. We were also asked to redesign their logo and style guide.
Examples of the existing DataVantage site, showing a dated appearance and page layouts that aren’t conducive to generating new business
Our Approach
Due to a limited budget and short turnaround time, we elected to design the website using a browser-based block builder for Wordpress called GeneratePress, which has a good reputation for ease of implementation, site speed and security, with light customization applied as needed.
Design
Overall Styling
After careful consideration and input from key DataVantage stakeholders, we elected to pursue a clean, conservative design philosophy centered around a small color palette of blues and greens, iconography and fonts to support content, and the sparing use of photos, mostly of people. Our graphic designer also crafted a new logo and style guide for DataVantage.
Component Library
In order to meet the strict deadlines for this project, I chose to build a component library in Figma of all of the blocks offered by Generatepress. This was done during the research phase to prevent any slow-down during the design phase. The benefit of this component library is that it allowed me to quickly slot different blocks into the wireframes, making the design phase extremely fast. As the blocks were styled by our graphic designer, those changes would be automatically applied to all of the blocks in the wireframes, making the transition from low-fidelity to high-fidelity extremely efficient.
Build Process
The process of building the site in Wordpress was just as efficient as in wireframing. The blocks in the Figma component library were named after their respective block in Generatepress, so building each page was as easy as matching the names of each block - almost like building a Lego set. Our graphic designer uploaded all infographics and other art assets and our developer applied global site styling and ensured proper mobile functionality.
A comparison of the low-fidelity wireframe, high-fidelity wireframe, and final homepage of the DataVantage site
Results
The final DataVantage site went live on time and under budget, and our clients were thrilled with the results. The revamped site was highlighted by TechChannel, a mainframe-focused tech blog and has lead to numerous new business leads for DataVantage. The modular nature of the site makes it easy to update and maintain and the DataVantage webmaster was thoroughly trained on how to make changes as they see fit.