UX/UI Research Document
Role: UI/UX Researcher
Several documents analyzing and studying the wireframes and guides of already existing games for a study*
​
Includes: Wireframes and Diagrams of UI/UX
​
*This section will consistently be updated with new research
Last update: April 22nd, 2021
![wireframe.jpg](https://static.wixstatic.com/media/b1c61b_a3635d8c865e42d386dda25573589c13~mv2.jpg/v1/crop/x_198,y_0,w_414,h_519/fill/w_322,h_404,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/wireframe.jpg)
Cover Image Credit: Miro Blog
![Making Eggs Flow Diagram](https://static.wixstatic.com/media/b1c61b_1abb1e3ad50448fd9bdd768e452f2957~mv2.jpg/v1/fill/w_850,h_1100,al_c,q_85,enc_avif,quality_auto/b1c61b_1abb1e3ad50448fd9bdd768e452f2957~mv2.jpg)
![Among Us Flow Diagram](https://static.wixstatic.com/media/b1c61b_fa76973a2ffb4ba29ad51fea234be852~mv2.jpg/v1/fill/w_980,h_1268,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/b1c61b_fa76973a2ffb4ba29ad51fea234be852~mv2.jpg)
![Mario Kart WireFrame (1)](https://static.wixstatic.com/media/b1c61b_b49ae086d0fc4029a484660b3e9a4191~mv2.jpg/v1/fill/w_980,h_634,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/b1c61b_b49ae086d0fc4029a484660b3e9a4191~mv2.jpg)
![Making Eggs Flow Diagram](https://static.wixstatic.com/media/b1c61b_1abb1e3ad50448fd9bdd768e452f2957~mv2.jpg/v1/fill/w_850,h_1100,al_c,q_85,enc_avif,quality_auto/b1c61b_1abb1e3ad50448fd9bdd768e452f2957~mv2.jpg)
All images can be enlarged by clicking on them
![Making Eggs.jpg](https://static.wixstatic.com/media/b1c61b_1abb1e3ad50448fd9bdd768e452f2957~mv2.jpg/v1/crop/x_0,y_74,w_850,h_767/fill/w_600,h_541,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Making%20Eggs.jpg)
Making Eggs
Practicing creating flow diagrams by using the example of making eggs
​
-
Creating an organized designed path
-
Consider different options and how that changes the flow
​
Created using diagrams.net
Among Us
Identified the flow of a pre-existing game
​
-
Created pathways based on the presented UI
-
Marked all the possible screens that the user can be directed to and how they are directed
-
Identified the large number of screens a game can contain without the user realizing
​
Created using diagrams.net
![Among Us.jpg](https://static.wixstatic.com/media/b1c61b_fa76973a2ffb4ba29ad51fea234be852~mv2.jpg/v1/crop/x_62,y_0,w_3338,h_4094/fill/w_572,h_702,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Among%20Us.jpg)
![Mario Kart WireFrame (1).jpg](https://static.wixstatic.com/media/b1c61b_b49ae086d0fc4029a484660b3e9a4191~mv2.jpg/v1/crop/x_3,y_161,w_1638,h_812/fill/w_721,h_357,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Mario%20Kart%20WireFrame%20(1).jpg)
Mario Kart
Practice wireframing by outlining a pre-existing game​
​
-
Identified components of several screens (start screen, customization, HUD, etc) and how it is presented to the user
-
Understood the number of assets and visuals that fill a screen and how it is communicated
-
Took special notice to color to mark possible selections options
​
Created using diagrams.net