Moxie
I was tasked with designing a functioning mobile app for a fake online games store known as Moxie. I was given a lot of creative freedom with the aesthetic design of the pages as long as they had certain pages and features that the client had asked for. I sat down with the client and asked him lots of questions about what they budget was, what kinds of features they would like, if it could be done or not, etc. I sent them screenshots throughout the design process and took any appropriate feedback and used it for the design.
Discussion with the Client
The Client stated in their brief that they wanted a simple page layout that is accessible to anyone and a bright colour scheme to make the brand stand out from the competition and look more visually appealing. To create the designs that they were happy with I used a bright and bold colour scheme (mainly using reds) and made text bold and readable both on the screen and against the background. I was sure to use a lot of images as well for some colour variety in the design and to direct the user to certain products.
The only features the client requested in their brief was a login page for users to register and log in to an account, a search bar so users can search for any game they want, a wish list that users can add to and a drop down menu for simple navigation. As the app would be used primarily on mobile devices then the interface had to be designed with a touchscreen input in mind as well as being displayed on a small screen. With this in mind I knew that all inputs would need large bold icons and would be displayed scrolling vertically on a narrow screen.
The whole app was designed using Adobe XD and with software I could link pages together and actually test how to screen interactions would work on my personal phone. This allowed me to conduct thorough testing throughout the design process and see how certain features would work on a physical device and showed me how to scale inputs like buttons and text boxes.
In the images shown above, there are a variety of pages that the user will interact with. I created a very simplistic design using bold text and images to make the application more accessible. The user can use the app to do a variety of things such as create an edit a personal profile for themselves, see and interact with friends created profiles and browse and purchase games. The use of large and bold images makes it easier for the user to see and interact with icons especially as the app is designed for the smaller screen of personal smart phones and makes interaction easier as the user will be using touch screen controls to interact with the app. The user can securely input their payment details in the store page and purchase games for their desired system.