VMware Reimagined

2020

UX / UI

Complete website overhaul, including redesigning layout, content, icons, and illustrations.

Project Overview

‍

My role

In my role as the lead designer, I spearheaded the generation of initial concepts, facilitated cross-functional weekly team meetings, delivered presentations to leadership, coordinated and directed external design studios we collaborated with, and ensured the delivery of finalized assets for production.

Team: 1x Lead designer (me), 3x Content designer, 5x Researcher, 1x PM, 10x Frontend developers, 20x Backend developers, 4x Gotomedia Studio

Responsibilities : Design to Engineering Handoff

Timeline: 12 months

Website: vmware.com

‍

The Challenge

The existing website requires a refresh to reflect a contemporary design aesthetic that positions VMware as an industry frontrunner. Addressing key concerns such as accessibility, consistency, and establishing a clear hierarchy were imperative. A key goal for the redesigned homepage was to modernize its appearance, presenting a contemporary look and feel. This involved incorporating new imagery that better aligned with the messaging and tone. Additionally, the aim was to adopt a more visually appealing and modular grid-based layout, reducing reliance on text-heavy content for a more engaging and easily scannable user experience.

‍

The Solution

Design a sleek, contemporary interface employing a twelve-column grid system to ensure seamless navigation across devices, including mobile. The design should distinctly convey VMware's identity while showcasing the extensive range of offerings available to users.

‍

The Outcome

Bounce rate went down from 70% to 30%. This was a huge win! User engagement went up as users stayed longer on pages by a time increase of 2.5 minutes.

Here are a few things we are implementing:

1. New AEM core component structure

2. Updated design patterns for AEM components

3. 12-column grid system

4. 8pt grid system

5. New page layouts

6. Updating visual hierarchy of the page using the correct usage of h1-h6 tags

‍

Retrospective

By embracing a collaborative, user-centric, and iterative approach to design and development, we were able to create a functional and visually stunning website that resonates with our customers.

‍

Discovery

During the research phase of this redesign project, we conducted interviews with fifteen individuals to gain deeper insights into the challenges faced by our users.

Below are some of our findings:

1. The website looks very cluttered, and it is hard to find information

2. The website looks broken

3. Why is this website so wide on my screen

4. This site is ugly and looks like its from the 1990’s

5. This site is looks squished together with no room

‍

To gather more insights from our users, I conducted an online survey aimed at understanding their problems and pain points. I sought to identify aspects of our current experience that they appreciated, as well as areas where improvements could be made.

‍

20 questions | 8 participants

Goals: Understand the users perception of the following web elements:

1. Home page content blocks

2. Home page content

3. Navigation placement

4. Mobile experience

5. Visual design elements (colors, whitespace, typography, imagery)

‍

Here's a snapshot of a section of our Miro board from our Affinity Mapping session.

‍

‍

Competitive Analysis

Following data collection from interviews and surveys, I proceeded with a competitive analysis, assessing several of our competitors to ascertain their strengths and compare their features with the expectations of users surveyed online.

‍

‍

‍

‍

‍

‍

‍

Ideation

In this phase of the project, my focus shifts to generating various concepts informed by my research findings and competitive analysis.

‍

‍

‍

‍

Wireframe

Next, I began working on low-fidelity wireframes to define the website's layout and structure.

‍

‍

Mobile and Desktop Prototypes

I created several prototypes, enabling the team to assess the functionality, navigation, and usability of the desktop and mobile interface. These prototypes facilitated feedback gathering and iterative design improvements.

‍

High Fidelity Mock-up

Once I grasped the layout of the sections, I began crafting various designs. Here are a few iterations I worked on.

‍

Final Design

After numerous months of collaborative meetings and design iterations, this was the final product.

‍

Outcome

Using Crazy Egg, I was able to see how users were interacting with the new design. We wanted to see if our bounce rate would go down and if user engagement would go up.

Test: 8 days

Total number of visits 75,173

Total number of clicks 118,128

‍

‍