Interactive Catalog Concept Development

Created Dell EMC free eLearning courses and structured education training user experience
Go to Market (GTM) & UX/UI team | My role: lead visual designer
View the live site

Launch image

Gurram

People and color selection

Gurram
Gurram

Video screen

Gurram

Initially the user is shown an opening screen with an image. The title appears after a couple seconds and then the remain content.

On the desktop version the image would be replaced with a short, subtle videos is played in the background.

In Phase One the user is only shown one guided path which is lead by industry trends.

Opening screen

After the title appears, followed by the introduction copy and the industry trend icon the user is able to start their guided journey by clicking on the screen.

A top navigation bar also appears, if the user already knows what they are looking for they may click on the top to activate a drop down menu.

Gurram
Gurram

Industry trend selection

Once the user has selected to view the guided path the industry trend image shifts upwards and below a series of tiles are presented to the user to select from. Scrolling up or down will display more topics.

Each topic is colour coded and this colour will be followed through to the next level of navigation.

Product selection

By selecting a topic the top image an icon changes to reflect the selection made. Below the image bar the user is presented with a series of tiles for each product within this range from which to choose.

Gurram
Gurram

Product over view

Once the user has selected which product they wish to view the top image changes to the product image. Content is displayed below as a tile, from which the user can click on the CTA, in this case a Register button. The play button represents a later phase, in which the option to view a intro video will be added. The user can navigate back through the tool using the back arrow at the top. On the desktop version this can be accompanied by the word “back”

Navigation

By clicking on the quick navigation drop down menu the user is shown a list of options available, each divided into the respective Industry trends which they can quickly scroll through.

Discussion point:

In Phase One, this menu navigation could be present from the opening screen as it will be divided by category. From Phase two the menu should be available once the learning path is chosen as the sub division may vary.

Gurram

Dell EMC find training results page

Gurram

Once the call to action (CTA) is clicked the user is guided to the relevant Dell EMC page.

Alternative navigation

Gurram

This series of images shows an alternative navigation method. Instead of a top menu bar, the information can be accessed by clicking on the central menu tab. This tab then drops down revealing each category. By clicking on a category the buttons then slide down to reveal a list available in the category.

More Projects