Designing Meaningful Interactions: Prototyping

Create a working prototype of your final product.

It needs to have core features that can translate your idea (MVP). You do not need to have all the bells and whistles. Your prototype should be of sufficient viability to allow user testing.

As I sat down to work on this week’s assignment, I first drew the screens by hand to figure out the possible user flows as well as how I wanted the application to look. Based off of these sketches, I moved on to re-creating them in Sketch. I found that doing it this way helped me to work faster in the long run, even if I did make some changes once I started working in sketch. For both the wireframes and prototype, I used lorem ipsum for the body text, bullet points, and other text heavy areas. I found that this helped me focus on the way the app worked, rather than get bogged down in the details of how it looked.

After creating the wireframes in Sketch, I used invison’s Craft Manager to import the artboards to Invision and create a prototype. I found this experience to be buggy and annoying at best. Some artboards were uploaded twice, and I frequently had problems with Invision losing the links between screens I set in Sketch. Because of the change to using Craft Manager, I wasn’t able to correct links in invision.

While making a few changes on Tuesday, I found that Sketch had a major update that allowed you to prototype in Sketch, without leaving the program, or having to use a second program or website. I found that this worked much better for me, and gave me far less problems. While initially your files that are uploaded to Sketch cloud are set to private, it’s easily changed in the settings. Using Sketch mirror allows for testing your prototype on mobile, which is very helpful for getting a better idea of how things look on mobile. I’ve left both prototype links in this post for comparison. invision also allows for testing of your prototype on mobile.

Overall, I found that tools like sketch make it very easy to quickly create and prototype. So much, in fact, that I found myself continuing to add/replace screens after I’d already linked buttons and artboards for a working prototype. One change I made was to remove a calendar feature and replace it with a forum/chat feature so that the user could not only search for resources, but get actual reviews from people they trusted.

Quick lo-fi sketches:

Sketch screens & prototype:

Sketch Prototype

Invision screens & prototype link:
Invision Prototype