Raiju Controllers Companion App

PERSONALIZED PS4 EXPERIENCE

CONTEXT

After Sony allowed us to build the first licensed wireless PS4 controller, we had to deliver the user with the premium experience that was expected from a Razer product. Here is a look at how we handled the challenge and built up the experience.

WHO ARE THE USERS?

  • Competitive gamers
  • Multiplateforme Gamers
  • 16-26 y/o

A large population of the first Raiju iteration owners was anxious to see the evolution of the device. We also had to convince a more sceptic population, not yet ready to invest in a premium device for gaming.

WHAT DO THEY WANT?

  • Customisations options
  • Competitive advantage
  • Premium feeling

Surveys and feedbacks showed that the quality of material used to build the device was extremely important to face sweating, as well as necessity for high level of customisation.

PROCESS

DEFINING PRODUCT

First we had to understand in detail how the firmware and the devices were going to communicate. Especially when it comes to Bluetooth and BLE connection, restrictions are many and we have to assess how much Lag we might be dealing with. Identifying pinpoints where the user might face troubles and get stuck in the pairing process, or even only when Bluetooth data transmission are happening.

This is an example of flowchart I created to better communicate with developers.

IDEATION AND MAPPING

Once the flowcharts are reviewed with developers, starts mapping the user journey. First with low definition wireframes, going more and more in details as we validates each steps. This is a great support for discussions, allowing to point at a specific moment in the user journey.

Low Res wire-framing helps a lot during discussions with the team, creating a common vision and helping for the design steps to come.

PROTOTYPING AND TESTING

To consolidate the process, we document every decision made along the way. Providing as much informations as possible regarding the UX and the UI of the APP, this document will serve as a GoldMaster for the developer. In a fast pace environment like Razer, it is important to take responsibilities for the work done. Once delivered to the development team, this document isn't expected to change.

Low Res wire-framing helps a lot during discussions with the team, creating a common vision and helping for the design steps to come.

PROTOTYPE

We focused our testing on the only aspect of the App that was not purely visual.
Since the number of memory slots in the controller was limited but the number of profiles in the phone's memory and cloud wasn't, we spent most of our testing effort ensuring users understood when the profile was either Assigned, Saved Locally or Saved in the Cloud.

TEST

Less is more is again the best result here. It turned out the best results was obtained with the simplest version: matching colours and name. A constant feedback was also to add an icon to confirm the cloud upload status. Once added, the test result were finally positives.

ITERATE

Surveys and feedbacks showed that the quality of material used to build the device was extremely important to face sweating, as well as necessity for high level of customisation.

DOCUMENT AND IMPLEMENT

To consolidate the process, we document every decision made along the way. Providing as much informations as possible regarding the UX and the UI of the APP, this document will serve as a GoldMaster for the developer. In a fast pace environment like Razer, it is important to take responsibilities for the work done. Once delivered to the development team, this document isn't expected to change.

Documenting design decisions also helps QA reviewing the App. They what to expect.

DESIGN

Once the product has been documented and the user journey defined, building an App within the Razer ecosystem is quite straight-forward. Documented guidelines helps the designer to save time on buttons and default navigation and focus his attention on specific areas of the flow that requires the user to perfectly understand what is expected from him. In this particular exemple, we decided to allow ourselves to divert from the original set of colours to better highlight our partnership with Sony, setting the main colour as a deep blue instead of our classic dark-grey.

Final approval of designs is given by our CEO - Min Ling Tan who is very involved in the design process.

ANDROID CENTRAL

The app's interface is sleek and easy to use as it's not cluttered with extra garbage to needlessly confuse you.

TECHRADAR

The app is solid, super simple to use and makes for fast and convenient tweaking.

GAMESRADAR

The companion app syncs to your controller via Bluetooth and provides a simple, user-friendly interface to swap things around.