HND1: Design Factory

My experience throughout the project/Evaluation.

Throughout the four weeks of making my final piece, I have learned a lot about time management especially. I thoroughly enjoyed making my final piece into a movie and seeing it as a whole. Because my final piece was so complex, I had to really make sure that I included as many elements as I could on the animation to prove my app was worth the time took in making and designing the whole thing.

The main struggle that I had faced with this project is ensuring the final outcome worked and was how I had envisioned it; because with apps, you don’t fully know whether they will work efficiently or not until it is tested out either on paper or computer format. Because time was my biggest concern and proved to be a major obstacle during the project, I couldn’t spend ages trying different themes/colours/layouts etc.

This project certainly made me learn how deadlines in real life are like, and that you need to meet the deadline regardless of how much you would like to work on one project. It also made me learn to make sure to design something that other people would make use out of and would want to use, not what you think is best.

I am pleased with the general outcome however, and I am pleased with all the elements that I had managed to put together to create this app. personally, I would like to add a lot more elements to my app, because it has a lot of potential to become a hugely successful student budget app, one which all students and possibly more people would be able to use. I would include features such as giving the public the opportunity to design their own themes, and feature other bargains like clothing and maybe venture further to include a wider group of people.

— For example, I would have a series of apps catered for different people, such as families, tourists or general savers – each app would specify to their everyday essentials.

Although this project would have much potential to go a lot further in the design concept, I feel the app would be a success, and showing by my research especially, lots of people would use this app. this is another reason to why my app was fairly easy to think of, because of the amount of primary source research I have got to show what people (students) are looking for and what they would like it to include.

Advertisements

Final product.

 

43

44(The format of the layout on a tablet-based device changes when you rotate the screen automatically)

42I put the layout on a PC also to get an idea of what it would look like, I even included the choice of having different languages and currencies at the top. The overall layout appears quite different to how the mobile site would look like, because the PC screen is landscape, therefore the layout needs to be stretched over. I decided to have the icons in a group of six, and the options bar on the left to spread the information around more across the page.

Here I have put some of the pages that would appear on my app on an actual template of an iPhone 5c to try and give the viewer an idea of what it would look like. I think that all of the layouts work quite well with each other, and that the layouts seem to work. I think the overall design is appropriate for the user, because it is modern and is appropriate for any adult (or young adult) to use without too much difficulty.

4Although I would have wanted a lot more time to focus on the design layout and refining it, the overall idea of it all worked really well, and I have shown how it can be used, and how you can fit a lot of information in on one app as well as presenting it altogether. I would have liked to have added more information to the app, and design every single page more carefully and with more detail however.

Creating my movie.

Knowing that I have to reduce my video to only 3 minutes to present to the people who run the Self-Identification project, I had to condense the original mock-up videos I had made to make sure that my final piece was within the time frame limit. I thought that creating a movie would be better to present my final piece, because it would help everyone to see what my app involves in the short animation. This would then give the viewer a feel of actually using the device themselves and seeing in front of them of how it would work.

Screen Shot 2015-01-27 at 18.31.57I put each image into frames, and recorded myself a narrating documentary of what was happening in each frame, timing the frames so that they moved in sync to when I was speaking.

I think this was the most effective way of presenting my overall piece to the public, showing them in a short clip of what the app features and looks like. Although I would like to refine the look of it a lot more, and make it look much more professional, the overall appearance is simple and easy to navigate throughout. I think the wooden theme for the ‘main’ pages worked well against the plain backgrounds for the selected areas, that are also colour coded; this helps the viewer to understand where they are and feel reassured when using the app, making them consistently feel in control of what they are doing.

My proposal for Design Factory.

My project for the Design Factory is to come up with something that would make a lot of viewers relate strongly to my idea. I have decided to come up with the idea of a student budget app that helps students (and others) budget daily and see what deals they can find with the budget they have on the day. Being a student myself, I find myself looking upon about 5 different apps daily to try and find they best deals around in order to keep within my budget so I don’t over spend by accident. My app will incorporate features from all different apps and merge them all into one app. for example, the example of Google maps and recipes online will be on this one app, to save you going on all different apps/online to try and find one destination/recipe you want.

