Loading...

Dell Canvas

Dell's answer to the Wacom Cintiq
Dell Canvas First Connect App Homepage
  • Role: Visual Design Lead
  • Released: July 2017
  • Client: Dell

Challenge

Create a visual language for a groundbreaking new product: the Dell Canvas. Work with product teams and engineers to create palettes, onboarding systems and marketing videos.

Solution

Work with multiple stake-holders to keep messaging on track and functionality feasable. Incorporate the Dell Canvas into my personal workstation to gain first-hand experience and user perspective. Deliver final comps and spec sheets to development team. Conduxt UX reviews to refine.

First Connect Experience

The First Connect Experience is an app that runs when the user first turns on their Dell Canvas. It is a guide through new hardware, showcasing software highlights along the way. Our first task was decide the ovearll structure of the experience. Whiteboarding sessions led us to MVP and stretch goals, and helped to formulate content.

One of the challenges of the FCE app was a lack of photography budget. The app was designed around high-quality full-screen imagery, and it had to be obtained at no extra cost. We were barred from taking our own photos on set, so our options were limited. The logical course of action was to take stills from the Intro and Explore videos and edit them ourselves. I was provided the raw footage, and exported the stills using After Effects. The raw imagery was brought into Photoshop and heavily edited to improve image quality. The solution was cost effective and fostered continuity between the in-product vidoes and the onboarding and settings app.

HOMEPAGE REDESIGN

Dell BIOS Landing Page Original

Dell BIOS Landing Page Explorations

The original homepage design had been set and approved for months (far left). A few weeks before launch, the request came down to further celebrate the hardware and accessories. New product photography had recently become available, and I was eager to experiment with alternative layouts. New device angles in hand, I began to play with scale and location. Once the new layout was set, a screenfill from the comic was added to maintain continuity with the embedded videos.

MODAL REDESIGN

Dell BIOS Landing Page Original

Dell BIOS Landing Page Explorations

This modal is initiated when a user selects an app they've yet to download. The original modal featured an eleven-word link that was competing for call-to-action. The redesign is glanceable, allowing the user to skim or even skip the slimmed-down descriptive content, if desired, and go directly to the bright blue "Get Applications" button.

The previous design featured a bright blue "OK" button that immedietly grabbed your attention, an unintended and undesired call-to-action. To clarify the action itself, I made the switch to "Close." To clarify the call-to-action, the button was switched from the primary to the more subtle secondary style. A user would also expect an "x" in the top right corner of a modal, a feature I suggested and was quickly added.

Universal Windows App

Dell Canvas Connect is the Universal Windows App for the Dell Canvas. It's the user's hub for all things Dell Canvas, including links to settings and software downloads.

My role in the UWP app project was mostly focused on visual design, increasing the attractiveness of marketing content and inviting the user to interact with specialized settings.

Canvas Icon Family

Creating this icon family was a team effort. I created the Canvas App icon months before-hand, and the rest of the family was created in its image. I collaborated with EDG icon guru Jessica Nelson-Morris on a few rounds of explorations. Our final selections were approved by project and program leads. Implementation took many rounds, working with closely with development to ensure Windows Store app requirements were met and exceeded.

Palettes

Palettes create a line of communicate directly from the user to the OS, allowing users to use and create shortcuts to their most loved and utilized features. The UX designer laid out the functionality in wireframes, and I was tasked with the creation of a visual treatment. Inspired by the subtle, inobtrusive colors of Photoshop. I chose a monochromatic grey color scheme. Dell blue serves as a bright accent for active features.

IN-APP VIDEO PRODUCTION

The Dell Canvas FCE app contained two videos: a product intro and a hardware/software overview. The Dell Blue team, Dell's internal video production team, was tasked with creating the videos. My role was to represent the Dell Experience Design group as the client, acting as the subject matter expert for the First Connect and other Canvas apps.

During the prelim meetings, I advised on the overall flow and creative vision of the videos. I was consulted on software features and functionality. We collaborated on the best methods to integrate the two videos into the FCE app experience. On-set, I provided software support and functionality feedback.

MARKETING VIDEO

EXPLORE VIDEO