RAZER THEMES:

MASS REVISION UPDATE

PROJECT BACKGROUND

When I first started working at RAZER, I was mostly tasked with working on specific themes within the Themestore creating icon assets, wallpapers, and lockscreens. As most of my time was spent inside themestore, it wasn’t long until I started suggesting the possibility of a Themestore revamp. After 3 months of research, I pitched the idea and was given the 'OK' to start working on the revamp. We called it MR2 (code for mass revision 2). Since it was my own rallying that pushed this project forward, I was given ample space to explore different opportunities and possibilities on ways we could enhance the user's experience of our RAZER Phone's Themestore. 

 

Being that the Themes app had not seen a UI update since the release of the first Razer Phone 2 years ago, I took my time and honed in on individual features of the app beginning with the search feature. This project took around 3 months from ideation to final deliverable and in both Light & Dark mode versions.

As a junior designer, getting the opportunity to work on an entire project myself was a big deal. During this time, I learned so much  and improved immensely which has made me into a better experience designer. I'm proud to say that I got to work on the design of a widely used application that comes pre-installed in all the Razer Phones. In addition to this, something that we haven't done before at the RAZER Mobile Business Unit (MBU) is design for phone use in dark settings. Being something new we were trekking on, I was happy to work on the app design in both light and dark version modes.

IDEATION & WIREFRAMING

Initially since redesigning the entire Themes app was a big project, I started with working on just the search feature. Through designing for search, I was able to develop a style guide down for when time came to design other parts of the Themes app. This was to ensure my design remained uniform and consistent. The wireframe stage was long in this project as I found myself spending over a month on just wireframing out the entire new design for Themes app. Of course, the first few days were strictly pen, paper, and sketching but after that it was wireframes-wireframes-wireframes all the time amassing to over 130 screens. The main screen design had over 5 variations and the categories screen did not fall short behind. You will see some of these wireframes included below. Naturally, I'm sure you can tell which layout I ended up going with from the final design previewed above.

DESIGNING FOR NOTIFICATIONS & USER FEEDBACK

After finishing up the main design parts, I went back to work on other features of the Themes app such as in-app notifications and a user feedback mechanism. Though not a part of the main design of what users see on a normal basis, the design for these pop-ups and toasts were just as important. With designing for these, I was in constant discussion with the product manager for Themes as it was a business and product goal as much as a user goal. I explored the idea of doing dialog pop-ups vs. toasts notifications, and settled on dialog boxes for app update notifications and requests to rate our application since these were more obtrusive requiring user input before going away. As for rating individual themes, I went with toast notifications as user action for these were optional.

INTERACTION MAPPING

This next step of interaction mapping wasn't required of me to deliver to the engineers but I thought it would be useful to provide some added direction to how I wanted the development of my app UI design to go. In the interaction map, I outlined how one state or screen transitioned into another. Creating this interaction map took no more than an afternoon and the payoff, in my opinion, is 10 times greater. The product manager of Themes loved the initiative I shown to produce this document myself. 

FINAL THOUGHTS

I was fortunate to be able to work on all parts of the Themes app and I'm so very glad to have gotten the opportunity to do so. Not only did I become a better designer, I also became a better collaborator working closely with my UX Manager to do design critiques and check-ins, as well as the Product Manager of Themes to incorporate business goals into my design. Along with this, having to constantly present my progress to the rest of the Design Team gave me ample opportunities to gain new insight and take in great feedback. I'm grateful for all the support and encouragement I received during my time at RAZER to push for this project, and in the end, happy to have had this experience. I can only say that I can't wait for where my journey will take me next and what will be my next project.

Thanks for checking out this project!
Consider checking out my other projects: