Studio Brief 02 - Design for Screen - Further Development

Developing the design -

Below are some screen shots of my initial designs where I used the wireframes to help me figure out how I should design each page. My feedback suggested that I try and make my website its own and not just and extension of PayPal, what I have done to achieve this look is use the grid from PayPal and the very basic attributes and then I have worked the site into its own style. The colour scheme is based the PayPal blue but it is mixed with the green (stereotype of money) and the gradient hopefully appeals to the younger target audience. I have also made sure that everything is the right dimensions of a wide screen desktop site. 

This is the home page (after login) you are presented with three main panels these the left will always be your account details and the others are then customisable to what ever the user would like, I made it like this so that people will feel like they have more interaction with the website as this will let them see what they want to see rather than the database decide for user. The three circles will become icons that allow the user to have quick buttons so they can access a different part (favourites/most frequent) of the site as they wish. When scrolling the Welcome bar will go and you will be left with the main nav bar, to leave a clean space for the user, the aim of this was to not over crowd when scrolling. 

This is the users account page, there they can see most recent transactions and then a more in depth look at how they have spent the money. The idea is that they have to reveal each category, this also helps to save space on the page meaning the user doesn't have to do endless scrolling, it makes it simple to find what they are looking for. I have used pie charts as I felt that this was the best way to show information to do with numbers quickly and without making too boring for the user, this compared to graphs and other means of information design seemed like the most effective way too display data, without taking up a lot of space.

This page is displaying the blog posts that all users will have access to, posts will include tips on saving money and about how to do certain things, this is a good recourse for university graduates as this would be the ideal place to look rather as all the posts are catered for them. The design of the page is very simple, search bar at the top for quick access to look through all blog posts, and below shows most recent blogs. The pictures on the blogs posts will be there to grab extra attention as it could be very difficult to get the attention about a less interesting subject matter. 

My research showed me that most comparison are very simple and easy to navigate with easy to locate menu and filter options so that the user can find exactly what they are looking for. When creating this page I wanted it to be be able to display the right information at the right times, this is why the all the categories shown at the top this the filter bar a long the side, this is very common for comparison and online shopping sites, I wanted to make this part familiar for users so that it would be used efficiently. 

 This is the sign in page, it is based on the design of the current PayPal site as I felt that this way people would still understand that it is part of PayPal but it needed to look different for the site as it isn't the same site so I have used the assets of PayPalsave so people can see that it is also different to PayPal. 

Again on this page there are elements that the user may find familiar and this has been done for that reason. But to the right is a feature of the website that allows the user to put away money into different folders in order to save it. These are the circles, they have been designed like this to make them seem different as they are for a different purpose, if they were credit card shaped it may give the wrong impression to the user. 

Conderations - 


Typeface - 

Choosing the appropriate typeface is a key part to any design, it helps with many aspects of the design the first consideration I thought about was about style how did I want people to see the sight. The current PayPal typeface Verdana is very simple and seems to work well with the site. I wanted to make sure that the style of the site would appeal to the target audience, so I used Google Fonts to help me search for an equally suitable typeface the reason I chose to use this site was because it gave some small facts about where the typeface had been used most and this helped to give me a better understanding of what typeface to choose. I looked through a few examples that were of a similar minimal style and I managed to pick a couple of typefaces that could be used. 

I went with Montserrat as I felt that it was closest typeface to the current PayPal typeface, the reason I didn't want to use that typeface was because I wanted to give the site a new fresh feel that would be different from the current PayPal site comparing this two the other two that I looked at using this worked the best as it is very subtle but gives the rest of the design a different style compared to the current typeface.  

Open Sans 


Montserrat 


PT Sans 



Colour - 

Choosing a colour scheme came from a very simple idea. Wanting to incorporate the PayPal branding to the site I decided that it would be good idea to use the main colour of PayPal (blue) to give some familiarity to the sites users however as it is a new site it can't just be the same so I thought about what other colours that could be used. In doing this I thought about how money in films, animations, illustrations is seen as either green or gold. So I decided that green would be the most appropriate colour to accompany the main blue. As you can see from my designs I as able to use a gradient to mix both of the colours together this is better than using two separate colours as it makes the use see that its not just like the original PayPal site. 

Sizing - 

It was difficult to decide what platform this service should be on, after getting some feedback on my designs I made the choice that it would work better as a website as this would make it more engaging for the user. All pages are the common web size of 1366 x 768 px but I soon released that I did not want the content to be right to the edge of the screen as this could cause problems depending on what size screen the site is being used on. To make sure that all content is visible to to all users I have made the content use up 960 px leaving a boarder, this also focuses the eye into the middle of the screen making it easier for the user to see everything and not get lost if there is a page with lots of information on it.  


Only Studio (Feedback) - 

At this point it was very beneficial to get some feedback from professionals as they were understanding of the process which helped me to understand what was good and what areas I could improve on. 

Overall they said that the design was well informed and they could see how the I had clearly solved the problem that I had created. When going through the site they were able to pick up on areas that I should improve on, the best part was talking to them about how the site could work well on both online and mobile platforms. They suggested that I consider the user journey for both and see how money management can really benefit from technology, as it is one of the biggest things the people are using on there phones after social media. From this point I want to look at the benefits of both and clearly show how the website is going to the forefront of the the online service.