The target audience for my app will be aimed at students. Because students vary in age, all people who are students need to budget in order to help with their finances. People who live on a daily budget can also use this app if they wish however. An issue that would occur with the student budget app is the impression of it being like any other budget app, or that people will be put off buying it because it is for students. I intend for the app (if it were to be real) to be free to use, and it would get its money from sponsors of companies that it will incorporate in the app itself.

Moreover, the app would need to have access to the Internet; you can login your account through any device, which will allow you to see your details if you have something other than your smart phone on you. I intend to keep the app as simple as possible in the design, because it is a complex app with a lot of different features, it could get too confusing if their was an over the top decorated theme.

Hearing many students and people in general complain about the difficulties of finding a deal or trying to plan what they would spend in the day or even managing to stay within their budget in the day, my app would help people to manage their budget more than other apps, as it would have all different features inside it. You would have a login when you first come onto the app as well as an introductory of the app.

In conclusion, my app is an app, which contains features of all different apps. It is an app, which would help people to save time, and save a few pounds that they can store away or spend to how they wish. The overall point of my app is to help people budget on what a student would do everyday, whether it be cooking what they have in their cupboard, travelling to university or trying to find a cheap place to go out and enjoy their selves.

Designing my app.

050814-ddp-lgWhen designing my app, I need to think about the trends of phones and the changing of sizes as phone develops over the years. It has been proven that bigger screens are becoming more popular, and the stats show that in 2014, the most popular device for surfing the web was the iPhone 5 and 5s’s.because the sizes of screens all vary, I thought I would design my app on a screen where most people search the web on. Although there would be an inch or two difference between phones, the layout would however remain the same or very similar for all model types.

Dimension for iPhone 5C (approx.):

IMG_3294

IMG_3293Screen = 3.5 x 2 inch

IMG_3296

IMG_3295Whole = 4.5 x 2.25 inch

(I also looked at the banner at the top of the screen, and I made sure I left room for it; I calculated approx. 1cm)

final app icon showing final appDesigning my app icon:

I designed my app using a template I got online to help me get the correct scale and proportions. I decided to keep the design of the money in layers and have the wine glass and knife beside each other. After layering them in illustrator, I drew the outlines of the objects and merged them altogether.

What I decided to change with my design in comparison with others was not having a rounded rectangle/square going around the perimeter, but allowing two corners to go ‘outside of the lines’. I thought this would make the reader look towards this app more, because it is different in the original style that other apps are like. Although I wanted to keep the app simple, I decided to keep the title shown at the bottom when you scroll across the page towards the app to save overcrowding in the app icon.

I then decided to change my icon slightly by adding a little more tone to the images using Photoshop. I thought that having more tone and shading in the icon would make it stand out a little bit more.

final app 2

 Designing my homepage:

I’ve taken a lot of inspiration from the app Gourmet Society. I especially really like the simplicity they put in the app, but it was still interesting to look at the homepage especially as it was different to a normal options page that would be listed. I tried out all different wooden themes similar to the app. Because I wanted to keep it simple, I didn’t want to add too much detail to the theme, especially because I have a lot of information on my app.

photo 1

photo 2I wanted to keep the overall theme neutral and simple that could apply to all aspects to my app. I didn’t want to have a plain background for my homepage design; otherwise it could look too boring.

I made all my images using illustrator, then putting them together and putting it all onto Photoshop. I put them all onto Photoshop. Because I can then edit photos and blend them in with another if I wanted to, making the app look more realistic. I really liked the idea of having wood as the background, because it gives the homepage some definition and separates it from the other pages with the listed information on, giving some contrast to the page. For the user also, it would help them to see where they are and help them to understand which page is a main page, and which page is a page that branches off from the main page also.

Screen Shot 2015-01-23 at 12.50.12

Designing the selected topic:

When you select an actual topic, you will be directed to a list of the options chosen for you. I thought for the reader, it would be easier to design each topic under a different colour:

Screen Shot 2015-01-23 at 12.49.51Travel = Blue

