IXD 301 Elements Project : Prototyping for Week 12 Critique

This week we had a critique on our elements project prototypes so far. I still have a long ways to go till mines is done but here is what I got done for the critique session.

Screen / Ui Wireframes

Every thing I do starts in my sketch book so here are some of the wireframe sketches I worked of off of when building my prototype so far…

(I’ve discussed my icons, ui, character design, branding, type, colour, launch screen etc. in detail in previous more in depth development posts.)

Here is my first detailed wireframe of my home screen…

Then I did some loose sketches of the screens for unpacking an item and learning about the element…

Here is the detailed wireframe sketch I did of an unpacked item screen…

Here is as sketch i did for the initial learning about element screen.

My idea is that these are notes Evie has and is showing you so I wanted it to look like a notebook that you are swiping through the pages of.

Here is some loose sketches developing the idea a bit more…

Once they swipe through all the pages, they will be introduced  to a sort of “mission complete” screen. From my research I know it is important to encourage kids by giving them positive feedback.

Here then are a wireframe and sketches I did for an unboxing interface design….

I decided  to add these actions to the app because just looking in a toy shop it’s easy to see with all the mystery blind bags kids are getting that theres are real appeal to kids in mystery. Having them choose a box also makes them feel a sense of control and agency, like they are choosing their own journey to take which is important.  It also adds to the experience of discovering a new item as it is more immersive than simple “bamm! new item”. More anticipation for what’s to be discovered  is built this way.

 

Based on my consideration of branding I sketched this wireframe…

Then here is a wireframe I did where I made some alterations to my Ui based on further research and discovery., feedback I received and further considering, developing and coming up with new and old ideas.

 

Userflow

I also did a user flow of the main journey a user would go on in my prototype…

Illustrator

Illustrator is the tool I know best. It’s also the tool that makes the most sense for doing illustrations so, for the parts of the app like character design, items, backgrounds, icons etc. that are more illustration based, I am using illustrator for and then copying and pasting to my prototype. Sometimes so far particularly my icons, I’ve made them do big in illustrator. I had to paste them into XD, resize and then take back to Illustrator to fix the line widths. It was a tedious task but now my icons look great.

 

Prototyping

This is my first time using Adobe XD so it was a bit daunting to get started first as it’s a whole new interface for me to learn but it wasn’t too difficult to figure out how to do the things I needed by looking at tutorials and also with just trial trial and error and educated guessing. It a tool I’ve become accustomed to and quite enjoy using now. One thing I was stressed about was rigging the buttons for my prototype because I thought it would be super complicated but it was actually a very quick, easy and stress free experience. Although I did have to watch a tutorial video to figure out how to do it first.

Since as I continue to work my prototype won’t be the same as was for this critique here are some screen shots I took during the process…

They’re not great since I need to remember to take more screen shot while working on things. For a lot of these I just did it sporadically but hopefully they hive you an idea of what I got done. (You might be thinking : “Laura why not just take screen shots now?” Well… the thing is… I’m adding pictures to this post a couple weeks later and I’ve done a lot since so yeah, this is all I got. I have learned the lesson now to screen shot more and update my blog more regularly.)

The feed back I received was quite positive, just to get a move on with getting it all done really. Also just to reconsider the wee buttons on the launch screen as the “?” and “i” buttons are basically the same. I was also suggested to get rid of the settings icon since it’s not really needed but I designed a really nice one so I have to put it somewhere and also I think that having a settings button on the launch thats easy to find is great because it means that people can quickly change things like language and sound before getting into the action.

I still have to add the bedroom but it’s still a work in progress.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *