THE POWER TO NEVER MISS A MOMENT

Reimaging a new HTC flagship camera experience

Benchmarking: From idea to global launch in 6 months

M10-Camera-00

OVERVIEW

HTC's Creative Lab, the innovation hub behind HTC/VIVE, revamped the camera experience across all HTC products as part of a broader strategy for imaging (covering everything from camera and gallery to editing apps).

This case study highlights my approach, process, and results. A big shoutout to our teams in Seattle, Taiwan, and San Francisco for their incredible teamwork!

Opportunity
Goal:
Introduce a new experience to reinvent how people use smartphone cameras in their everyday lives.
 
Approach:
Redesign a new smartphone camera experience packed with features and capabilities to compete with professional DSLRs.
 
Timeline:
6 months (idea to production)
The Team
HTC's in-house Innovation Lab product development team in Seattle, San Francisco, and Taiwan.
 
My role: I led art direction, visual design, UI design, and prototyping and testing support.
I collaborated with product stakeholders worldwide to deliver a new, world-class camera experience for the HTC 10 flagship smartphone.
Key Results
• Released on millions of HTC devices, including HTC Desire 650, HTC U11, HTC U12
 
• Post-launch software experience integration into millions of Google Pixel devices (Google acquisition Sep 2017)
 
• Deliverables included a fresh visual design system

• Revamped feature architecture + flows, and prototypes
• Camera Design concepts for several tiers of mobile devices
 
KPI
User Engagement, Customer Satisfaction, Market Share, Retention Rate, Social Media Impact, and Sales Performance.
(These measures help us (HTC) understand how much people enjoy and use the new camera experience on HTC devices.)

01~
Discovery + research

AUDITS + INTERVIEWS

To better understand the kind of product HTC consumers want, we identified who they are and how the camera is used in their everyday lives. I partnered with UX and research peers to audit and interview our camera experience. The key findings are below.

IMG_7081

Performance

We learned users were annoyed by slow camera response. Introducing new cameras made navigation complex.


IMG_7080

Navigation

When switching camera modes, a full black overlay in the specialty cameras menu confused most, making them feel disconnected.

Through research, I discovered participants often mistaken iconography for other features due to the lack of definition and meaning.
IMG_7079

Disclosure

As the PRO Camera improved, we added more features. But too many menus cluttered the screen, making it hard to focus on what mattered.

MARKET ANALYSIS

To expand my knowledge, I learned the top cameras and editing apps for Android, iOS, and DSLRs. I documented their info architecture, interactions, and UI components, giving me a solid grasp of the camera market.

LR-02

VSCO
Mobile Standard

Superior presets - minimal UI and photo-editing tools empower users to share their unique perspectives. Exposure, temperature, and more allow users to quickly define the look and feel of mobile photography.

Superior presets - minimal UI and photo-editing tools empower users to share their unique perspectives. Exposure, temperature, and more allow users to quickly define the look and feel of mobile photography.

LR-00

Adobe Lightroom
Robust Features

Interaction models - gesture-friendly, drag and drop anywhere interface makes editing fun once you learn it. However, gestures like hold and drag interactions lack visibility but are powerful once you discover them.

Through research, I discovered participants often mistaken iconography for other features due to the lack of definition and meaning.
Competitors-UI-Analysis-00

Apple iOS
Friendly Interface

Discoverability - iOS’s core experience has stayed consistent over the years, and many iOS users are increasing in many countries. The UI is limiting in features— however, intuitive, familiar, easy to navigate, and fast activation.

THOUGHTS:

It's become common for products to live into a broader ecosystem of applications. As a designer, understanding this is vital to creating a scalable product.

02~
So what's it all mean?

 

Through discovery, it was clear that a 'next-generation' camera experience will need major improvements to set the standard for smartphone users. Understanding this—we directed our design efforts around the following mission statement:

Never miss a moment.

Focusing on key areas of the user experience, we needed to:

  • Simplify the entire information architecture.
  • Build an intuitive and learnable experience for everyone.
  • Build the fastest-performing camera for generations to come.
  • Reduce clutter by surfacing features and controls that empower people. 
  • Provide solutions to front/back cameras and photo/video navigation.
  • Optimize most used front-facing camera features and controls. 
  • Optimize visual design language and simplified verbiage.
  • Improve camera performance for quicker camera activation (zero latency).
  • Redesign and promote our PRO-Camera experience.

 

03~
Ideation + critique

DESIGN IDEATION

Guided by insights, we redefined the information architecture for each camera feature, tool, and setting. At the same time, card sorting exercises helped us organize the app structure, leading to a robust and universally understandable design. 

CameraGrid_01_061915-00@1x
CameraGrid_01_061915-01@1x
CameraGrid_01_061915-02@1x
CameraGrid_01_061915-04@1x

( SOME ARTIFACTS FROM BRAINSTORMING SESSIONS )

WIREFRAMING

Wireframing flows helped us focus on the camera app's essential functions. I supported UX by exploring different camera flows and providing UI ideas. Then, we moved to the prototyping phase, where we brought test builds of our ideas to users.