Information = Green

Favourites = Yellow

Social = Purple

My Profile = Red

Food = Orange

Colour themes.

I looked at colour themes for my app, and looking at money-related sites. I noticed that the majority contained colours such as green, orange and different greys including almost black. I really liked the theme of using greens, oranges and blacks as the main layout, this is because these colours I find are closely linked with the idea of money involved. When it comes to selecting one topic, the whole theme would change to a simple colour such as white and a themed colour specified to that topic, in order to help the viewer navigate their way around. This is to help the viewer know what category they are in, which would be explained in an introductory guide when you first ‘log-in’ or ‘create an account’. I don’t want the viewer to feel intimidated by the app in thinking you need a lot of money to use it, I want them to feel reassured that they can spend money wisely.

A common site I use is Adobe Color, an american based website; my dad is a decorator and recommended I use this site. It helps you to find colour schemes that works best fit for what you are searching for. Because my app is about money, I tagged it in and these were the main colours I got:

Screen Shot 2015-01-26 at 19.07.06

Screen Shot 2015-01-26 at 19.06.35There were hundreds to choose from, but my favourite combination were the mix of darker greys and oranges. I feel that orange is less intimidating when referring to money, and can be used as a main theme for the app. The greens however I feel would look good on my app logo icon. This is because it is small and is not consistently in your face if you wish for it not to be. I will only use the dark grey and orange colours for my homepage, the rest of the layout would be different and kept clean and simple with one colour running throughout each category; this is so that it doesn’t get too confusing for the viewer when looking through my app, considering there is a lot of information that will be going into the app.

ref: https://color.adobe.com/explore/ 

Trial experiment.

I thought back on the game project we had to do a few weeks back, and it reminded me of testing out designs to ensure that they worked properly. I thought I should try out my app on a paper-based format to see whether (roughly) it would really work or not to the public. By doing the experiment like this, I was able to get a primary view of the app and how it would be formatted. The first experiment I gave someone a brief set of instructions to what the app is about with a mini task to make them go around the app and find what they were looking for.

Student budget app.

You are a student living on an everyday budget. You need to budget a specific amount everyday to help you to manage your money. You need to travel from Tonbridge to Sevenoaks to go to university, and then you want to get/make some food with 3 people on the budget you have that day, and then you also want to go out somewhere, but you are unsure on the best deals going around.

You can save anything to your favourites, and you can also look up the best deals going around either around your location, or in a specific place. Once you have found the best place to go, you spend your money and you then take it away from the overall budget you have in that day.

Other items such as buying clothes/other luxuries are not included in our daily budget, as that is not considered an every day item to spend on if you are a student.

You will be given a filter search specified for what category you choose, allowing you to narrow down your choices.

Be realistic on the budget you would have that day on what task you are given to do. You can manually put in any budget amount you wish to spend that day, and you do not have to spend the whole amount, as the point of it is saving money!

I videoed the majority of the experiment, unfortunately it cut after 10 minutes without me realizing, meaning the end part was cut out. Throughout, I narrated him what was on the app in front of him, because drawing it doesn’t show all the obvious elements that you would be familiar of when you are looking at it on a screen.

Throughout, I noticed there were elements that I would need to improve on, such as adding certain buttons in or set it out in an easier format, so that the reader knew exactly where they were throughout, as well as understand the whole concept of adding a budget in at the top of the screen. If I were to design the app realistically, I would have instructions set out when someone firsts downloads the app, showing the basics around the app so that they understood the concept of the app and the benefit of it in comparison to other apps around.

After the experiment was done, the feedback I got was positive. The app ‘appeared’ to make sense to the audience, and I was advised to keep the whole layout as simple as possible. Because the app shows all different elements, having a specific themed background could be challenging, especially when the app has a lot of links in.

Like many apps, my app would need time to getting used to for the audience, and having a look around the app in order to see what’s available and what my app is capable of doing that other apps cannot do.


