THE NEW HTC CAMERA EXP.
MY ROLES: ART DIRECTION, VISUAL + UI DESIGN, PROTOTYPING + TESTING SUPPORT
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.
/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.
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 become 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
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.
/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.
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.
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.
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
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.
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.
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.
/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.
/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.
/06
GENERAL SETTINGS
Cleaner, more organized information where users expect it to be.
Doing so established a scalable and more evident hierarchy that helps users understand and navigate new camera experiences and respected settings.