Futuristic Noodle @futuristicnoodle - Tumblr Blog

Images for the publication

And some pretty screens to finish off...

Overall this project took many iterations and trials to get to the stage where it is today. This image shows only a portion of the development that took place over the last few weeks, in fact only a portion of what I have done over the last few days as it seemed the promo video needed a lot more screens and adjustments than I ever would have imagined. I am happy with the 32 pages of my completed app and have no major regrets over what I could have done differently.. yet... It seems to be designed well enough to get the message across about what this app is for and what it does. I also hope the video does this too. Like the screen designs, many hours were spent on the video. I think the hardest part of that was getting the timing right for the slides. I had people look at it and tell me it was too fast and they couldn’t read it, so then i would slow it down and was told I needed to cut seconds out of the text screens because people would get bored, then user tested again and was told it was too fast. Feel like you cant win. Everyone has a different reading speed. I think the current speed works fine. Perhaps you have to read a bit quicker than usual but theres no harm in that.

Now that the click through and video are complete the only thing left for my exhibition piece is a hanging poster/banner. The intention is that this will show my process and explain a bit more about the app and the ideas behind it. As these ideas and processes are explained on this blog and will go further indepth in my exegesis, I dont think it is necessary to hand in a poster for marking. My screens and video were my main concern and to compromise the design of those two elements for a poster seemed silly to me. Now that they are complete I will start work on the poster but will not have anything final to be graded.

UserTesting is the world's leading user experience research platform. Improve your UX and boost your bottom line by getting videos of people using your website or app.

This is a user testing service that Invision provides for free. By clicking on the link you watch a 5 minute video of a stranger navigate the app while giving feedback and answering questions asked by the designer. I found this very useful! I had told this guy nothing about the app apart from that it is more of a futuristic idea. Therefore he didn’t understand the whole idea but his comments reflected on choices I had made in terms of only having some parts accessed by certain people etc etc and he found the design very easy to understand and follow.

Promo Video for Verifiid This is the final video for the app. A 2 minute video showing the key features of the app and situations where they would be useful. There is no sound as this is a video intended for an exhibition and I didnt want speakers or headphones.

By clicking this link you will be taken to a live prototype. This allows you to click through and use the app while having a closer look at all the screen designs.

The actual screen designs are made to fit my nexus phone so do not fit the Invision HTC One quite as well. I have designed them to fit my nexus so that I could download it onto my phone and critique my own work and see adjustments at their correct size, but also because my live prototype will be shown on my phone in the exhibition.

Basic storyboard for the promo vid, now that the screen designs are complete

A few more updates : -Now once you have entered the app the ‘tap to scan more info’ is better understood with a more comprehensive graphic.

-The page where you scan your eye is made to look more like you are about to take a photo rather than an image of an eye on the normal screen.

- I meant to mention this last time but the ‘seen’ icon at the bottom navigation has now changed to a pair of binoculars so the two eyes dont clash like they were before.

- aaaaaaand as I read this i realise I have spelt my own name wrong on every page. WHOOPS! Better go fix that now.

Because the text buttons weren’t working very nicely to break up the info I looked into icons. The first 3 images show my trials through having icons that were too large and didnt fit the group to having too many on one line. Eventually I decided to cut it down to 4 categories in the Professional Access and 4 in Exclusive Access. This made them fit nicely on the page but also looked good with each other. What was under the handcuffs (criminal record) tab was moved to the general ID tab. I then user tested because I knew my icons werent 100% clear and this turned out to be true. My users instantly recognised the medical symbol but when it came to the hand over the 3 people they had no idea and suggested ‘family’ until seeing the family category below. I then tested again with the name underneath the icon and this went down much better. I am 97% happy with this decision. I know the general rule is that if you either have a text button or an icon button and dont combine them but here the text looked ugly and we needed to break up the text heavy page a bit, but at the same time the icons that were used were ones that people are not commonly confronted with. An insurance icon!!!???? So I feel the icon/text combination serves its purpose here.

This is a quick video of the screens I have made so far. Nothing was linked so apologies for the quality and everything. At this point it was nice to see all the screens on a phone and flick through everything. It was now that the things that weren’t working started to become very clear. - I needed a better bottom navigation bar because currently it looked too similar to the rest of the page. - Some of the screen sizes were wrong. To begin with I had added the android navigation and then tested and found that Invision added that in for you so when i deleted it off my own designs i hadnt realised I still needed that length. - The ‘seen’ icon at the bottom had to change because the eye scan had the same icon. - The second page that reads ‘tap to scan info’ needed some clarification. This was also pointed out by user testing. Either the text had to change or the image had to change. The image is also very clip-art like. - Text about the person had been made larger from last time to help with visibility but also so it was proportional on the page. - Instead of having one massive list I put things into catergories. Originally there were 6 catergories. Then 5. By making it 5 the top one looked weird so might see how icons work. - Medical details were also made clearer with a white background. This was again achieved through user feedback as to what worked best.

Looked at ways to incorporate airport identification methods into the app. My first thought was to use finger print scanning as most phones can do this now. My first design seemed a little to complex so my next design was simplified a bit. Most of these images were bought off adobe stock and then edited. The eye scan was something a bit different but surely something that our phones are near capable of doing. This however clashes with the ‘seen’ icon at the bottom so something will have to be done there.

After user testing my last few screens and getting feedback from peers I made a few alterations. The background pattern was increased in size so it didn’t compete with the login so much. The page showing the scanned person changed a little. Adding a bit more detail and an emergency area. At the moment I am not very happy with the visibility of the text on the emergency detail page. Red on Blue isnt working so well. I am also unsure whether I am keeping the logo on every page too. And lastly the text with all the blue and white writing is how the information will be displayed but I am trying to avoid it being a massive list so we will see how that goes.

...and some development from the last screens. Trying to maintain a secure, safe and trustworthy interface design while not having a boring project lead me to look into gradients and patterns. The first screen requires security to access the app. The second screen is the screen to find someone elses device. The third screen shows the persons profile who you have located. The outer circle or semi circle around the profile image indicates what level of security they have for looking at other people. Other colours and lengths would indicate the person has a higher status eg: police officer

And perhaps using the logo and a blue did start me off in the right direction... Here are some of my initial designs before developing them further

To perhaps make things easier I tried creating a logo. Logo design is not my strong point but perhaps starting with something small would lead me to something better

To change to another colour way I found a sensible looking website and copied some of their styling.... Overall I would say this is a major fail!! Very very boring and ugly... However blue is a colour I would like to explore further.

After having a chat with the class yesterday I think it would be better for me to spend less time making the designs perfect and put more time into a video that would sell my futuristic idea to the viewers. It was suggested that I make a very futuristic looking video so people arent bored with a very basic interface app and focus on the ideas behind it and the potential for the future.

Trending Blogs

Recently Viewed Blogs

Futuristic Noodle