Noah Adams Tyshynski | UX Design

Version X Solutions

Overview

Project Type: Responsive Web Design | UX/UI Design

Roles: UX/UI Designer, Web Designer/Developer

Tools: Figma, Wordpress, Divi, ChatGPT

Summary: Earlier this year I had the opportunity to design and develop a responsive website for Version X Solutions to showcase their services to current and future clients. The goal of this project was to build a modern, engaging, and easy-to-digest website that reflects the business’ image and position in the industry. Working closely with the client, I utilized various tools such as Figma, Wordpress, Divi, and ChatGPT to bring their vision to life while keeping the core user experience at the forefront of the project.

View Website

The Process

Project Requirements

Build a modern, elegant, professional website that reflects a high-tech, reliable, trustworthy business.
Simplify and pare back existing content to help direct users to key conversion generating pages and to help reduce cognitive overload.
Ensure that the site is built on a familiar platform and with updateability and scalability in mind so that clients can make additions in the future.

Inspiration and Visual Identity

Going into this project, the client had a clear idea and vision for how they wanted their new site to function and look. Their primary goal was to incorporate story telling into the design and flow of the website to guide the user through the site and sell them on their services. That said, I looked at various websites across the A&E sector and amongst similar businesses to VXS to gain inspiration for my designs. This in combination with browsing various web design libraries aided the creation of VXS’ new visual identity.

Key Elements

Modern, sophisticated, professional
Dark aesthetic
Interactive storytelling
Subtle, engaging motion

Initial Design

With my inspiration gathered, I took to Figma to begin designing mid-fi wireframes which utilized the existing content and basic structure of VXS’ old site.

Aimed to highlight the company’s interactive Power BI demo which showcases their capabilities.
Incorporate story telling elements both visually and functionally throughout the homepage to guide and inform users.
Focus on a modern and minimal design.

Feedback and Revisions
After submitting the initial design to the client they were overwhelmingly happy but had a few minor requests for edits and revisions.

Header Image

Changed to a different image.
Incorporated motion to create a more engaging, premium feel for the landing page.

Before

After

Testimonial Section

Removed the star ratings because they didn’t align with the actual testimonials VXS had already acquired.
Simplified the layout to avoid needing to source and request permission for photos which wouldn’t add much value.

Before

After

Solution

Final Design

With all revisions complete, I was ready to transform my Figma designs into a live website. For this project, the client requested that the website be built on Wordpress, which at the time, was completely unfamiliar to me. This posed a real challenge for me but I knew it would be a great opportunity to learn a new tool and help bridge the gap between my design and development skills. Utilizing the Divi theme builder which gave me a blank canvas to replicate my Figma design, I used a combination of customizable no-code modules and elements, as well as custom HTML and CSS snippets to build out the final site.

Key Elements Include:

Fully responsive design across all viewports
Smooth and subtle motion design that combines automated and interactive elements
Functional AJAX filtering menu for blog posts that allows for dynamic content updates without a full page reload

You can visit the live website here.

Key Learnings

Working with Wordpress
Before starting this project, I had no prior experience using Wordpress. Looking back at my approach to this project, I’m happy with how I went about it. That is, utilizing a powerful, familiar design tool like Figma to bring my vision to reality as fast and easy as possible, and then replicating that design in Wordpress/Divi. One of the biggest frustrations I’ve had in the past when building websites is the limitation placed on design freedom when using no-code web builders. At a base level, using the default Wordpress theme has those same limitations, but utilizing blank-slate theme builders like Divi opened up new opportunities. Designing first, and learning how to build second allowed me to realize the full potential for VXS’ website and challenge myself to learn a new skill to a higher level compared to if I had taken the “easy” route of designing the website in Wordpress using my very limited knowledge of the platform and conforming to its design limitations. All that said, learning Wordpress and Divi on my own wasn’t easy, but thankfully I had my own Wordpress/Divi experts right at my fingertips, i.e., ChatGPT and Claude.

Utilizing AI
AI chat tools played a huge role in the success of this project. While the Divi theme offers a lot of customizability in terms of design freedom and functionality, it only goes so far without having to use custom code. To help recreate the fully custom design I built in Figma, I utilized ChatGPT to inquire about custom solutions to any roadblocks I was facing with the limited functionality of Wordpress and Divi. Taking the suggestions from ChatGPT, I would generate prompts for custom code solutions from Claude, which has a built in visual preview of the custom code it generates. This was a super helpful way to quickly iterate, debug, and preview custom code, whether it was for CSS visuals or more complex backend functionality.

Additionally, when the site was fully built out and ready to be deployed to overwrite the old site, I used ChatGPT to give me a comprehensive guide on everything that I needed to prepare and check in terms of security, SEO, data transfer, and backups. As a designer, I would have never thought of a lot of the things it taught me and I now feel much more confident in my knowledge of the interconnection between design and development.

What Could I Have Done Differently?

User Testing

If it was within the scope of this project, I would have liked to conduct user testing with the final design. While the client was happy with the final product, it would have been advantageous to conduct user testing to confirm that my design was effective and user friendly and would have granted the ability to optimize any areas that we’re lacking.