The Challenge

Hewlett-Packard Computer hardware company (HP) offers a wide variety of computer hardware the ranges in different sizes. The module will occupy an area of a product page but will not service as a main resource of information about the product. The module will only showcase key features and will not showcase the hardware's specs for internal details. The key features that must be incorporated in the module is (1) the ability to interactive with the product in 360˚ and (2) nightlight key features of the product.

Goals

  • 1. The module needs to be universal to be placed on any product page.
  • 2. There needs to be enough space to showcase any product.
  • 3. Incorporate a display to showcase key features for both desktop and mobile.
  • 4. Incorporate the current HP design system.



UI Patterns

Below are a few UI patterns I'd like to show you and the reasoning behind the design decision.


First Visit

1. To indicate that the module can be moved in any 360˚ direction, a 360˚ icon would appear as an overlay and would disappear once the user interacted with the module. To also ensure that the user is aware that the left navigation is interactive, the first link is active


Controlling The Space

1. If the user wants to focus on only the product and not the feature, unselecting the active link will remove the associated text and free up space to interact with the product.


2. To ensure users do not zoom too far out or too far in the 360˚ demo the zoom controls (on the far right) will become disabled when the user reaches a certain point of view.


Anchor Points

1. Utilizing anchor points solved my issue in figuring out how to merge the designs as one. When the user clicks a feature, from the list of links on the right, the 360˚ demo will move to a fixed point where the user can see where the feature is on the product. If the user moves the demo the link will deactivate and the user will be free to interact fully with the demo.


Movement

On desktop, Users are able to control the 360˚ using there mouse or a trackpad.


Mobile Verison

When designing for the mobile version of this module, I converted the navigation for the product features into an accordion because of the limited space available. Having the accordion view also kept the information together and the anchor link feature could still be showcased on mobile.

Users will have all of the same functionality as the desktop with the addition to use your fingers on the screen to zoom in and out, similar to if the user was using a trackpad for desktop.