HTC One M8 Global Digital Product Launch

The HTC One M8 was the company’s flagship product in early 2015. As Creative Director of the Global Digital Creative Team, we covered the digital product launch which included a reimagined product experience optimized for desktop and mobile. Included a UX and Visual design for a main product page, six feature pages, supporting digital channels, and creating original video and photography for global use. Below is the creative process that took place in a condensed 3 month time period. These visuals are just a sample of what was created throughout each step.

Check out a tour of the full desktop experience…

Creative Team

  • Marie Thacker, Creative Director
  • Mathew Epstein, Art Director
  • Ken Ohnemus, Principal UX Architect
  • David Hoang, UX Design Lead
  • Landon Larsen, UX Designer
  • Tony Yates, Sr Brand Designer
  • Mikelle Morrison, Sr Brand Designer
  • Sam Swenson, Content Strategy
  • Tim Engle, Photographer

Brainstorming Work Sessions

Started with a few collaborative brainstorming sessions to introduce the project. Brainstorming sessions are a combination of sharing inspiration examples from individual research, whiteboarding interactions and content ideas, and putting together a moodboard. Action item out of these sessions are to put ideas on paper with pen & paper sketches (no digital work yet).

inspiration

Quick ‘n’ Dirty Sketches

Review a variety of sketches, super rough layouts and interaction ideas. Then more brainstorming. I then articulated a few directions for designs to explore. Next item move to quick ‘n’ dirty digital concepts and wireframes.

htc-sketches

Lofi Concept Wireframes

Iterate on a variety of digital concepts in lofi wireframes. Very loose concepts that we can test and get consensus on a direction to focus on.

lofiwires

Hifi Concept Wireframes

Based on concept sketches and brainstorming sessions, put together some hi fidelity wireframes for first round of testing.

hifiwires

User Testing Round 1

Testing rough concepts and wireframes for confirmation on singular direction to focus on. Sessions are 1:1 sessions with participants that hit our desired demographic.

Content Strategy

Worked closely with Sr. Content Strategist and UX Architect to craft the content strategy. Some early mapping and draft copy for testing.

content

Photo and Video Shoot

Conducted a 3-day shoot to create photography and video assets for use in the digital launch, as well as usage company-wide globally for marketing efforts. My team put together the entire concept, including detailed production brief and shot list with storyboards. See below, along with select sample of images. Came away with 10,000 shots and approx 300 final selects.

htc-photoshoot
photoshoot

Production Brief & Storyboards

Design Iterations

Taking data and findings from User Research, we iterate rapidly internally as I work closely with art director and designers to fine tune our concepts. At this stage we also begin framing up and sketching out the other pages based on our chosen concept direction. Deliverables out of this phase are multiple variants on UI, layout, and messaging for the next round of testing. We also begin to frame up and test mobile designs

uivariants
compvariants

Testing copy placed in design comps for proper context.

User Testing Round 2

Another round of 1:1 User Testing for final input and user feedback on our decided direction. Out of this round we gain more validation on previous feedback, as well as new input around UI solutions and messaging/copywriting. Also getting feedback on specific imagery from the photoshoot to find what resonates best with our target demo.

Finalize Creative & Redline for Dev Handoff

Taking input from last round of testing, refine and finalize all designs and copy. Final step is to clean up files and prep for dev handoff. This involved cleaning up PSD layers/groups, friendly naming, and adding specific redlines around layout and interactions. Final copy is placed in a clean doc to be send for localization.

ProductDetail

Final copy doc to be sent for localization.

Bug Fixes & Launch

Work closely with dev during implementation to assist and support with any issues or questions. Provide fixes immediately as needed. Below are tours of the near complete pages prepped for launch.

Pre-Launch QA, Feature Experience

Pre-Launch QA, Product Experience

Post-Launch Validation Testing

After launch, we always do follow up testing on the live property, to further optimize, as well as address any issues we see in analytics the weeks following launch. Below are some user sessions we recorded where users were navigating and talking through their experience (sorry no audio).

User Testing Video Capture, Andrea, Female 24

Done. Thank you!