For this project, I decided to use Framer to be our UI/UX visualization tool. It has a clean and handy interface, with adequate and customizable animations. I have been using it for 3 years. Recently, it had a big update to extend its service to also cover web design functions. Took me some time to familiarize with it, but in general, it is the application I would recommend for UI/UX design works.
Ava, the player character, has a phone in our game that she uses to check emails, contact colleagues, and text her friends in her daily life. On the very first day when she comes to the office, she has not transferred her email to her office – or she doesn’t even have her own office yet. Given this story background, she has to switch devices back and forth between her phone for personal emails, and Charlton’s computer for work emails. Other than the email function, she also needs to text or call colleagues and friends.
By referring to various designs of home screens on different OS, I came up with this interface and design as my first attempt. My goal in building this interface is to simplify functions that a phone would normally have by default and get rid of distracting elements. I also attempted to make it as familiar as possible to make it handy as a tool for players to utilize during the game. As we do not need a lot of applications on the phone, I initially left only 8 icons on the home screen and let them occupy the space. But looking back at it after several weeks, I still found it distracting. So I reduced the number of icons on screen again, to 4, and then to only 2. Now, it looks like it is on some sort of battery super-saving mode.
The next application to be designed is Email, which is the primary function of the phone. I referred to Gmail mobile, and other designs on Dribble and Pinterest for inspiration.
The adaptation I made serves the game by aligning to its story background, its purpose, and its natural limitation. In the current version, I excluded the outbox function on phone because 1) in the story, the player will not send email via phone, which is her personal email, and 2) allowing player to send self-generated email will not activate tasks – they should initiate conversations either through, text, phone call, or personal computer at the work station, if necessary. On the other hand, I added “starred” function as the one and only function to the inbox interface, because player will need to differentiate important emails or those need to be revised apart from junk mails. A “starred” function also opens the possibility for the players to develop organizing skills, which serves the learning objectives of the game.
For phonecall function, the user will only use contact book to initiate call, if necessary, instead of dialing a number that has to be memorized. The contact book will update itself when the person’s contact appeared in the game, so that the player can concentrate on tasks in game.
Finally, the phone is designed to be hidden most of the time during the game to avoid distraction. When a time-check is needed, the player can hover the mouse at the bottom of the screen, and the phone will be called. A click will activate the phone to override the screen, and clicking anywhere else will deactivate the phone. When there is an incoming call, the phone will pop up from the bottom, not to take away the screen so that the player can decide whether answer it now or later without stopping the current task they are performing.
further reading: Mobile Phone in GTA: https://gta.fandom.com/wiki/Mobile_Phone