Forging a seamless and intuitive camera experience
In 2017, Razer stepped into an ambitious venture - the creation of the world's first gaming smartphone. Among my responsibilities was not only to oversee the overall art direction, but also to design a vital element – the camera app.
The camera app, often seen as a yardstick of a phone's quality, had to be exceptional. It was crucial in shaping user perception and influencing the phone's success. User expectations were high; they wanted a top-tier camera with a user-friendly experience that could capture anything, even night shots. Despite facing challenges such as limited production capacity, a tight schedule, and stiff competition from tech giants like Apple, Google, and Huawei, we were undeterred. We knew we had to outdo ourselves and punch above our weight to realize our vision.
My Role
As the lead designer for the project, I was responsible for designing the entire application in approximately four months, from February to May 2017. I worked directly with five engineers, two QA specialists, and one PM and pitched to multiple stakeholders including the CEO.
Challenges
We faced significant challenges - a tight schedule, high expectations, constrained resources, limited team size, and stiff competition. Furthermore, the fact that none of us had prior experience in developing a camera app added to the complexity. In essence, this project required our full dedication right from the beginning.Our company had a short span of nine months to develop the app from scratch. The tasks of design, implementation, and quality assurance were concurrently executed while the device, including the camera and its lenses, was under construction.
Problem
Our challenge was internal and centered on delivering a product within a specific timeline. Our problem statement was:
How can we build a robust, functional, and high-quality camera app that delivers on user needs and expectations compared to our competition?
Fortunately, we weren't starting from scratch - our target product had well-established user expectations and interaction models. With this in mind, we decided to take a calculated risk and design a camera app with minimal prior user research, due to time constraints.
Process
Understanding our limitations, we strategically utilized pre-existing resources and mental models for both technical execution and design. This choice proved beneficial in the long run. The team agreed from the outset to prioritize getting the basics right — capturing quality photos and videos while ensuring a refined user experience. Any additional features would be considered a bonus.
Kickoff: Goals and Outcomes
Initially, our team identified the app's objectives. The engineering team focused on the technical aspects, while I devised design goals that encapsulate an ideal camera app experience.
Design Goals
• UX: Prompt and seamless experience
• Product: User-friendly, minimal friction points, intuitive use
• Interaction: Attractive and purposeful interactions
• Visual: Incorporate Razer brand styling into the interface
High-Level Goals
• Develop a competitive Android camera application
• Adhere to the tight deadline (9 months from initiation to launch)
• Fulfill all P0 and P1 requirements (photo, video, burst mode, and slow-mo modes)
• Garner generally favorable feedback from media outlets and in the Google Play Store
Research
Despite the tight deadline, I chose to invest some time in studying user needs and expectations from various perspectives, such as:
• Ergonomic factors: Right vs. Left hand, landscape and portrait orientation, large vs. small hands, single-hand usage.
• Environmental context: Day or night? Screen glare? On the move? Bright light? Dark room? Cold or hot weather?
• Demographic usage patterns: our main demographic (male, gamer, 12-40) and edge demographic (old vs young?)
• Comparative analysis: our competitors at the time - Pixel, iPhone, Huawei, Samsung, etc.
• Other factors: trends in camera app design, accessory and attachment possibilities, standard user interface patterns for camera apps, concepts borrowed from physical cameras (DSLR, Polaroid, Digital)
Sketching
From here I was armed with a stronger grasp on the breadth of possibility and how much creative room I had to work within. I began sketching out layouts, interaction models, user maps and more.
Sketches and whiteboard concepts were discussed with the team and then upon refinement, directly translated into hi‐fidelity design comps.
Since I was working with many existing design patterns, it was a logical step to move straight into more hi‐fidelity types of wireframes. Doing this had the added benefit of helping communicate the aesthetic direction we wanted to go in as a team, and aided in helping key stakeholders be able to more accurately imagine what the end-product may be like.
Wireframes
In this phase, I engaged in a series of requirements gathering, consensus building, and approvals to further refine the overall layout. Each layout presented unique considerations around ergonomics, visibility, and alignment with familiar or expected usage patterns. The initial aim was to explore a broad range of layout options in both horizontal and landscape formats, then refine the specifics from there. Selecting a layout - even a preliminary one - was emphasized due to its role in enabling engineers to kick-start their work and keep up with future deadlines.
Additionally, a comprehensive user flow was developed to ensure every screen, state, and edge case was taken into account. Below is a small portion of the total flow.
Final Solution
Upon finalizing the user flow of the entire application and securing approval for the layout direction and aesthetics, I transitioned towards crafting high-fidelity versions of all the screens. And after much work and collaboration, we came down to a final solution.
Prototyping
Prototyping proved invaluable for obtaining significant feedback from the team, gaining consensus from stakeholders, and securing approval from senior management. Over time, I developed prototypes to facilitate early feedback through preliminary usability tests. This coincided with the availability of a functional version of the phone, equipped with a moderately operational camera application due to early user interface deliveries. This advancement allowed all subsequent prototyping to be conducted directly on the device.
Despite not having a functional device initially, I was able to progress by creating and sharing animated interfaces and user flows that accurately depicted the intended features and experiences. Ultimately, a working prototype was created for immediate guerrilla testing and internal use, ensuring a comprehensive design process.
Launch & Feedback
After prepping assets to handoff to engineering, my job wasn’t finished yet, as I continuously monitored and assured proper execution via constant design QA to ensure everything matched the designs and the intended vision so nothing got lost in translation.
I created visual assets for the Google Play Store listing and we launched the app successfully with the device in November 2017.
User feedback for the Razer phone was predominantly positive, demonstrating appreciation for the camera application's functionality and user-friendly interface. Our dedicated customer base expressed surprise at our small team's ability to deliver high-quality content.However, we did receive some negative feedback that was primarily centered on hardware performance issues. While we were aware of certain technical glitches and bugs, their significant impact on the user experience was a concern. Despite these challenges, we take pride in our accomplishments and recognize the opportunity for further enhancements in our product.
Reflection
Reflecting on the project, there were significant achievements and areas for improvement.
Achievements
• The project resulted in a competitive Android camera application that was favorably compared with top-tier devices.
• We accomplished the majority of our primary objectives, delivering a functional camera capable of capturing photos, videos and bursts.
• From a software perspective, the user experience was commendable.
Areas for Improvement
• The technical bugs and limitations in our product led to some negative feedback in the reviews.
• We fell short in providing a minimal feature set, omitting key functionalities such as photo filters, slow-motion video, and portrait mode.
• Consequently, the overall user experience did not meet our high standards.
Key Learnings
Embrace Flexibility and Adaptability
The design process demanded flexibility and adaptability. Advocating for quality while being open to alternatives ensured a functional, user-centric design. This balance was struck due to our team's collaborative, problem-focused approach.
Utilize Existing Resources
Our efficient approach was to create a basic version first, then refine, building on pre-existing ideas. Technical compromises did occur, indicating the need for careful consideration when using this method.
Acknowledge the Influence of Reviewers
Reviewers' feedback significantly influenced public opinion. Their keen perception and attention to detail emphasized the need for meticulousness in all aspects of product development.
Conclusion
As a design team, our primary focus in the upcoming version of the Camera app is to enhance the performance aspects of the hardware. We also aim to incorporate new features, adapt to system updates, and accommodate new hardware functionalities planned for the next device, the Razer Phone 2.This project provided me with a valuable opportunity to work on a fast-paced, innovative product and team. The experience enriched my understanding and skills, and I am eager to apply these lessons to future endeavors.
