THE NEW HTC CAMERA EXP.

MY ROLES: ART DIRECTION,  VISUAL + UI DESIGN, PROTOTYPING + TESTING SUPPORT
M10-Camera-00

CHALLENGE:

The HTC Creative Lab design team accepted the challenge to reinvent how people use the smartphone camera in their everyday lives.

WHAT WE DID:

As the lead visual + UI designer on this project, I collaborated with product stakeholders globally to deliver a new, world-class camera experience for the HTC 10 flagship smartphone.

Deliverables included a fresh visual design language, revamped feature architecture + flows, and prototypes.

NOTE: The new camera experience has since released on millions of HTC devices, including HTC Desire 650, HTC U11, HTC U12, and recently integrated into millions of Google Pixel devices.

01——
discovery
+ research

/01 AUDIT + INTERVIEWS

 

To better understand the kind of product HTC users want, we identified who our users are and how the camera is used in their everyday lives. I partnered up with UX and research to conduct an entire audit of our camera experience, followed by user interviews— below are key findings:

latency

We discovered users were frustrated by sluggish camera perfomance. While exploring multiple camera domains, our navigation framework and backend code became complex.

navigation

When switching camera modes, a full black overlay in the specialty cameras menu confused a majority of users— causing them to feel removed from the camera application.
Through research, I discovered participants often mistaken iconography for other features due to the lack of definition and meaning.

disclosure

As the PRO Camera advanced, so did our features; layers of menus cluttered the interface, obstructing the viewfinder— competing with content that mattered most.
IMG_7081
IMG_7080
IMG_7079

/02 MARKET ANALYSIS

 

To expand my knowledge radius— I investigated the leading cameras and editing applications on the market in both Android, iOS, and DSLR cameras. Information architecture, common interaction models, and UI components were learned and documented— providing me with a baseline understanding of the entire camera market.

VS-02
VS-03
LR-00
LR-01
LR-02
Competitors-UI-Analysis-00
VSCO

standard for mobile photography

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

robust product features

Interactions
Lightroom's finger-friendly, drag anywhere interface makes editing fun once learned. However, gestures like hold + drag interactions lack visibility but powerful once discovered.
iOS

intuitive & friendly user interface

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

it's becoming common for products to live within a greater ecosystem of applications— as a designer, understanding this is vital in creating a scalable product.

02——
so what does it all mean?

 

It was apparent that a 'next-generation' camera experience will bring tremendous value to smartphone users globally. Understanding this— we directed our design efforts around the following mission statement:

Never miss a moment.

THIS IS HOW:

01. Re-organize the entire information architecture structure.
02. Build an intuitive and learnable experience for everyone.
03. Design the fastest performing camera for generations to come.

 

Other Recommendations:

  • Reduce clutter; surface features and controls that empower people. 
  • Surface front-facing camera features and optimize design controls
  • Provide solution to front/back camera + photo/video navigation
  • Optimize visual design languages and simplify verbiage.
  • Cleaner camera performance; quicker camera activation and zero latency.
  • Redesign PRO camera interface and architecture.

M10 Foundation Roadmap

RM-M10-02

 

03——
ideation + critique

/01 DESIGN IDEATION

 

Using research data and artifacts— we defined information architecture (individual camera features, tools, and settings). In parallel, card sorting exercises helped us think about the application structure— and instrumental in designing a robust architecture that could be universally understood. Below are some artifacts produced during our brainstorming sessions.

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

/02 WIREFRAMING

 

Wireframing allowed us to focus on the basic functionality of the camera application. At this stage, I was able to support UX and explore different camera flows and UI ideas. We then transition into the prototyping phase, and this is where it gets exciting— getting ideas in front of users!

NOTE: If you would like to see the full information architecture and supporting artifacts, please reach out.


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

04——
testing + iteration

Prototyping allowed us to quickly get designs in front of people, 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.

NOTE: We focused on usability— using motion as an affordance to guide and support users throughout the application.

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

i found it fascinating that users expected the interface to function a certain way— some even preferred it to perform the same as competitors.

Below are a handful of concepts we tested and iterated with the help of our users, globally. 

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

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.

jakobs law

05——
visual
design
foundation

Sense-80-01

we established a less intrusive and energetic design language for htc sense os.

Our goal is to create a unified and delightful experience across the complete suite of HTC devices. As the lead designer in my area, I was responsible for art direction and the entire visual package of the camera application.

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

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

06——
design
features

I collaborated closely with production, motion design, and engineering partners to make sure development would mirror key iterations of the camera design to a tee. 

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

we immediately provided production builds to users— providing us with real-world feedback and accelerating the implementation.

/01

VIEWFINDER

 

main camera, selfie, gallery shortcuts + quicker video & camera activation.

We worked tirelessly with engineering to give people what they wanted most— a faster performing camera with access to camera modes used most.

Main-camera-00
M10-Camera-H-00
/02

SELFIE

 

refreshed design for live makeup controls + voice commands.

The HTC 10 features an OIS front-wide angle lens with automatic zoom so all your images will always be laser-focused no matter the lighting conditions.

NOTE: I redesigned iconography, slider controls, and refined micro-interactions for a smoother experience.

/03

SPECIALTY CAMERAS

 

cameras & respected settings consolidated into a flyout menu.

By restructuring the information architecture and introducing a new visual design language— we were able to improve discoverability and usability.

M10-Camera-H-01
M10-Camera-Pandora-01
/04

PANORAMA

 

new design allows users to acquire the information they've just captured quickly.  

To improve usability, I introduced new visual cues such as the horizontal preview bar with new vertical indicators and refined micro-interactions (clearer affordances).

/05

PRO CAMERA UI

 

new design gives complete control of adjustments without compromise.

By redesigning the 'tool box' UI, I was able to pull professional level camera capabilities, features and controls into our camera application.

M10-Camera-Pro-00
MODES-Main-Settings-00
/06

GENERAL SETTINGS

 

Cleaner, well organized information.

Doing so established a scalable and more evident hierarchy that help users understand and navigate new camera experiences and respected settings.

Thanks, boo.

THANK YOU.