top of page
razerword_logo.png

CORTEX

mobile app design (android) - 2018

razerphone2cortexscreen2.png

OVERVIEW

A re-design of Razer's original game performance-enhancing app, Game Booster. In Cortex, you can discover a curated list of popular mobile games, be able to launch them quickly, and optimize settings across all your game titles all in one place.

THE GOAL

The design challenge in this project was taking Razer’s Game Booster application (launched the year previous) and turn it into an all-in-one mobile gaming hub where users can launch, organize, and optimize their games. In addition, Razer rewards users who launch through Cortex with a special e-currency, zSilver, that allows them to get “paid” while playing their favorite games and exchange this currency for cool Razer gear and accessories.

UIDesign_Cortex.png

RESPONSIBILITIES + TOOLS

  • Research, Prototyping, Wireframes, Interaction, Visual design
     

  • Adobe Suite - Photoshop + Illustrator, Sketch, Invision Studio, Sympli

THE PROCESS

I first met with all the stakeholders of the project - PMs, ENG, + BD to discuss objectives, goals, and features for this product. I then began the ideation and concept phase and did some early rough sketches of how/where these features lived. I then put together some wireframes and a rough prototype (Invision studio) to help describe some of the interactions of the product ie. the transitions from Featured to Library to Game Booster. I then put together final high fidelity designs and shipped the deliverables via Sympli. Finally, I worked with ENG directly during the implementation process and resynced with the Cortex team after the product launch for a "post mortem" to discuss the wins and losses.

cortexprocess.png

DESIGN

Designing for Cortex included sitemaps, concept sketches, prototypes, wireframes, and high fidelity mocks (final visual designs)

INITIAL SKETCHES/ SITEMAP

flowsketch.png

WIREFRAMES

Sketching out simple wireframes to show the overall look and feel of the app. We gave Game Booster a "dark mode" makeover to match the gamer 'aesthetic'. 

cortex_featured_horizontalscroll - 0.png

BOTTOM NAVIGATION

Working closely with product, we were able to come up with a set of features we felt most valuable to our userbase. I designed a simple bottom navigation that when user first launches app, it launches into a customized Game Library - here, a user can manage and launch their games. You can tab left to FEATURED, where Razer shows off it’s hot and new partner games such as PUBG and features it’s PAID TO PLAY games that allow the user to be rewarded with Silver while they play. And finally, the right tab launches the familiar GAME BOOSTER (now dark themed), where users can customize the performance of their favorite games and apps, or set it into our 3 simple modes: POWER SAVE, DEFAULT, or PERFORMANCE.

IN-APP MESSAGING - RAZER SILVER!

Razer made it possible for users on all devices to be able to use the PAID TO PLAY feature, where special P2P games that allow the user to be rewarded with Razer Silver (e-currency) while they play and earn prizes. I designed an in-app messaging system alerting users whenever they've earned Silver.

cortex_zsilverpopup.png
razer_mobile.png
cortex_ingame_NOTIFICATION.png

FINAL VISUALS/ USER FLOWS

Using the Razer Styleguide, I designed Razer Cortex to be dark, appeasing to the common gamer's eye, and elegant with pops of that famous Razer green. The UI features friendly illustrations (in the tutorials and out of box experience) and clean, sharp shapes to align with Razer's "look and feel".

Cortex Flow_MR0.png
  • Facebook
  • Twitter
  • Pinterest
  • Instagram
bottom of page