Envisioning the world’s first gaming smartphone
Razer, renowned for its deep-rooted presence in the gaming industry, boasts a fervent global fan base and a legacy of dominance with its cutting-edge peripherals, hardware, and gaming computers. Upon acquiring Nextbit, my previous employer, Razer embarked on an ambitious endeavor to penetrate a new market - the world of gaming smartphones.
During this period, advances in mobile gaming technology were accelerating and the global marketplace began to anticipate a surge of gaming smartphones. The evolution was palpable - graphics were improving, sound quality was advancing, battery life was extending, and refresh rates were enhancing. It was clear that the creation of the world's first gaming smartphone was imminent, and Razer was determined to pioneer this revolution.
The Challenge: A Vision of Mobile Gaming
The objective of our project was to establish a compelling visual identity for the Razer phone. This involved aligning multiple teams and stakeholders, effectively communicating, and refining ambiguous concepts and aesthetics.
Our team’s overarching goals were to establish a bold, innovative aesthetic that accurately reflected our brand and indicated its trajectory, ensure that the phone was perceived as a premium product crafted with exceptional attention to detail, and provide a seamlessly refined user experience. We wanted to deliver an exceptional product experience across all aspects – auditory, visual, and tactile.
Ideally, the phone would also authentically represent our brand's ideals, push the boundaries of cutting-edge design, and resonate with our passionate core audience. A significant challenge was that many team members, excluding myself and those acquired from Nextbit, had not previously developed a mobile phone.
Moreover, we had a tight timeline of nine months to complete the project from inception to launch - including the hardware and creation of the phone itself, in tandem with the software's development. As a design team, mainly myself with some support from management, we had a three-month window within this process to define the overall art direction and the camera application.
My Role
As the lead designer for the project I was responsible for defining the look and feel of the Razer phone software experience. I was the lead designer for the project from February to May 2017. I worked the assistance of one Creative Director and the CPO. I also collaborated with seven engineers, one QA lead, one PM and pitched to multiple stakeholders including the CEO. I coordinated with an internal hardware team as well to ensure hardware and software experiences suited each other. I saw the product through from start to finish, as the phone was released in November 2017.
The Problem
The problem would come to be defined as this: How might we align on a unified product vision and create a final product that epitomizes what a Razer smartphone experience should be?
This led to three primary questions that informed my design strategy:
• How are we perceived now?
• How do we want to be perceived?
• How can we align perceptions and quantify them into tangible aesthetic outcomes?
Research
Perception mapping exercise for Razer.
I initially explored Razer’s core identity is as a brand by combing through marketing channels, studying our fan base, observing the forms of our peripherals and hardware, and the aesthetic styling of our current software.
Next, I conducted interviews with our superusers, key reviewers, gaming industry experts, and more general users from our fanbase to get an idea of how we’re perceived both locally in America and globally, mainly focusing on markets in Asia where our fanbase was largest.
Another method I used could be called Perception Mapping. It’s similar to empathy mapping except instead of using it to find out more about the user themselves, I wanted to map out how users perceive Razer as a brand and how closely it maps to our own (idealized) self-perception.
Gleaning New Insights
Confirming my assumptions, it was true that many users had a similar notion of what they thought the Razer brand was all about. This came as no surprise to me since Razer had a strong initial brand identity from the start and had changed very little over its 10+ years of existence.
However I did uncover an interesting insight through my research – while users did have the same general concept about what Razer was all about, they had differing viewpoints about what visuals resonated with them and also which visuals were not matching up with what we hoped Razer could embody. This subset of visual viewpoints were later defined as:
1. Futuristic imagery
2. Alien imagery
3. Otherworldly, magical and scientific imagery
These three sub-groups that floated to the surface of Razer’s brand perception could serve as candidates for the final vibe we wanted to express. This highlighted the disconnect between what Razer’s current aesthetic with users’ ideal aesthetic expectations and preferences.
Approach
From this information, I decided to break my initial vision board into three separate ones that accurately represented what Razer was currently perceived as while simultaneously embodying the vibes and imagery of what users thought Razer could be. This would help us narrow down to a clearer vision that was more in-line with user expectations while simultaneously elevating our brand perception.
This effort paid off well as the team and I felt there was a stronger, clearer range of what we expected the phone’s vibe to look and feel like, helping us gain further alignment, confirmation, and confidence in our direction.
Each mood board had three elements – keywords, visuals and visual applications. Keywords were the terms we would use to “describe the vibe”. The visuals were aesthetic ideals we were shooting for. And the visual applications were aesthetic aspects that I could translate into the UI directly.
After iterations and refinements with the team and stakeholders, we narrowed down to a final mood board vision.
I was able to then incorporate the aesthetic into the overall UI of the phone – particularly the most forward-facing elements such as the boot animation, the wallpaper, and the lock screens.
Constraints
Soon enough I ran into an array of constraints, some of which compromised some of our initial vision. Time was now a crucial factor and a lot of the cool, edgy and futuristic concepts we wanted to pull off weren’t going to be technically feasible in the time we had remaining to implement. We also ran into direct and sudden changes from exec stakeholders regarding the vision, as orders came from the top to play it safe and use very basic and common stock UI. We were also short on staff which further made the time constraint more painful, as we didn’t have the staffing resources to create anything from scratch in the timeframe we had remaining.
A personal design constraint I had to work within was for the boot animation. It was my first time creating one but I learned a lot about how the file size of each animation frame, as well as the colors used, ended up increasing the final file size above an acceptable threshold. Also, the animation needed to loop and be chunked in a very specific interval – so defining that timing to engineering was crucial.
Despite these constraints, however, our team managed to pull through and work within them, doing an excellent job at staying somewhat true to our initial vision and stayed on-brand throughout implementation and quality assurance.
Iterations
I ended up working fast to ideate and refine concepts down to a final set of solutions that our team loved and moved forward with. We had initially considered pursuing a lighter palette to match a more “home/lifestyle” type of aesthetic, as marketing and key stakeholders thought about pursuing this route for more universal appeal. But they eventually decided against it and stuck to our brand’s dark, gritty styling since it would satisfy our users best.
Final Solution
After much work and collaboration, we came down to a final solution. 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.
