Folded & expanded
The beauty of the wallpaper in the background was going to be covered by those tutorial cards, so we decided to stack those cards. Hence, we added smooth animation to help create a comfortable experience.
Card content
This card was called "Search the Internet". It described how to use keywords to get information from the outside world. At the end of the card, we provided quick access to the internet browser and a few search examples that encouraged users to experience the search results right away.
Real browsing experience
For users to experience the real world, I put an alive browser into the prototype. Users thus could do whatever they wanted to try. Thanks to the powerful framework that Framer provided so I could almost simulate anything I felt important in usability testing.
Takeaway
Unfortunately, we haven't had a chance to find participants to test out the prototype since the whole project did not continue. But in this project, I have learned a lot from the spirit of Framer. Because Framer is based on Javascript, so I can do whatever I can do on a web page on the prototype as long as I code in Javascript. Prototyping is so much fun, isn't it?