Note: Please reach out if you want to see the full information architecture and supporting artifacts.

Wires-00
Wires-01
Wires-02
Wires-03

04~
Testing + Iteration

PROTOTYPING

Prototyping allowed us to quickly get designs in front of users, iterate, and repeat, validating and challenging design decisions. While iterating, I worked in parallel with motion design to define and integrate the motion language system into prototypes.

IMG_0217@1x
IMG_7054@1x
IMG_7049@1x
IMG_7050@1x

( I FOUND IT INTERESTING THAT SOME USERS EXPECTED THE INTERFACE TO FUNCTION AND BE SIMILAR TO THAT OF COMPETITORS )

Main Camera Modules 04
Main_Camera_Photo_4x3
Main Camera w_ Indicators01
Main_Camera_Photo_16x9_Gallery
Main_Camera_Modules
MODES_Main-Camera-Front_alt2
Main_Camera_Options_Menu
MODES-Main-Camera-Back-01

( SOME CONCEPTS IN VARIOUS LAYOUTS WE TESTED WITH THE HELP OF USERS GLOBALLY )

UX TIP: JAKOBS LAW

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

05~
Visual Design Foundation

Sense-80-01
Introducing a sleek and lively design language for HTC Sense platform.

Our goal was to create a unified and delightful experience across the complete suite of HTC devices. As the lead visual designer for the Imaging Team (all things camera and gallery), I was responsible for UI, art direction, and the entire visual package of the camera application.

NOTE: The refreshed design language included an element-based color palette and a package that included an enhanced suite of iconography, interface components, imagery, and an updated motion language library. 

Sense8_Moodboard-Themes-03
Sense8_Moodboard-Themes-00
Sense8_Moodboard-Themes-01
Sense8_Moodboard-Themes-02

06~
Design Features

To speed up bug-bashing and quality, users (globally) had the opportunity to test pre-production camera builds; I collaborated closely with production design, motion design, and engineering partners to ensure that development accurately reflected my designs. 

M10-Dev
Layer+1
Layer+2
Layer+5
Layer+4
Layer+6
Layer+7
Layer+10
Layer+9
Layer+12
Layer+20
Layer+13
Layer+15
Layer+17
Layer+16
Layer+14
Layer+21
Layer+11

We immediately provided production builds to users to provide us with real-world feedback. Accelerating the development.

We immediately provided production builds to users to provide us with real-world feedback. Accelerating the development.

MAIN CAMERA.
SELFIE CAMERA.
GALLERY SHORTCUTS.
QUICKER ACTIVATION.

VIEWFINDER

Collaborating tirelessly with engineering, we give people what they want most: a faster-performing camera with access to their favorite camera modes.

Main-camera-00

( LEFT - VIDEO / RIGHT - CAMERA )

SELFIE CAMERA

Introduced new designs for Live Makeup Controls and Selfie Voice Commands.

I redesigned visual elements, including iconography and slider controls, and refined micro-interactions for a smoother experience. The HTC 10 features an OIS front-wide angle lens with automatic zoom, ensuring users can take advantage of sharp images no matter the lighting.

MODES-Main-Selfie

( SELFIE CAMERA WITH NEW UI AND CONTROLS )

SPECIALTY CAMERAS

Cameras and their respective settings are consolidated into a flyout menu.

Restructuring the information architecture and introducing a new visual design language, we improved the discoverability and usability of the new cameras.

M10-Camera-H-01

( SPECIALTY CAMERAS NESTED INSIDE FLYOUT MENU )

PANORAMA CAMERA

New design elements allow users to understand what to capture.

I introduced new visual elements to improve usability, like the horizontal preview bar with new vertical indicators, and refined micro-interactions (clearer affordances).

M10-Camera-Pandora-00

( PANORAMA CAMERA WITH NEW UI AND IN-CAMERA PREVIEW BAR )

PRO CAMERA

The new interface design gives complete control over adjustments without compromise.  

By redesigning the 'toolbox' UI, I could integrate professional-level camera capabilities, features, and controls into our camera application.

M10-Camera-Pro-00

( PRO CAMERA WITH NEW UI AND NEWLY DESIGNED FEATURES )

CAMERA SETTINGS

Cleaner, more organized information.

We've made settings information cleaner and more organized, placing it where users expect it to be. We've also established a scalable and clear hierarchy to help users easily understand and navigate new camera features and settings.

 

MODES-Main-Settings-00

( CAMERA SETTINGS WITH NEW UI )

FINAL THOUGHTS

We're celebrating a milestone, but have a long way to go. The redesign of the flagship camera app exemplifies the power of collaboration between consumers and the passionate people at HTC Innovations Lab who share one goal: to never miss a moment.


We're wholeheartedly proud of our team's efforts in delivering a new and fresh product to all of the HTC product lines while strengthening the bond with consumers. We know there's still much work to accomplish together, and that excites us.

Should you have any questions about my role or want to dive into data details, I’d be happy to tell their story.

Blessings.

☻2024. THIS SITE IS 4EVER UNDER CONSTRUCTION.

SAY WHATS UP ~ LINKEDIN

View