Warframe App Prototype - UI Design Assignment
For an assignment a UI design course and in a team of 3, we were tasked with developing an app for any game. The purpose of the app is to allow the players to do tasks outside of the game when they have free time but are away from the computer.
Link to presentation: https://docs.google.com/presentation/d/1ugdeZq4a4TRMbnZXaQvZL_TMDsz8hEhyAc9VaLJyDsk/edit?usp=sharing
When designing the app as team, we created a wireframe to clarify and show how the pages are connected and how the app should function. I created this in Microsoft Word.
Afterwards we created a paper prototype. This picture shows all of the menu pages and UI elements the app would have.
Close up of the hamburger menu (blue), main page and shop page in app.
Close up of the settings page, alert page and Inventory page. If the user clicks on an item in their inventory, a UI message (blue) will appear asking if they wish to sell and to confirm by swiping.
Close up view of the foundry pages. If a user click on an item in the foundry page then a message will pop up asking for confirmation again (blue).
Lastly, we created digital mock ups of the pages. I was tasked with creating the hamburger menu, inventory menu and the store menu. The hamburger menu allowing the user easy access to the different pages in the app.
Digital mock up of the inventory page by using images of Warframe's inventory and using Photoshop to edit them in place.
Digital mock up of the store page and buttons of different packages they can buy. Again made by taking an image of their shop and editing it in Photoshop.