Major Project Log Portfolio

Outline

The main aim of the project is to create an app to report park issues such as vandalism. The app is to be run alongside a website and forum. Posters for the app will be placed in parks to promote its use.

Further Research

Although I considered a wider audience initially, after feedback on my idea I have decided to aim the app at parents. Parents of younger children in particular who are visiting the park with their children. This could still cover a large age range from parents in their 20s to 40s but most live births are to mothers and fathers between 30-34 so it is likely the app would be used by parents in the 30s to early 40s.

“In 2015, over half (53%) of all live births in England and Wales were to mothers aged 30 and over and two-thirds (68%) of fathers were aged 30 and over.

The average age of all fathers increased to 33.2 years in 2015, compared with 33.1 years in 2014. For mothers the average age was 30.3 years compared with 30.2 years in 2014.

The average age of first-time mothers was 28.6 years in 2015, compared with 28.5 years in 2014.” – https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/livebirths/bulletins/birthsbyparentscharacteristicsinenglandandwales/2015

I have looked at style and layouts of park/outdoor related apps. Apps with a lot of visual detail are cluttered and it is harder to find what you want. Keeping the layout simple and clean is important to make the app easy to use.

Having looked at parent aimed websites/brands/apps/logos I have discovered that clean and modern designs are popular.

https://www.netmums.com/

http://www.bounty.com/

https://www.whattodowiththekids.co.uk/

 

Cover art

Cover art

Cover artCover art

Cover artCover art

Cover artCover art

Cover artCover art

Logos feature a lot of rounded elements – no sharp/harsh edges, the typefaces are rounded too. Hand-drawn style typefaces are popular too.

As the logo will need to feature on an app and website it needs to be simple too (it will appear small on screens, especially of smaller smartphones). I have therefore played around with heart/leaf motif and tree inspired designs amongst others as these represent parks and nature. I experimented with hand-drawn and modern sans-serif typefaces as these are popular styles aimed at parents.

Current Design Trends

https://digitalsynopsis.com/design/logo-design-trends-2018/

https://uxplanet.org/why-gradients-are-back-to-rule-in-2018-8b36711c335f

https://www.behance.net/gallery/48702241/Spotify-Duotone-Portraits

https://designmodo.com/websites-gradients/

http://justcreative.com/2017/11/28/graphic-design-trends-2018/

https://99designs.co.uk/blog/trends-en-gb/graphic-design-trends-2018/#gradients

Image result for spotify gradients

Gradients have made a comeback and I would like to incorporate this trend but in a more subtle way. Some of the gradients are too “young” for my audience, but a softer gradient would keep the design looking fresh and modern but not alienate my audience. I will experiment with gradients for the poster/app and website.

Logo Feedback

I put my designs on the Graphic Design Forum requesting feedback:

http://www.graphicdesignforums.co.uk/threads/logo-feedback-student-project.24903/#post-174121

Some of the feedback received:

“Look at the logos in your post without clicking on the images. That’s the sort of size they will be on the screen. They are too small and blurry. #4 is the simplest but it looks like a zillion other ‘green’ logos.

“Personally, I like where you’ve gone with these and although there is some room for improvement I think you’ve done well here.
I tend to like No4 the most but I see what you’ve done with the others also.

Green/community logo type stuff can be hard to do and re-invent the wheel so to speak as they do tend to have a similar vibe anyway.
A bit like optician logos. “

“They really need simplifying, remove all the additional texture and fuss and just work with a black shape for now. No.4 would be my favourite to work up, the heart/leaf motif would transition well, and a heart is a recognisable app icon already, so could be worked into the UI for saving/favouriting content. I’d use a stronger font though, what you currently have reminds me of a day care centre or something (though the colours could have something to do with that). Look at the National Trust font, that’s a serif which feels traditional, but it has character of its own.

