Background

Our client needed iPad digital demo tools to show off their latest smart devices and corresponding smartphone app. I used visual sitemaps to help deliver an easy-to-use, informative experience with pleasing interactions.

The Project

Philips Digital Demo Tools

The Connected Portfolio describes the “smart” product selection available from our client. Our client makes smart brushes that connect to smartphones, collecting data to help advise the customer to develop better habits.

We were tasked with making a demo tool that salespeople could use to demonstrate the features from the app and smart brush.

My role

I was a UX designer on a team with digital developers and graphic designers. I mocked up animations and contributed to the sitemaps and visual work.

Challenges

This app is a sales tool for smart devices, with content divided by each device (since each brush has unique features and is marketed independently).

The client needed an easy-to-use solution for salespeople to get relevant details about one connected device, in a way that the salesperson could go through the narrative chronologically, or shuffle around if the customer had specific questions.

Solutions

As well as putting together in-depth high-level sitemaps, we went into detail on subpages, using screenshots from the connected app to demonstrate what would be shown on each page.

Primary navigation items were placed in natural spots for the thumbs to access, with clear labels and lots of space to tap. Items were laid out so that the salesperson could click in an order, or explore at leisure without getting lost.

Further in, other items that could be interacted with were obvious, or pointed out with other visual/text cues.

I helped provide inspiration from other apps on animations we could use here, and additionally provided help with producing assets to make the animations possible.

This included storyboarding what the default states of animations looked like, before options were tapped.