My Figma file link click here to see my prototype

The results I received from having my friends and family that tested out my app with maze.design:

https://app.maze.design/report/1krl26ki595bju#intro

Sketches:

Reflection:

• What did you learn?

I learned how to do animations in Figma and how to smoothly design an app with the amount of prototype work we are allowed to do on Figma. The animation that I did was the menu pop up it, which was very helpful and a good thing to learn because instead of making individual screens to show the menu, the animation made it available on all the screens that I wanted it on without the extra steps. On top of that, I learned when working with multiples of one element and doing smart animations in Figma you need to keep track of the names on your because it can mess up and won’t do what you intended on doing.

• What was easy?

It was easy coming up with the app concept I wanted. I already had the app envisioned in my mind before I even started. I premade sketches of what I wanted the gameplay to look like and how the menu would be set up.

• What was challenging

It was challenging to keep track of the duplicate elements since there were multiple players. I had to slightly change the names so that each player had their own elements dedicated just to them, and they wouldn’t be switching with one another throughout the animations. It was also challenging figuring out the layout to make it not only look good but to make sense to players.

• How could your submission be improved?

I think my submission could be improved if I could transfer everything I did but onto the size of an iPad, maybe, so I had more room to do the first layout that I had in my sketches, but I liked how the layout turned out in the end. Overall I had to make sure that the layout could workout with every screen size anyway, so it worked out.

• How could I improve the assignment for the next class?

I don’t think there needs to be any improvements.

• How might you apply your knowledge in future assignments or work scenarios?

If I ever work with Figma again in the future or if a program I use is similar to Figma, I’ll label my elements right when I start my first frame so that I don’t have to go back and make adjustments later on.

• How did a specific reading or video inspire or help you?

When we were doing Lab 9, and we visited the animate.css website seeing all the different types of animations that can be done and how they’re programmed helped me have a better understanding of where these elements could work within my app. Like when we programmed the error message to pop up if there was nothing typed in the username or password forms. Although I couldn’t use them in my app because they didn’t fit with the theme, they helped me have a better understanding of the coding process. Also, with our lab ten that I mentioned before, I added in the menu animation, which helped me out a lot. I took a look at the website Stephanie Walter and read “Enhancing User Experience With CSS Animation” (https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/) to have an idea of animations that would help the users experience be better nor worse.

App Pix

For my brainstorm, I decided to make my app a game that you would usually play in person. The game I choose to do it on is SKIP-BO. The title of the app will be SKIP-BO.

The objective of the game is: be the first player to play all the cards in your STOCK pile by playing cards in numerical order, 1 through 12, and 12 through 1 in four build piles. The build piles surround the draw pile in the middle of the players.

User story

As a player, I want to play the cards that I draw, the cards in my discard pile, my skip-bo cards, and the cards in my STOCK pile in a strategic manner so that I can get rid of all the cards in my STOCK pile to win the game.

A scenario your user will find themselves in is first learning how to play with going through a tutorial if needed. The other scenario is having to play their cards focusing on their piles and their opponents STOCK piles and discard piles to know when to block or to not play a certain card.

My Figma file link that has the full prototype and the desktop view of two screens:

The results I received from having my friends and family that tested out my app with maze.design:

https://maze.design/r/jwxm11bufkgfsf9jz

Sketches:

Reflection

• What did you learn?

I learned how to build a prototype in Figma. Before this project, I had no idea that you can connect frames with paths and have it set up like how it would work in a real app. I also learned how much work goes into creating a CRM and what components are while working in Figma.

• What was easy?

It was easy, working, and creating components. Not only that, but it’s easy creating paths with your prototypes since the design and prototype tabs are all on one system, and you don’t need to code what you want to make.

• What was challenging

It was challenging to create so many frames even if there were two or three frames that looked slightly similar to just something different done to it to indicate that an action was done on the previous screen. For example, when I did the User Archive screen, there are five versions of the archive, but all of them show different tasks being done. It was also challenging to convert what is on the iPhone to a laptop. The proportions and layout are so different; it’s hard to design how you want it to look.

• How could your submission be improved?

My submission could be improved if, for my user archive, I thought of a different way to showcase my customers so it wouldn’t be as cramped as it was. Another thing with the feedback I received was maybe to enlarge the drop-down menu buttons.

• How could I improve the assignment for the next class?

I would say instead of labs or on top of labs you could have it where every week it’s required for a certain screen to be done and to go over that screen and what questions student’s had about it in class. For example, say after you give the assignment out a week from then, you assign two screens to be done (the splash and login page), and then when they are due, people can show what they have done and what questions arise. This helps the class because maybe some others had the same questions, the class doesn’t know where to start, and it also keeps people on track.

• How might you apply your knowledge in future assignments or work scenarios?

I will keep in mind and apply my knowledge of components, so I don’t have to keep making the same items over and over again. It came in handy with the navigation bar and buttons. I would also keep in mind the design system. It’s so much easier to have systems that you premade to use throughout the whole job, and instead of making that same color again or using the eyedropper, you can just use a color system you made.

• How did a specific reading or video inspire or help you?

What helped me the most was our previous labs and the videos and articles that were with them. When we designed one or two frames, it helped me get the basics of what to do and how to create specific things such as buttons or avatars. What helped the most was having office hours and staying to ask questions of what specific things should look like and talk about terms I wasn’t familiar with.