Also try it out in some different contexts – a sign in a park, livery on a van, engraved into a bench, hell even mowed into a park field so it’s visible from above! Really go to town with the idea and push it to see what works and what doesn’t. Generally the simpler something is, the stronger and more versatile the branding elements around it can be. If it doesn’t work, well you’ve got some decent research for your final project, which is generally what gets you those points anyway.”

“Does the app even need a logo? The words OurPark with the right font and colours is all you really need.”

I have decided to work on the leaf/heart idea more and I will also test out just using a typeface without a logo. However, with it being an app and website some sort of logo, even if just a monogram, would be needed for favicons, app icons, etc.

John looked at the logo numbered 1 and said that it looked like OurPork and suggested changing the leaf/heart to point upwards, as shown in logo 2. Joe then said that number 2 looked like OurPork but the other ones didn’t. I don’t want to create confusion, so I put the leaf/heart in the O. Although I think this feels cramped.

I also experimented with several typefaces, looking at curvy/rounded typefaces. Lee gave feedback on that the Kirvy typeface was too futuristic. I agree with Lee as I was going through several typefaces to try to find something suitable and this was just one of many I was trying out.

Kirvy Typeface

New Logos

1

 

2

3

4

 

I really want to get several good logos before showing my audience. As the rest of the design work will be based on the logo it needs to be perfected further which is why I’m spending a lot of time on this part.

Feedback from parents about the logo:

 “I like the first one and the last one” – Roxanne

“The “OP” one seems friendlier than the rest, it’s not as corporate looking” – Mike

“The second one is my favourite because the leaf looks like a heart and I like that but I like the colours on the last two more, I’m not keen on the darker green.” – Sally

The opinions were mixed but most people preferred the last design. I worked on this more including trying different typefaces and colours and spacing.

Final Logo

I did try a few different typefaces but the typeface I originally used has a friendly feel due to it’s curves and this will appeal to the demographic. The logo works on colour and black/white which is important as it may appear on other materials. The tree motif was tidied up slightly to create more space in between elements, this was done to stop the elements merging when shrunk down on a small screen.

When on a white background I have chosen a green and blue-turquoise colour to represent nature/parks/the natural environment found in parks. On a coloured/dark background it will be shown in white.

Android Icon Mock-Up

Initial Logo Sketches/Ideas here: http://ba.aysheasiddall.co.uk/2018/04/24/initial-logo-ideas/

Event Poster Research

https://www.creativebloq.com/posters/poster-designs-121518466

Illustration is a popular choice for fair/festival posters, this is probably because you can communicate a sense/feeling of the event through illustration something which can be hard to create through a single photo as there is usually a lot of different things happen at one event. Therefore, I will utilise illustration for my event poster but also for app promotional posters to go in parks.

Current illustration trends:

https://www.creativebloq.com/features/illustration-trends-2018

https://www.digitalartsonline.co.uk/features/illustration/2018s-best-new-illustrators/

App Promotional Posters

I have researched the sort of posters found in parks (such as littering) and also “no parking” posters aimed at parents.

Several of the no parking ones I have seen online and outside of schools feature illustrations of children. The pick up the poo poster would likely have a larger impact on those dog owners with children or grandchildren as they would think about their own child/grandchildren picking up the poo. Featuring a child/children in the app posters is a good way of getting the attention of my audience (parents). But it could also grab the attention of children who may mention it to their parents (something my 6 year old does).

Illustrations/Sketches/Ideas for Posters

I sketched out several ideas and illustrations before scanning the illustrations in. I then used these to make vector illustrations for the posters. I tried out different colours, textures and shading before deciding on simple white illustrations for the app posters with highlights using gradients. This created simple bold illustrations which “pop” when on a coloured background. This draws attention to the poster.

 

App Poster

Ideas

After playing around with the design I realised that a green background would not stand out in a park (too much grass and trees around). I tried out different colours and settled on orange. Although this is an unusual colour choice for a poster for a park related app I think the fact that it is unusual will help it stand out and catch people’s attention.

