The beginning
Hypernode is a company providing advanced tools to manage your eCommerce hosting with Magento, Shopware, WooCommerce, and others applications.
We wanted to refresh the website, make brand more consistent and prepare key pages for international market. Main focus was on creating UX audit of the homepage, improving UX of the navigation and key pages, and modernize brand identity.
Drag
Redesign
After running an audit and consulting with key stakeholders I prepared refreshed and categorized pages.
Homepage is the most visited page for our customers so we started with it. Check the summary of the homepage audit with the key points below.
Homepage is the most visited page for our customers so we started with it. Check the summary of the homepage audit with the key points below.
Before
1
Hierarchy & Clarity
Potential client lands on the homepage, where almost half of the screen is covered with unclear graphic. Moreover orange details across whole screen make it harder to focus and lead the client to the right point - CTA no longer stands out from the crowd.
2
Familiarity
At this point user doesn't know yet what is "Hypernode". Is it a company, application, server name or shop? Moreover, it lacks interactivity because of showing just 7 static logo's.
3
Cognitive load
Huge range of different colors, emojis, fonts, images styles and backgrounds overwhelms the user undoubtedly. And the most important text is the least visible so we are just skipping core values of the product.
4
User interaction & social proof
By showing one by one testimonial every 5s we are taking the interactivity away from the user, moreover, most of people just scroll through this section not realizing there are more reviews.
5
Outdated content
Videos are great, they are catching more attention and hold your focus longer, requiring less cognitive load. Although, make sure it's up-to-date with company's core values, people, and places.
6
Professional and modern look
Last but not least, UI and UX Content. Across the website we have 3 different background color plus background image, different icons and isometric images. There is no clear mission or core values of the company. Moreover, there were only 3 CTAs from top to bottom, where one of those was just "read more".
After
Keeping internationality in the back of my head I focused along UX improvements on refreshing the look and showing off the professionalism of the company.
1
Hierarchy & Clarity
Whole section fits in a screen height so you can easily learn what is Hypernode and what is the offer. Background has changed from graphic to slow, topic-related video. Also the orange is now reserved for CTAs.
2
Hidden content
For users who want to explore topic even further I added horizontal sections with more details. Also internal links and more topical content improves SEO.
3
Key-points
I kept key points similar, but with more concise, easier to understand content. This way user learns faster but can proceed to next pages to explore details. Also added CTA to convert after first two sections, where we already know if the product is something we might need.
4
Multiple CTA
I added new sections "stunts", where we smoothly nudge potential clients to stay up-to-date with our product. We didn't have "Join newsletter" sections before so couldn't validate how many potential customers lost interest along the way.
5
Build trust
For building company's trust and reliability, and to highlight core values such as servers' security, performance and speed, I added ISO certificates. Social proof and trust don't have to rely solely on testimonials.
6
User interaction & social proof
I increased testimonials from 1 to 3 and make it a swipeable carousel so user can interact and check more reviews in a shorter time. Similarly trusted companies are moving slightly from right to left so we can fit more and add a bit of life to the website.
7
Customer case
There is another new section - Customer Cases. Short stories of webshops and their performance before and after switching to Hypernode platform. It shows tangible results and real cases we work on.
8
Consistency
No more background image, instead, we separate main (white) content with highlights (blue) sections like testimonials and customer cases. Thanks to easy animations and interactions we brought website to live and customers can stay longer, which impact SEO positively.
Let the fun begin
After successful homepage we were working on over 20 other pages analogically. Below you can see few of them before and after the redesign:).
Contact before and after
Key changes: Added support numbers for NL and UK customers (main groups), different form dedicated for different customers - agencies and merchants, plus frequently asked questions to increase possibility of educating customers before calling support.
Prices before and after
Key changes: Added filters and CTA always visible on the screen on the left side for easier navigation. Added badges for monthly / yearly plans as well as "popular" and "recommended" plans for social proof.
Blog before and after
Key changes: Cleaning up the header, limiting width of article content to 700px (recommended width for long reads), added static CTA and Table of Contents always visible on the screen to see the progress of your read.
Do you have an idea?
I will find the time, attention, and passion for you. Get in touch and let's create something wonderful together!