Jordan Gault

IxD Belfast  

[jordangault]

Finding ways around the sound problem

I mentioned earlier about having problems with adding sound and having it different on different screens.

I always wanted to have a different theme for the main menu compared to the individual chapters. Originally I couldn't find a way to get them to change, the theme for the menus would constantly play until it was finished. 

The way I got around this was adding them in as videos and reducing the opacity and connected the layers on each screen.

Adding the sound effects in was slightly easier, for the majority of them I could add them in as sound on top of the objects on screen.

The other way was adding them in as videos and editing them slightly to get the timings to match.

[jordangault]

Supporting website

The supporting website will be one of the main touch points for this motion comic. It will be the hub for users to find out anything they want to know about the app.

Once the app launches, the users will be able to check their current package, however, up until the launch, they will be able to get a breakdown of the app, a teaser of the story and the available packages before they decide which version would work best for them.

If someone needs to ask a question about the app, there is a section on the website for them to do so.

You can view it here

[jordangault]

Creating a character using my friend as reference

As I moved into semester 2 I had to start creating some new characters. I got the idea to use my friend as a character, so I starting thinking about how I would go about doing this. It felt like something of a side project to try and draw someone from a photo I took as a reference.

The first step in creating the character was coming up with a way of him fitting into the story. In this instance I needed a small character that would show up once and then not again, that is what made me want to use him in the first place. Next up is taking some pictures to get poses and facial expressions. Then I bring them into procreate and use them as stencils. Once the outlines are drawn I exaggerate the shadows and fill in everything using block black. After adding one final touches the image will be ready.

[jordangault]

Updating Character Bios screens

These updates are going to be very similar to the changes I made to the Chapter Select screens. I was trying to keep the app very consistent so I kept the new updated deigns for these two sections very similar.

Wireframes:

I drew up these wireframes at the same time as the Chapter ones. So the reasons for selecting the bottom right wireframe was exactly the same as before. The main reason being, making it easier for the user to scroll thought he characters while holding the iPad.

Design:

[jordangault]

Updating Chapter Select pages (Formally Episode Select)

As I mentioned before, one of the main things I knew that needed updated were the Episode Select pages. The first thing I changed was the name. I thought Chapter Select sounded a lot better than Episode Select. This was due to the fact that the whole story is one continuous short story, having the name as episodes implied that they would each have a more separate story each.

Apart from the name, the main thing that needed changed was the design. The current design form semester 1 just wasn't good enough. So I went back to the sketch book and tried to come up with a new layout.

Wireframes:

I came up with 4 possible ideas for the new screen design. The one I decided to go with was the one at the bottom right. I chose this one for a few reasons. The main reason being, out of all of the options it is most user friendly for when you are holding the iPad and trying to scroll between the chapters.

Another reason was that it looked quite unique, while still holding a good amount of design principles. I wanted to try and make it stand out and I felt this design was the one to do this.

New Design:

[jordangault]

Starting semester 2 with a review

I knew at the end of semester 1, there were some thing that I wanted to update on my current app. The main two consisted of changing the layouts of the episode select screen and the character bios screen. I will go into detail on an upcoming post about the changes I will implement.

A few other small things I would like to change include, removing the hidden delights page. I feel like it is unnecessary. As much as I think the feature could be implemented well, for the amount of time I have it is something that will have to be cut. 

Next thing I want to do, is create a promotional website and social media channels for the project. Having a website and active social medias will be very important to spread the word and build a brand image.

[jordangault]

Major Project: PDF

This PDF contains the process of this project. It starts out in the planning stage and moves through until the mockup stage, showcasing everything in between. To see the finished product check out my other post on the prototype.

You can download the PDF here.

[jordangault]

RSA Brief: PDF

This PDF contains the process of this project. It starts out in the planning stage and moves through until the mockup stage, showcasing everything in between. To see the finished product check out my other post on the prototype.

You can download the PDF here.