I then thought more about how my audience would want to see it more like a storyline, so I decided to draw a series of very brief mock ups of my app design, and record myself talking about the series of events happening in the frames as I went along. By doing this, I wanted to show people how it would work on a rough paper-base design, and give them a taster of what the app would be like if you were to function it. As I was doing this, I personally felt the desire to want to go the next page and create something different for the customer, giving them choices of where to go, giving them the power on the app. I spoke about what I would do for 3 events, as well as talk about a few extras I decided to add in after I had made the first video.

I thought about adding in the calendar, as suggested previously, where people can see the history of what they had spent, as well as you being able to write what you spent your money on. I think this would help the customer with the feeling of being able to manage their money, knowing what they were spending and how much on the occasion.


I noticed that my app would need a few more extra parts as I reviewed the video, such as having a route button on the maps, so it will direct you as you are looking at it like Google maps. This would further help the customer feel in control and give them a sense of identity and comfort knowing where they were, and being able to trust the navigation in getting them to where they want to go. In order to keep the customer interested in the app, I figured a simple design would be the most appropriate for my app, because having a one theme for it would be really limited on what theme I could have for it, without overcomplicating it.

By doing this like a movie animation, it got me thinking into doing this for my final piece also and have a movie animation of me narrating through the app. I could design the specific frames to how it would look on the phone, and put them altogether, making one movie. I would also show what the page would look like on a tablet/computer screen also, because my app has a login account, you can access your profile anywhere with internet.

Titles for my app.

After looking at different budget app titles, I realised that a lot of them had words included such as ‘saver’, ‘money’, ‘budget’ etc. Although my app is related to students, I didn’t want to specify that in the title that it would be given, because I want people to be drawn to what the app was before they read the details and description of the app.

photo 3My favourite two were ‘money manager’ and ‘penny tracker’. I thought these two would be the most appropriate for my app, because my app is all about managing your money and seeing where you are spending. I did however find that using the word ‘manager’ and ‘tracker’ made the titles almost feel like you had to have a large sum of money to use my app, or the idea of the title being listed as ’tracker’ could give the wrong impression of the app being about you trying to find the cheapest option and it would give the results to how much you would exactly spend in a certain place. For my category on travel it would work, however the listed deals would not work with this title, as it doesn’t specify exactly how much you would spend if you found a discount on a certain date.

I thought about what my app includes, and thought that the idea of it being called ‘penny checker’ seemed the most appropriate. The word ‘penny’ relates more to my app, as the app is about you saving those extras pounds/pennies to help you save more, and the word ‘checker’ enables you to keep on track with what you are spending, without you feeling like you have to track every move you make.

photo 1

 

unnamed

UnknownI felt really inspired by doing an image for my app icon than do a logo of my title. By seeing these examples, using picture imagery address more to hat the app is about, and it would give the customer familiarity to what the app is about if they were to look at it.

photo 2I decided to design a few ideas myself, and I thought of including an element of each category in the app logo. Although too much imagery would look too crowded in an app logo, I thought about keeping it really simple. My favourite design was having a few layers of money notes, with a silhouette of a wine glass and a knife in the centre. The idea of having the wine glass next to the knife gives the impression of a knife and fork, however a subtle difference to replacing it with a wine glass would make the customer understand that the app is not just about money and food, but also socialising when hey look at it at first glance.

I did think about adding a pound sign on the logo, however if I were to make the app an international application, the pound sign would be limited. If the app was real, I would suggest designing different elements that would make the pound sign appropriate worldwide on a later date if the app was proven successful across the UK.

ref:

https://play.google.com/store/apps/details?id=com.cooldatasoft.quiz.applogo

http://www.androidphonex.com/category/apps/finance/page/3/

App icons.

App icons are hugely important to the whole app itself, if it is designed poorly, people will not be encouraged to go near it. I found a few really cool app icons on Creative Bloq, which I thought were really interesting to look at. What I noticed in them all is the attention to detail and the use of colour that they used in them, making each one stand out from another. Even if the app icon was really simple in the design and not much tone is used, the image used was interesting. This got me inspired to think about with my app to create something really simple, but perhaps trying something different, such as having the app icon not have all rounded edges, but go slightly off tangent and have pointed corners instead?