Design Hero Project—Mobile prototype

Figma prototyping of Naoto Fukasawa’s work

Initial Plan

Revised Plan

Style Change

I was debating if I should go with a more vector art style or a more realistic style, because vector would be easier to animate with. However, I decided to go with using photos, because I wanted this to be more consistent with my booklet.

I wanted to recreate the spinning of the CD player, so I created a variant with just the CD at different angles to create this animation.

I wanted to use a lot of gradients and delayed appearance of text and images to add a little more complexity to the simplistic and minimalistic design of the mobile prototype.

The about page, which is a digital translation of my timeline in the booklet, induces the viewer to click on the year, which leads them to a detail section of what happened that year.

Originally, I used the shape nodes on the left side to identify the sub categories, but after talking to Andrew, I learned that this is quite confusing and not effective in communicating to the reader what they are to expect of this entire page. The right side is how I managed to revise this point.

Reflection

I think overall, this was a fun experience that let me think of prototyping beyond my knowledge (which is quite shallow) of UI UX. I was able to think more creatively and had more fun than when I tried working with commercial apps. I still think that prototype has a lot of room for refinement, which I will do over this summer :D