The HTC Creative Lab design team accepted the challenge to reinvent how people use the smartphone camera in their everyday lives.
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.
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:
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.
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:
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:
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.
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.
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.
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.
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 worked tirelessly with engineering to give people what they wanted most— a faster performing camera with access to camera modes used most.
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.
By restructuring the information architecture and introducing a new visual design language— we were able to improve discoverability and usability.
To improve usability, I introduced new visual cues such as the horizontal preview bar with new vertical indicators and refined micro-interactions (clearer affordances).
By redesigning the 'tool box' UI, I was able to pull professional level camera capabilities, features and controls into our camera application.
Doing so established a scalable and more evident hierarchy that helps users understand and navigate new camera experiences and respected settings.