I also had the idea of having pairs of posters which could either be used together or separately depending on the circumstances/needs of the park (council and park groups could decide which type of posters they would like to use or use them in pairs). The pairs would be positive v negative, before and after. Showing the positive of using the app – children enjoying the park with working play equipment. With one with a straight call to action – report it to our park. And the other more subtle – entices the viewer in to read what it is about – help your park with ourpark.

Festival Poster Final Design

The design is bold and colourful to attract both children and parents. The “sun rays” draw the eye to the text. The same typeface has been used (Bariol) as for the Logo to keep a consistent feel. Also the same green gradient which is used on the website and app is used for the background to again provide a tie between the event and app. The flower includes guitars and ice lollies as petals to represent what the event will include and the flower also represents parks/nature and summer.

Poster Mock Ups

App

I looked at design best practice as well as studying other apps to get a feel for how apps are designed. Users (including me) are used to expecting certain things to happen and trying something that doesn’t flow with the what is expected from other Android and Apple apps can confuse users.

https://www.uxpin.com/studio/blog/guide-mobile-app-design-best-practices-2018-beyond/

https://medium.com/blueprint-by-intuit/native-mobile-app-design-overall-principles-and-common-patterns-26edee8ced10

Examples of things users are used to seeing are “call to action” buttons which contrast from their background, which I have used on my app. Also using cards or tiles for groups of information – I have utilised cards for the events page to separate each event.

Loading/Splash

Menu/Home

Menu/Home Mock Up

Location Page

Upload Photo Page

Describe Problem Page

Local Events Page

Local Events Page Mock Up

A large “call to action” next button stands out from its background. Using a border around each section on the events page creates “cards”.

Greens/blue-turquoise colours have been used to represent the environment/nature.

Cut Out The Clutter

Good UI design is all about delivering relevant information (signal) and avoiding irrelevant information (noise).

By cluttering your interface, you overload users with too much information: every added button, image, icon makes the screen more complicated. Clutter is terrible on a desktop, but it’s even worse on mobile devices where we don’t have too much free screen space to play with.” – https://medium.com/blueprint-by-intuit/native-mobile-app-design-overall-principles-and-common-patterns-26edee8ced10

I did find to start with that it is tempting to add too much information on app. In the end I kept the design as simple and clean as possible. This is to avoid users getting confused but also encourage users to report issues – if it is straight forward then users are more likely to use the app again if they see another problem.

Sam W. liked the app’s colour scheme and also the logo, in particular he liked the gradient used.

Google Play Store Mock-Up

Initial Sketches/Notes for App and Web Design: http://ba.aysheasiddall.co.uk/2018/04/24/app-and-website-sketches-notes/

Website (Home)

Initial Designs

I tried several layouts and played with gradients as well as the current trend of large type on websites (often used to make a bold statement on the homepage).

I realised that that the design was becoming overly fussy and needed to be paired back to keep simple and easy to use. I stripped away detail and the main feature of reporting problems was placed in the top left of the design as this is the area users look at first and the left side tends to get more attention  (https://conversionxl.com/blog/10-useful-findings-about-how-people-view-websites/)

Final Design

Forum

I researched several types of forum platforms and forum layouts before laying out the forum.  (https://xenforo.com/community/, http://www.ukbusinesslabs.co.uk/forums/, https://www.vbulletin.com/forum/forum/vbcloud/account-management, https://www.ukbusinessforums.co.uk/, http://www.madeformums.com/forum/, https://www.justparents.co.uk/forums/5/, https://www.netmums.com/coffeehouse/children-parenting-190/, https://www.sanparks.org/forums/, )

I again wanted to keep this simple and easy to use especially as Friends of Groups are run by people of all ages and technical abilities. The final design uses a limited colour scheme that is in keeping with the app/rest of the website. A consistent feel across all design elements aids users to find the information/use the app/site quickly as they don’t have to re-learn the visual code for each platform. But at the same time there are differences due to the nature of each platform.

More Logo and Social Media Mock Ups: http://ba.aysheasiddall.co.uk/2018/04/27/more-ourpark-mock-ups/