[jordangault]

Download this prototype

You can download this version of the prototype here. In order to view it, you will need the Flinto view app, which can be downloaded for free from the Apple App Store.

For the best experience, view on iPhone

[jordangault]

Download this prototype

You can download this version of the prototype here. In order to view it, you will need the Flinto view app, which can be downloaded for free from the Apple App Store.

For the best experience, view on iPad

[jordangault]

Flinto Prototype: Second version

This is the second version I created on Flinto. I have outlined the differences on the previous posts, but he main ones are that this is using the redesigned screens and layouts, as well as the fact this version has the actual comic incorporated into it.

When it came to adding in the comic. It was pretty simple. I made sure all of the screens had the correct speech bubbles and illustration while they were still in Sketch. Once I imported the screens then, all I had to do was add the page transitions in.

There were some changes I had to make once the screens were imported to Flinto though. These changes were mostly adding some extras speech bubbles or correcting spelling errors.

The next steps 

Now that this prototype is finished, I am already thinking of ways to improve it. So the next steps include:

More user testing

Adding sound effects (The problem with this is that I can’t find a way n Flinto to stop music or sound effects playing. So once they start they have to play the whole way through, which is not what I want to happen.

Changing the music

Maybe adding some more filler scenes

Adding more extras and hidden delights

Moving onto episode’s 2 and 3

[jordangault]

Download this prototype

You can download this version of the prototype here.

For the best experience, view on iPad

[jordangault]

Keynote Prototype

After getting finished with the redesign, I wanted to create a simple prototype before going back into Flinto. The reason for this was that I wanted to get a feel for the story aspects. In the first prototype, I didn’t have the illustrations for the comic in yet, so this time around was all about making sure it looks okay.

Why Keynote

I had never used Keynote to do a prototype before this, but have heard of people using it just for their initial versions. I could have done one for the menus before I did my first versions but I used that experience to understand the Flinto app and I am glad I did that because now when I move onto the second version I will have a greater understanding of the app. 

The benefits I gained by using Keynote for this prototype were that it only took a short amount of time to put it together. Comparing the amount of time it took to the time it took to do the first Flinto version was massive. I think it was around 30 minutes it took to finish this prototype. Another benefit to this was that I could see gaps in the story. I found a few parts in the second main scene where there were gaps, for example, there was a part where the protagonist was waking up and moved from the bed to find a note, but before I used this prototype I thought this scene was fine. After looking at the prototype though I realised the scene happened too quickly, there were panels that I could have added in that would flesh out the story. So I went back to my iPad a drew up some more and added them in. It made such a difference to the story and really helped me improve it.

[jordangault]

User testing: After the first prototype

A lot of the changes and reasons I wanted to do the redesign came from this user test I carried out. I did two user test groups, one was with people from my work. I did this because it was people from the industry, designers and developers. I wanted to get the opinions of people who would be able to give me constructive criticism. 

The second group was people from the same comic book forum I used for my initial survey (You can see the results of this in my PDF). The reason I wanted these peoples opinions, even though at this point I had no actual comic, was because they would be comparing this menu system to reading a comic. What by I mean by that is that if they sat down to read a comic and it had a menu system, that included extras and setting, would it put them off?

The results from the first group, the designers and developers were where I got a lot for the changes to the design (not really a shock). They pointed out the fact that there would be no need for the main menu and a title screen and that merging them would make the usability better. It was also from them that I got the idea to change the colour from green to red and use the red a bit more. The change in the settings screen came from a tutorial session in uni. It was made clear here that the settings could all be carried out on the user's tablet, within the build-in settings app.

The second set of results were very helpful too. A majority of them thought that by adding menus and extras it made the comic more like a game, which they really liked. This was what I was going for by doing this. I wanted to try and merge the two genres into one. I can't really think of any games that are all based around a comic. One thing that a lot of people sais though, was that they would need to see it with the comic implemented. I plan to carry out another user test with the next version of the prototype once the next semester starts

[jordangault]

The Redesign: Why I felt the need to do it

Right after I finished this first prototype, I quickly realised that the design was not quite what I had in mind. You can see the entire redesign process in the PDF I created for this project. I will quickly talk about why I felt like I had to redesign my comic now though.

The typeface

The title screen looked quite dull to me and it was due to the typeface I had previously chosen. Uppercut angle was originally what I thought would be the final typeface. Like I said though, once I saw the prototype working, I just didn’t like it anymore. I did some experimenting and landed on this slightly altered version of Futura, which made the design look a lot cleaner and gave it more character.

The Colour Scheme

Yes, it is just black and white on the main part but it was the secondary colour I wanted to change. I also think the first version had some grey tints to it and I wanted to get rid of that too. The green colour I had used on the settings screen on the first version did not stand out enough, so that is why I chose a deep red colour. I also used the red a lot more loosely. I used it for certain buttons and even put some blood on the title screen.

Prototype

There were a lot of things I wanted to change in the prototype before I even started to add new things. First thing was merging the main menu and title screen. I didn’t need to have both, it was taking up time and space that did not need to be used. 

Next was removing the settings screen, after some feedback from various people, I realised that I did not need a settings screen.

After removing the screens I felt I did not need, I started adding the new typeface and new colour. Adding these changed the feel of the app. 

Another change that came was the changes to the sound used. I haven't quite got the sound right yet, but it is an improvement. Originally the background music was just too depressing. Then I changed it to something that was at the other end of the spectrum. Now I have something in the middle, but I am not sure if it will be the final music.

Lastly, it was adding in all of the illustrations to finally create the comic. I wanted to ensure the menu screens were what I wanted before I actually put the comic in.

[jordangault]

Download this prototype

You can download this version of the prototype here. In order to view it, you will need the Flinto view app, which can be downloaded for free from the Apple App Store.

For the best experience, view on iPad

[jordangault]

First Flinto Prototype

This was my first attempt at using Flinto and my first prototype for my motion comic. In this prototype though, it was just the menu screens. I had not got to the stage where I had any fo the actually comic drawn up yet. 

Rundown of the menus

The app opens up with a disclaimer screen. This will let the user know that all of the characters and story in this comic are all fictitious and any resemblance to actual events or people is a coincidence. 

The first thing I added in terms of animation, was the rain overlay. I had planned in using something like this when I was still at the planning stage. I tried the screens without the rain and it didn’t work the same.

This was the first pain point I had. I couldn't figure out how to keep things from moving that was the same on both screens (The starting screen and the ending screen in the transition). I fixed it by connected the two screens in the edit transition section, then by clicking match to lower. This caused the rain and any other asset that I wanted to stay the same, to stay present on both ends of the transition.

The first screen that appears after the disclaimer screen is just a loading screen. I would quite like to create my own custom loader and place it on this screen.

After this loading screen, the main menu screen is next up, from here the user navigates around the app. They can either move to the episode select screen, the extras screen or the settings screen.

The episode select screen is what it says, it lets the user select which episode they would like to read. The extras screen has some additional features, such as character bios and accomplishments, which are hidden delights that the user can find throughout the story. Finally, the settings screen is where they can edit settings for the app, like the screen resolution for example.

I added some sound into this prototype too. I have a background song that plays the whole time the app is being used. It was a bit of hassle finding a song that I liked and that fit the theme. This song will be changed when the final version is finished. The other sounds that can be heard are click sounds when the user clicks on the back button. I am not entirely sure if I want sounds here though after hearing these. I think I might need them but I just haven't found the right ones yet.

Overall, I was happy with this prototype. Using Flinto was a lot easier the more I got the hang of it. Next up will be to finish off the drawings and get a keynote prototype build. I want to do this to see if I have any story gaps. I don't want to do a whole Flinto prototype up wot the story then have to change it when I realise I have missed parts of the story.