Somewhereville Week 6: Digital Prototyping, Making a Logo and Map, and Paper Prototyping

App Making Program And Fonts

This time around I’m going to be using Invision as my free trial for Atomic is over (which is what I used for my Infographic). I’m happy to use Invision as I have tested with it before and it seems easy to work with but I also think it’s appropriate for app designing and prototyping.

The fonts I ended up deciding to use are Ebrima and American Captain as I believe they reflect the atmosphere of North Haven as a whole


Icons and Logo

I started off with making the icons and logo for the app. I had the most trouble with making an icon for the attractions page since I wasn’t sure what shape would represent attractions. I originally went with the wave icon which I tested (this will be shown later in this post) but after testing I researched icons for attractions and a camera and binoculars popped up which I felt was more appropriate so I decided between the 2 that the camera was better suited for this location as there are many places to take photos.



I then trialed one of my icons (Section Page) to see howit would all lay out. It worked well except as you can see below I needed to change my section page icon as my original idea of using the arrow made it look like the button was to go back to the top of the page.

section icon trial.png

In terms of the logo I wanted something that included North Brother Mountain as that is in my opinion the most iconic attraction in the area. I experimented with using the sun in the background and using paragliders as many people paraglide off the top of the mountain. I also wanted the include water since it is a coastal area. I did a few tests and got a family members opinion on whether any of the remind them of North Haven. They told me to add in the break walls as there are 2 so I did and he felt it worked much better. I tested the logo on the home page but felt the the green on the mountain was too harsh in comparison to the images on the page. I tried 2 other greens and felt that the lightest one worked best. (sketches are located in the previous sketch image.)

north haven logo.png


Paper Prototype

I made my paper prototype into a video which I unfortunately can’t upload onto this blog so I uploaded it onto YouTube. I tested 2 people and this is what the results were:

After I tested the 2 candidates I realized it probably would have been better if I tested someone in my persona’s age gap but I didn’t have anyone of that age near me at the time which was ok because I got really good feedback. This includes the following:

  • On the Home Page have a clear indication that the logo is what you need to press to get to the next page
  • Stick with the original idea of attractions page and separate the attractions into categories
  • Change the wording “Shake To Shuffle” (which they thought shuffled the list around) into something like “Shake to Select Random Location” that way this form of navigation is more clear”
  • Only include the shaking navigation within each category of the attractions page
  • On the transport page change “Planes” to “Flights”
  • Indicate what icons represent what by including these icons somewhere on the page that they lead to.

I took all these comments into consideration and started working on my pages.

Home Page

home pages.jpg

With the home page I took note of making it more obvious that the logo was the button on the page by experimenting with both words and a shadow effect. However, I felt that they both didn’t fit in with the app design as a whole so I spoke to the person who made the comment and they mentioned about using the home page as a sort of loading page where you don’t have to press anything. I thought this would work well so I got rid of the wording and shadow, trialed this in Invision to see if it would work which it did and what you see on the far right is what I ended up with for the final image of the Home Page.

About Page

I actually forgot that I had to include this page last week (Thank God I looked back at the brief). The About Page is meant to be pretty straight forward and an introduction to the app. I included information giving a rough idea of where North Haven is located, how it is a coastal area great for holidaying and how it is family friendly. I didn’t experiment too muc with this one as I based it off my original “Riverwalk Markets” page from last week. The design ended up being my final image:

About Page.png

Section Page

In my first sections page design I didn’t have a link to the about page as I mentioned before that I had forgotten to have an about page. So I added in a link to the about page which didn’t effect the layout too much and kept the design consistency. Instead of calling it “About” I decided to go with the heading of the page which is “A Coastal Getaway”, however, I’m not completely satisfied with this.

section pages.jpg

Attractions Page

I started by looking back at the designs from last week and adjusting them to fit with the feedback that I received from the paper prototype.

cuisine and locations pages.jpg


They have the same layout as the original attractions design (on the left) but will be split into “Locations and Events” and “Cuisine”. I left the words shake to shuffle within the designs for reference use only, I planned to re word them later.

attractions category pages.jpg

I then experimented with the attractions category page, sticking with a similar layout. The first thins that bothered me was how I had stretched out the title “Attractions” (Left side) in my original design because I felt it would take up room like and image being placed at the top of a page. But now that I’m using borders throughout my pages for consistency there is no real need for the word to be stretched like that. Also I found that the page was really empty so I tried this design again by fixing up the title and adding the attractions icon on the page, however, neither of these designs felt right as they both felt empty. From this I came to the decision of going all the way back to my first idea of having a cuisine link on the section page as I have been told a few times that cuisines aren’t really attractions.

Map Page

Another student in my class was hinted a website called “Stamen Maps” that you could download images of places all over the world using different textures of yur choosing. Once she showed my this I did some experimenting of my own trying out the different styles:

map textures.jpg

After trialing these I went with the watercolour style (at the bottom) since I felt it reflected the whole idea of North Haven as a coastal region and it didn’t stray to much from my app’s overall design and colour palette. So I experimented with this a bit more and found that at a particular point when I zoom out the tracings of certain roads (white lines) disappered which would be a problem. I first tried image tracing the roads in adobe illustrator and adding them in to my larger scaled map but it was taking too much a time and wasn’t really working. So from this I tried on a different computer and in turn had to use screen shot to capture al the roads since the webpage wouldn’t let me do images to that scale. This was the result which ended up being my final map background:


I fiddled with the map addig in icons to represent various locations, however I had the trouble with some locations being close together. I originally had a map for just attractions and one for just accommodation (below) but this was too crowded so I made the decision to split the map into 4 categories so that the user could select to see either locations and events, cuisine, caravan parks or hotels, motels and units.

maps trials.jpg




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s