Saturday, December 12, 2015

Project 3 Process Post #10

Hello again!


Well, not much sleeping has happened, but lots of animation and designing has happened! I've finally finished all of my videos.

I slowed down the videos a bit, and I added text so that it's easier to follow along. In class on Wednesday, I got some feedback about how it's hard to know where to look with how fast the video moves. So hopefully slowing it down and adding some text helped a lot.

I also fixed my design a little bit, once again. Instead of having those squiggly lines at the edge of the navigation bar and login screen, I made it all straight lines. It used to kind of look like there was something melting down the screen with those lines so taking them off seemed to help a little bit.

I also made GIF's of stories/experiences to go before each of these videos, and I made stills of the main functions of my app as well. You can look at all of this on my behance page.

Sunday, December 6, 2015

Project Three Process Post #9

Greetings!

I've gotten quite far from the last time I posted. I messed around a little bit with the design, and I started my videos too!

Here's what I changed design-wise:

























So the grey login screen and the navigation bars are made up of letters now, not just solid grey boxes. I think I still want to play around with the letter more though because you can't really tell that they're letters from far away. I'm going to continue to work with that same idea, and maybe utilize letters somewhere else in the design as well. I also fixed the Stack screen so that it's more noticeable what has been completed and what hasn't been completed.

I've done quite a bit of animation over the weekend. I didn't leave my desk this weekend. I really wanted to get a good start on my videos, and I did! I got 2/3 mostly done (except for minor small tweakings along the way) so here's a couple crappy cell phone videos of what I've done:








My plan, for right now at least, is to have the third video done by Tuesday or Wednesday. Then I will work on video refinements as well as design refinements, and then over the weekend I'll construct the ten images for my Behance page. Hopefully all goes as planned. I will keep you updated on what happens!

Tuesday, December 1, 2015

Project Three Process Post #8

Hello there, friends!

Surprise, it's me again. Soooooooooo I've revised the storyboards from last time for my video. I think a have a better grasp on what I'll be doing now. I'm doing three 30 second videos (hopefully shorter than 30 sec) to show the three different gamesfunctions) that this app is capable of doing. I don't think I could do it successfully in one 30 second video, so separating all these games into different videos will help a lot.

Here's the storyboards:


























So basically, each video will start off with some vector characters that I create to set up the scene, then the video will go into the screens, next it will show the composition will split in half showing the device on one side & the sphero interacting with the device on the other side, and finally all the videos will end with the logo and some sort of tag line.

Additionally to figuring out how the video will work sequentially, I found music that I want to use and I also have all the footage I need for the sphero. I can't remember if I mentioned this in one of my previous posts or not, but I made due with a plain white ball for a sphero (I'm poor lol). I attached fishing line to the ball and taped it moving. I'm not sure if that makes sense, but trust me, it will! It basically just looks like the ball is moving on its own, and I'm not helping it at all! Except for the parts that humans are actually grasping the ball and using it to spell words.

After really thinking about user testing, I revised my screens. My user said I needed a back button, but after having reading Krug and talking extensively about the importance of navigation bars in class, I decided to make a very simple navigation bar for all of the screens. Here's a sample of what it looks like:











































So on the far left is what my user asked for during user testing: a back button. On the right, I added a Stacks button (which is basically a home button), so users can always get back to the stacks with just one click of a button at the top. I also added that question mark in the middle to click on whenever directions are needed. I think this will be especially useful during the games. If users are confused, they can just touch the question mark for directions, but this way, the directions aren't always in the user's faces. I had it before that directions were there EVERY time, so now, they're only there if the user asks for them. The second picture shows how the button is light grey whenever users are on that specific page: the stacks page or a directions page. The back button isn't a page, but it will change to that light grey color when clicked.

Saturday, November 28, 2015

Project Three Process Post #7

Hello there!

Since I've been home for break, I've made quite a bit of progress on my project. I've finished all my screens, did some user testing, made two storyboards, and did a little bit of filming as well.

Here are the two storyboard ideas I have for the video:







































I'm planning on doing three 30 second videos to show each of the the different types of games you can play: trace, unscramble, and spell. The trace and unscramble will be one player, and then the spell will be two player. So each of these will start off a little differently depending on the scenario. But all three of them will either start off with text/typography or zoomed in stock photos (shown in my storyboards) to set up the scene.


Here is documentation of the user testing (my parents' printer wasn't working, so we had to do this on the computer):






























After doing the user testing, my user brought to my attention that there was no way to return to the previous screen. DUH, how did I not think of that? So after getting her feedback, I added a back arrow to all the screens so you can always go back a screen if you need to during the process. Other than that, she navigated through the screens really smoothly!

I bought a white ball to use as the Sphero during the video (too poor to afford an actual sphero), and I think I have it all figured out how to make it move the way I want during the video. I attached fishing line through the ball, and I'm planning on rolling it by pulling on the string. Hopefully, I can have the video zoomed out far enough that you can't see the fishing line. I'll also turn up the brightness on the video too, so that it's harder to see the string. I started the filming the movements of the ball too.

Monday, November 23, 2015

Project Three Process Post #6

Hello again, friends!

I made some mood boards over the weekend to explore some design directions to go in for this project. Here's what I ended up with:

Add caption


After talking it over in class today and playing around on my own, I definitely think the first option fits my subject matter the best. The second option is fun, but the first uses a more idealized typeface for those learning to read and write. The second option also seemed to have a lot more room to explore and extend design-wise when I played around with it on my own.

I decided on the name "sphell" because it's a combination of the two most important aspects of the game: spelling and the sphero. I think it has a fun ring to it, and it'll stick!

I went ahead and got a head start before Thanksgiving, and here are some screenshots of a few screens I made. I would show them all, but it would get pretty repetitive. 

These are in order:










Tuesday, November 17, 2015

Project Three Process Post #5

Hey again!

I revised my app and made some wireframes for screens. Here they are:

zoomed out, wow lots of screens!

First two screens, the stacks are separated into different types
of words. For example, long a/e words or words that start with sh.

First game: trace letters and watch the sphero move along with your finger. The top is for one player the bottom is for two.

The second game: unscramble letters using the sphero to select and drag letters around. Top: 1 player, Bottom: 2 players

The third game: spelling the words using the sphero like a marker on the floor. Top: 1 player, Bottom: 2 players

Monday, November 16, 2015

Project Three Process Post #4

Hello there!

So, as I talked about in my previous post, here are my three revised storyboards using my new device in three different environments:




















After discussing these in class today, I think I have a few ideas on how to revise them. 
-I plan on creating stacks, or genres, to organize many different types of words. 
-I want to make different levels, so that it isn't too easy or too hard for Astrid
-I also plan on creating other ways to learn spelling, instead of just tracing
-I also need to work out the kinks in the process between one player and two players